Красивое игровое меню проекта для 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. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 7 | |
| |