Идеальное горизонтальное меню на uCoz | |
| Идеальное горизонтальное меню, для игровых проектов. Как видим, горизонтальное меню в малых тонах и можно поставить, как на темные так и на светлые ресурсы. Данное меню, сделано под игровую тематику. Что по тематике, то его можно установить на многие темы, тут главное, чтоб дизайн подходил, под светлый должно смотреться. Все разделы идут с изображение, что встретить такой стиль можно редко, также при наведение будет небольшой эффект. Безусловно как говорилось, все настроено на белый оттенок, и при установке дизайн сайта станет привлекателен а полном смысле. Так смотрится в оригинале:  Горизонтальное меню с кнопками на тему Верхняя часть сайта: Код <div class="container"> <ul id="navigation" class="clearfix en"> <li class="tools "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Tools</span> </span> </a> </li> <li class="vehicles "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Vehicles</span> </span> </a> </li> <li class="paintjobs "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Paint Jobs</span> </span> </a> </li> <li class="weapons "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Weapons</span> </span> </a> </li> <li class="scripts "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Scripts</span> </span> </a> </li> <li class="player "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Player</span> </span> </a> </li> <li class="maps "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Maps</span> </span> </a> </li> <li class="misc "> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Misc</span> </span> </a> </li> <li class="forums"> <a href="#"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>Forums</span> </span> </a> </li> <li id="more-dropdown" class="more dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="icon-category"></span> <span class="label-border"></span> <span class="label-category"> <span>More</span> </span> </a> Css: Код .container{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px} .container:before,.container:after{content:" ";display:table} .container:after{clear:both}@media (min-width: 768px){.container{width:735px}}@media (min-width: 992px){.container{width:955px}}@media (min-width: 1200px){.container{width:1155px}}.container-fluid{margin-right:auto;margin-left:auto;padding-left:7px;padding-right:8px} #navigation{margin-top:130px}body.home #banner #intro{display:block}#navigation{list-style:none;margin-top:95px;padding:0;width:100%}#navigation>li{float:left;width:10%}#navigation>li>a{display:block;border:1px solid transparent;border-radius:4px}#navigation>li>a>.icon-category{display:block;height:115px;background:url("https://zornet.ru/Ajaxoskrip/Abaveg/tyn/14532355.png") no-repeat center top;opacity:0.75}#navigation>li>a>.label-border{display:block;height:4px;background:none}#navigation>li>a>.label-category{display:block;text-align:center}#navigation>li>a>.label-category>span{display:block;background:#efefef;color:#808080;text-transform:uppercase;font-size:14px;font-weight:500;line-height:35px;margin:0 1px}#navigation>li>a:hover,#navigation>li>a:active,#navigation>li>a:focus{text-decoration:none}#navigation>li a:hover .label-border,#navigation>li.active .label-border{background:#20ba4e}#navigation>li a:hover .icon-category{opacity:0.8}#navigation>li.active .icon-category{opacity:1 !important}#navigation>li.active .label-category>span{background:#fff;color:#333}#navigation>li.vehicles .icon-category{background-position:center -128px}#navigation>li.weapons .icon-category{background-position:center -256px}#navigation>li.scripts .icon-category{background-position:center -384px}#navigation>li.player .icon-category{background-position:center -512px}#navigation>li.maps .icon-category{background-position:center -640px}#navigation>li.misc .icon-category{background-position:center -768px}#navigation>li.paintjobs .icon-category{background-position:center -896px}#navigation>li.forums .icon-category{background-position:center -1024px}#navigation>li.more .icon-category{background-position:center -1152px}#navigation>li.tools .label-category>span{margin-left:0}#navigation>li.more .label-category>span{margin-right:0}body.category #navigation li.active .label-category{border-left:1px solid #ccc;border-right:1px solid #ccc}body.category #navigation li.active .label-category>span{padding-bottom:4px}@media (max-width: 1199px){#navigation li a .label-category{border:0 !important}#navigation li a .label-category>span{font-size:13px;padding:0 !important}body.de #navigation li a .label-category>span,body.es #navigation li a .label-category>span,body.nl #navigation li a .label-category>span,body.pt-BR #navigation li a .label-category>span,body.ru #navigation li a .label-category>span,body.tr #navigation li a .label-category>span{font-size:11px}}@media (max-width: 991px){#more-dropdown .dropdown-menu{right:auto}#banner,body.home #banner{height:202px}#banner #intro,body.home #banner #intro{display:none}#navigation{margin-top:60px !important}#navigation>li{display:inline-block;float:none;clear:both;width:32%}#navigation>li>a>.icon-category{display:inline-block;vertical-align:middle;width:24px;height:24px;background-size:24px 240px;opacity:0.9}#navigation>li>a>.label-border{display:none}#navigation>li>a>.label-category{display:inline-block;vertical-align:middle;padding-right:5px;border:0}#navigation>li>a>.label-category>span{text-transform:none;background:none !important;color:#fff !important;height:30px;line-height:30px;font-weight:normal;font-size:15px !important;text-shadow:1px 1px 2px #000}#navigation>li.active a,#navigation>li a:hover{background:rgba(255,255,255,0.25)}#navigation>li.active .label-category>span{background:none;border:none;color:#fff}#navigation>li.vehicles .icon-category{background-position:center -24px}#navigation>li.weapons .icon-category{background-position:center -48px}#navigation>li.scripts .icon-category{background-position:center -72px}#navigation>li.player .icon-category{background-position:center -96px}#navigation>li.maps .icon-category{background-position:center -120px}#navigation>li.misc .icon-category{background-position:center -144px}#navigation>li.paintjobs .icon-category{background-position:center -168px}#navigation>li.forums .icon-category{background-position:center -192px}#navigation>li.more .icon-category{background-position:center -216px}body[class^='category-'] #navigation li.active .label-category{border-left:none;border-right:none}body[class^='category-'] #navigation li.active .label-category>span{padding-bottom:0}}@media (max-width: 767px) (rip Бармен) - он же JoniDen. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 22 | |
|
| |
