» »

Идеальное горизонтальное меню на uCoz


Идеальное горизонтальное меню на 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("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)


(rip Бармен) - он же JoniDen.
15.10.2016 Просмотров: 432 Комментарий: (21)

Поделиться в социальных сетях

Материал разместил

Комментарий: 21
Kosten
Kosten 15.10.2016 18:371
0
Это чисто под игровую тематику сделано, что то не понял, а можно кнопки у него поменять, чтоб тематику изменить, так бы было отлично.
JoniDen
JoniDen 15.10.2016 18:413
0
Да кнопки не только для игровой подойдут, убери просто сверху иконки, и описание и будет тебе не игровое.
Сопрано
Сопрано 15.10.2016 18:412
0
Стили к нему идут слишком большие, по идее красиво должно смотреться, Костен сделай демонстрацию.
JoniDen
JoniDen 15.10.2016 18:424
0
Ну тут иконки не в виде картинок.
Kosten
Kosten 15.10.2016 18:435
0
Тут не шрифтовой стиль, что то просто ссылку не на шел на его, а так если посудить его можно установить.
JoniDen
JoniDen 15.10.2016 18:447
0
Я пытался изменить шрифт, он не менялся почему-то. Ну шрифт вроде норм стоит, из оригинала.
Kosten
Kosten 15.10.2016 18:498
0
JoniDen, можешь сделать на сайте jsfiddle.net -чтоб посмотреть.
JoniDen
JoniDen 15.10.2016 19:0010
0
Вот держи, только вот эту линию, сдвинуть в бок.
Kosten
Kosten 15.10.2016 19:0411
0
Но у меня также вышло, просто светлые иконки не видно, и на светлый фон не установить, а можно сделать, чтоб самому поставить.
JoniDen
JoniDen 15.10.2016 19:0813
0
У тебя тестовый сайт есть? Установи туда.
Kosten
Kosten 15.10.2016 18:446
0
Trantel, постараюсь сделать, красивая навигация, и ее реально нужно смотреть.
FeStemBer
FeStemBer 15.10.2016 18:549
0
Интересное меню, но оно прозрачное, и светлые кнопки должны на темном фоне стоять обязательно, или можно под них изображение установить?
Сафрон
Сафрон 15.10.2016 19:0612
0
Мне понравилось, это хорошо когда кнопки под категориями стоят, на на горизонтальном меню, это редкость.
JoniDen
JoniDen 15.10.2016 19:0914
0
Я рад что понравилось.
trem200
trem200 15.10.2016 19:3215
0
Ещё одно замечательное меню. Спасибо огромное.
JoniDen
JoniDen 15.10.2016 19:3816
0
Да не за что.
Kosten
Kosten 15.10.2016 19:4317
0
JoniDen, как по стилю смотришь, что оно адаптированное под мобильные аппараты, или его нужно в этом случай подгонять.
JoniDen
JoniDen 15.10.2016 19:4618
0
С мобилы не тестил, да я вообще не тестирую под мобилу, хотя надо для полной надежности.
Angerfist
Angerfist 15.10.2016 20:1719
0
Разве начало стилей ничего не говорит?
Код

.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}
и так далее...
Вообщем оно будет складываться, не убираться в одну кнопку как все привыкли
avatar
yastreb 21.11.2016 23:0620
0
как установит# это мену на сервер august4u? я сначало тагрузил а укоз а потом ставлу в чат august4u но не птиномает что делать? если кто знает пишите в вк: https://vk.com/id87471509
Kosten
Kosten 21.11.2016 23:3221
0
По установке все написано в материале, также в комментариях приведено.
avatar