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

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

Красивое игровое меню проекта для uCoz-еще одно привлекательное меню в синем цвете и раздвижными блоками.Такое меню хорошо пойдет сайтам с игровой тематикой,а именно сайтам кланам.По-моему это меню принадлежало сайту на тему WarFace и шрифт схожи,но не в этом суть,кому понравилось и есть куда прилепить это меню берите и наслаждайтесь

Установка:В верхней части сайта прописываем код

Код
<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;  
  }
Красивое игровое меню проекта для uCoz
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: Turbo
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar