Идеальное горизонтальное меню на uCoz - Меню - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Меню


Идеальное горизонтальное меню, для игровых проектов. Как видим, горизонтальное меню в малых тонах и можно поставить, как на темные так и на светлые ресурсы. Данное меню, сделано под игровую тематику. Что по тематике, то его можно установить на многие темы, тут главное, чтоб дизайн подходил, под светлый должно смотреться.

Все разделы идут с изображение, что встретить такой стиль можно редко, также при наведение будет небольшой эффект. Безусловно как говорилось, все настроено на белый оттенок, и при установке дизайн сайта станет привлекателен а полном смысле.

Так смотрится в оригинале:

Горизонтальное меню с кнопками на тему

Верхняя часть сайта:
Code
<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:
Code
.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("http://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)



Важно!

При копировании материала указывать ссылку на источник.

- 440
- 02-Декабря-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта