» »

Красивое игровое меню проекта для uCoz


Красивое игровое меню проекта для uCoz

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

Верхняя часть сайта:

Код
<div class="main_menu">
  <div class="block">
  <div id="block-menu-primary-links" class="block block-menu">

   
  <ul class="menu"><li class="expanded first odd" id="menu69df1f85b0abbce850b5feb29bddcb2a"><a href="#">Новости</a><ul class="menu"><li class="leaf first even" id="menu69df1f85b0abbce850b5feb29bddcb2a"><a href="#" title="">Новости</a></li>
<li class="leaf odd" id="menuf0140fe5c008bc9dba02e41613e44307"><a href="#" title="">Пресса о нас</a></li>
<li class="leaf last even" id="menuc530987b4ffc87a77235d8244e4ba4a1"><a href="#" title="">Наши партнеры</a></li>
</ul></li>
<li class="expanded odd" id="menuacf664b247822ae00651a97d44f5f4c0"><a href="#" title="">Об игре</a><ul class="menu"><li class="leaf first even" id="menu5dad7b0a025be1b1dd97ed9bae68e48b"><a href="#" title="">Скачать</a></li>
<li class="leaf odd" id="menuacf664b247822ae00651a97d44f5f4c0"><a href="#" title="">Об игре</a></li>
<li class="leaf even" id="menu222de3e53064abcb73b5a826d4150d2c"><a href="#" title="">Обновления</a></li>
<li class="leaf odd" id="menu4201098801e000b0e70fc0d7e8342e3b"><a href="#" title="">Сюжет</a></li>
<li class="leaf even" id="menu261cb243c05c532890ec2e3d2b18a858"><a href="#" title="">Армата</a></li>
<li class="leaf odd" id="menuc7f36391bac5b6e5aac2de63f6480fda"><a href="#" title="">Пополнение счета</a></li>
<li class="leaf even" id="menu5e552ba8f8487aa6432a31afa88f47b6"><a href="#" title="">База знаний</a></li>
<li class="leaf odd" id="menue29008a36f715cd2c5bffcc4a70f6cec"><a href="#" title="">Руководства</a></li>
<li class="leaf last even" id="menuda75cd652254fce37e953d7f261f132d"><a href="#" title="">FAQ</a></li>
</ul></li>
<li class="leaf even" id="menuceecaab39a5cb0e2bb299064bcc6f8a1"><a href="#" title="">Альянсы</a></li>
<li class="expanded even" id="menuc24797c4abfb4ebe54dc45b9e411ac3a"><a href="#" title="">Медиа</a><ul class="menu"><li class="leaf first odd" id="menua0959731ad7bd64d907b100cf28c5775"><a href="#" title="">Видео</a></li>
<li class="leaf even" id="menua56ba692aad2479bfa5f088aa17dbbc4"><a href="#" title="">Скриншоты</a></li>
<li class="leaf odd" id="menu9a5ffce783e5fc629939c07222f372f4"><a href="#" title="">Концепт-арт</a></li>
<li class="leaf even" id="menuf64f457326d92c412371753eb211a65c"><a href="#" title="">Обои</a></li>
<li class="leaf last odd" id="menuc8b08e085d96dcd500adbf17cd56bed5"><a href="#" title="">Фан-кит</a></li>
</ul></li>
<li class="expanded even" id="menua8b894086dcccc3d9c56c48e2c1617bc"><a href="#" title="">Сообщество</a><ul class="menu"><li class="leaf first odd" id="menu31531e247ee6daa46ffef88f1e6847bb"><a href="#" title="">Партнеры</a></li>
<li class="leaf even" id="menudf27ea2e7e22077f25f25528d3e81c4b"><a href="#" title="">Соцсети</a></li>
<li class="leaf last odd" id="menu67b67f0bad308311c5a6f1d33df1fc17"><a href="#" title="">Форум</a></li>
</ul></li>
<li class="leaf last odd" id="menu0f7ef45a6478ef6aa87af9eb9952f101"><a href="#" title="">Пополнить счет</a></li>
</ul>
</div>
  </div>
  </div>


Css:

Код
@import 'https://aw.cdn.gmru.net/static/general/fonts/Squares/font.css';

/* Main menu */

.main_menu {
  width: 1251px;
  margin: 0px auto;
  }

  .main_menu .block-menu > ul {
  height: 50px;
  position: relative;
  margin: 0px 0px 12px 0px;
  padding: 0px;
  background-color: #23262d;
  }

  .main_menu .block-menu > ul > li {
  height: inherit;
  display: block;
  position: relative;
  float: left;
  margin: 0px;
  padding: 0px;
  list-style: none;
  }
  .main_menu .block-menu > ul > li:nth-child(1) {width: 182px;}
  .main_menu .block-menu > ul > li:nth-child(2) {width: 182px;}
  .main_menu .block-menu > ul > li:nth-child(3) {width: 182px;}
  .main_menu .block-menu > ul > li:nth-child(4) {width: 182px;}
  .main_menu .block-menu > ul > li:nth-child(5) {width: 234px;}
  .main_menu .block-menu > ul > li:nth-child(6) {width: 289px;}

  .main_menu .block-menu > ul > li > a {
  height: inherit;
  display: block;
  color: #fff;
  font: bold 20px/48px Squares, Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  }
  .main_menu .block-menu > ul > li > a:hover {
  color: #000;
  background-color: #feca00;
  }
  .main_menu .block-menu > ul > li:nth-child(n+2) > a {
  border-left: 1px solid #696f70;
  }

  /* expandable menu button */

  .main_menu .block-menu > ul > li.expanded > a {
  background-image: url(http://images.vfl.ru/ii/1471499303/77033da4/13779678.png);
  background-repeat: no-repeat;
  background-position: right -5px;
  }
  .main_menu .block-menu > ul > li.expanded > a:hover {
  background-position: right -65px;
  }

  /* yellow button */

  .main_menu .block-menu > ul > li:nth-child(6) > a {
  box-sizing: border-box;
  color: #000;
  line-height: 45px;
  background: #feca00;
  border: 2px solid #000;
  }
  .main_menu .block-menu > ul > li:nth-child(6) > a:hover {
  background: #ffe400;
  }
  .main_menu .block-menu > ul > li:nth-child(6).firstpayment > a:before {
  content: '';
  width: 49px;
  height: 49px;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(http://images.vfl.ru/ii/1471499268/dd35f7f7/13779671.png) right top no-repeat;
  z-index: 1;
  }

/* Secondary menu */

  .main_menu .block-menu ul > li > ul {
  display: none;
  }
  .main_menu .block-menu ul > li.expanded:hover > ul {
  display: block;
  }

  .main_menu .block-menu > ul > li > ul {
  width: inherit;
  position: absolute;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  z-index: 90;
  }

  .main_menu .block-menu > ul > li > ul li {
  width: inherit;
  height: 31px;
  position: relative;
  margin: 0px;
  padding: 0px;
  list-style: none;
  }

  .main_menu .block-menu > ul > li > ul li a {
  height: 31px;
  display: block;
  padding: 0;
  color: #fff;
  font: bold 14px/30px Squares, Arial, Helvetica, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  background: #4d5a6d;
  white-space: nowrap;
  }

  .main_menu .block-menu > ul > li > ul > li.expanded > a {
  background-image: url(http://images.vfl.ru/ii/1471499248/e9791ec1/13779661.png);
  background-position: right 5px;
  background-repeat: no-repeat;
  }

  .main_menu .block-menu > ul > li > ul li a:hover {
  color: #000;
  background-color: #ffcb00;
  }

/* Tertiary menu */

  .main_menu .block-menu > ul > li > ul > li ul {
  min-width: 250px;
  position: absolute;
  top: 0px;
  left: 100%;
  margin: 0px;
  padding: 0px;
  z-index: 90;
  }

  .main_menu .block-menu > ul > li > ul > li ul li.expanded > a {
  background-image: url(http://images.vfl.ru/ii/1471499229/b9ec8ebc/13779658.png);
  background-position: right -45px;
  background-repeat: no-repeat;
  }
  .main_menu .block-menu > ul > li > ul > li ul li.expanded > a:hover {
  background-position: right 5px;
  }

  .main_menu .block-menu > ul > li > ul > li > ul li a {
  padding: 0px 10px;
  color: #fff;
  background-color: #2d2a23;
  border-left: 1px solid #5f5d58;
  }
  .main_menu .block-menu > ul > li > ul > li > ul li a:hover {
  color: #2d2a23;
  border-left: 1px solid #ffcb00;
  }


(rip Бармен) - он же JoniDen.
18.08.2016 Просмотров: 414 Комментарий: (7)

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

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

К сожалению, похожего ничего не нашлось!
Комментарий: 7
Сафрон
Сафрон 18.08.2016 19:051
0
Спасибо, нормальное горизонтальное меню, главное от других отличается.
FeStemBer
FeStemBer 18.08.2016 19:102
0
Думаю если кто ставить будет, стили поставить на свою ссылку, просто бывает такое что слетает, по дизайн не знаю и гадать как то странно, с какого сайта.
ucozmental
ucozmental 18.08.2016 19:133
0
Вообще не нравится, когда в горизонтальное меню просьбу ставят на переводы, думаю там это лишнее, только портит сам дизайн, но хорошо, что все можно сделать как тебе нужно.
Сафрон
Сафрон 19.08.2016 01:425
0
Так ставят не для одного пользователя, это файл, а вы там уже как хотите его вертите и где хотите.
Brung
Brung 19.08.2016 01:414
0
Что такой сам скрипт большой, всегда казалось, что стиле больше. biggrin
JoniDen
JoniDen 19.08.2016 11:466
0
Можешь его в CSS файл засунуть, добавить на сайт и передать ссылкой этот CSS файл.
Kosten
Kosten 19.08.2016 13:467
0
Можно и так, на выбор сделать.
avatar