Горизонтальное меню онлайн проекта на uCoz
Отличное горизонтальное меню, специально для онлайн проекта. Как видим, горизонтальное меню в нескольких тонах и можно поставить, как на темные так и на светлые ресурсы. Данное меню, сделано под игровую онлайн тематику. Что по тематике, то его можно установить на многие темы, тут главное, чтоб дизайн подходил, под светлый должно смотреться. Верхняя часть сайта: Код <div id="block-menu-primary-links" class="block block-menu"> <ul class="menu"><li class="expanded first even" id="menu69df1f85b0abbce850b5feb29bddcb2a"><a href="#">Новости</a><ul class="menu"> <li class="leaf first even" id="menu7d690f61b8202ec6d12208bb02417ecd"><a href="#" title="">Новости игры</a></li> <li class="expanded last odd" id="menu222de3e53064abcb73b5a826d4150d2c"><a href="#" title="">Обновления</a><ul class="menu"> <li class="leaf first odd" id="menuca2e6c1a2b0c78b0eee418b5465dd6d6"><a href="#" title="">27 марта 2014</a></li> <li class="leaf even" id="menufbdf1c26fa083c45a3e2660af7fc578e"><a href="#" title="">29 апреля 2014</a></li> <li class="leaf odd" id="menu15444443162fe378d3cf6cdc6d4d65ff"><a href="#" title="">29 мая 2014</a></li> <li class="leaf even" id="menu31cf06a440df3c378e2e25e6962700d4"><a href="#" title="">26 июня 2014</a></li> <li class="leaf odd" id="menu30ebd19e092faf251f03e82225756e19"><a href="#" title="">24 июля 2014</a></li> <li class="leaf even" id="menu2647f1ada008be9d7178352863dd16cf"><a href="#" title="">28 августа 2014</a></li> <li class="leaf odd" id="menu191bb70d07cf78551839d840aaf4e41f"><a href="#" title="">16 октября 2014</a></li> <li class="leaf even" id="menu1c174b8dfb1bfd6d345afe5715da4c77"><a href="#" title="">18 декабря 2014</a></li> <li class="leaf odd" id="menu54033c17dbd49a67c976a92765a5c31b"><a href="#" title="">05 февраля 2015</a></li> <li class="leaf even" id="menuff753a936cb2f20ab12ab770f32b07c8"><a href="#" title="">16 апреля 2015</a></li> <li class="leaf odd" id="menu30af99c6cf21d272aafb21bd053a3160"><a href="#" title="">28 мая 2015</a></li> <li class="leaf even" id="menu26794cb7cbe8c4da10b5359576c9b3b7"><a href="#" title="">7 сентября 2015</a></li> <li class="leaf odd" id="menu032c8b38379180a24b508d98b9fa255d"><a href="#" title="">10 декабря 2015</a></li> <li class="leaf last even" id="menu50df7b93fd6626dfe928d8f33157f604"><a href="#" title="">28 апреля 2016</a></li> </ul></li> </ul></li> <li class="expanded odd" id="menuacf664b247822ae00651a97d44f5f4c0"><a href="#" title="">Об игре</a><ul class="menu"> <li class="leaf first odd" id="menuda75cd652254fce37e953d7f261f132d"><a href="#" title="FAQ">FAQ</a></li> <li class="expanded odd" id="menuedfc1c07a0b15d92b19b928cc52bf487"><a href="#" title="">Для новичков</a><ul class="menu"> <li class="leaf first even" id="menua491fa74c412860121c0402e01043382"><a href="#" title="">Безопасность аккаунта</a></li> <li class="leaf odd" id="menu1278b83177d9874f853b1341e8ea30f6"><a href="#" title="">Скачивание клиента</a></li> <li class="leaf even" id="menu3f9740f0f68682f215e919987d2f555a"><a href="#" title="">Правила игры</a></li> <li class="leaf odd" id="menu325057c8bf83687cc2a99cdaf3d76afc"><a href="#" title="">Управление персонажем</a></li> <li class="leaf last even" id="menua971f974109fa7f0181e294cd8f05b67"><a href="#" title="">Экран персонажа</a></li> </ul></li> <li class="leaf even" id="menuadae7f57b4314c988f368fa5ca731d16"><a href="#" title="">Расы</a></li> <li class="leaf odd" id="menu4969e2f5c9ca1753c12f9a37ce7b7aa3"><a href="#" title="">Классы</a></li> <li class="expanded odd" id="menu06cf59df76d6918a79c10ada754f4531"><a href="#" title="">Профессии</a><ul class="menu"> <li class="leaf first even" id="menua934e402e796b38cd8a4bbd5492f4abd"><a href="#" title="">Алхимия и кулинария</a></li> <li class="leaf odd" id="menu25c909ab2d294ec52bdf5aaca6bcf34d"><a href="#" title="">Горное дело и обработка камня</a></li> <li class="leaf even" id="menu74b7783d08779ed1e1ffa889cc968312"><a href="#" title="">Доспехи</a></li> <li class="leaf odd" id="menu561f22605ae6a050395fc6708c9f255a"><a href="#" title="">Заготовка и обработка древесины</a></li> <li class="leaf even" id="menu004fdd72a0771b6ca33927af91189411"><a href="#" title="">Оружие</a></li> <li class="leaf odd" id="menud8f7167bfbf064cd96082effd86018f0"><a href="#" title="">Подводная ферма</a></li> <li class="leaf even" id="menu060908e02baa47aadd07778589d575eb"><a href="#" title="">Ремесло декоратора</a></li> <li class="leaf odd" id="menuc0f4cfd647415d536cbddafb72d2c092"><a href="#" title="">Рыбная ловля</a></li> <li class="leaf even" id="menuec66047b48d2703f8aa2bdf8edf1a484"><a href="#" title="">Создание музыки</a></li> <li class="leaf odd" id="menu775c1a051552a0c54598c75fd3241fe9"><a href="#" title="">Торговые перевозки</a></li> <li class="leaf last even" id="menu70870288f19bc2cef284c3e401c60c2c"><a href="#" title="">Фермерство</a></li> </ul></li> <li class="expanded odd" id="menud81d2324fce5918da1183d427d81e3bf"><a href="#" title="">PvP</a><ul class="menu"> <li class="leaf first even" id="menu04f29a51bb4532fdf380dd6332e6ad24"><a href="#" title="">PvP-система</a></li> <li class="leaf odd" id="menu9376c99aa6f73187ec615fbac73049f6"><a href="#" title="">Битва за Даскшир</a></li> <li class="leaf even" id="menu72084e7b22d63dee725f50623e2d9e59"><a href="#" title="">Гладиаторская арена</a></li> <li class="leaf odd" id="menuca98b5cf775dabfe439bac92066d89aa"><a href="#" title="">Осады</a></li> <li class="leaf last even" id="menucf182c7ffd705fee1d8eb1677a696a05"><a href="#" title="">Старая крепость</a></li> </ul></li> <li class="expanded even" id="menub8a6d884b408cc2feeda36a6732d0fe4"><a href="#" title="">Особенности игры</a><ul class="menu"> <li class="leaf first even" id="menu81b8833855b470d391e89e3d00c67cdf"><a href="#" title="">Глайдеры</a></li> <li class="leaf odd" id="menu4a77f833c65f21a04801f94085ceaaaf"><a href="#" title="">Дома</a></li> <li class="leaf even" id="menud87c1127f3aa80d3efd21bbf14d795e1"><a href="#" title="">Корабли</a></li> <li class="leaf odd" id="menuc5797e3acbbd0a37eb4d1b32328e3b62"><a href="#" title="">Мираж</a></li> <li class="leaf even" id="menubc5c0f61afc0840d618b5fe1096ce80c"><a href="#" title="">Монстры и рейды</a></li> <li class="leaf odd" id="menu8d33f2760a92b1bfbe71c8fdd09ff257"><a href="#" title="">Пиратство</a></li> <li class="leaf even" id="menu96b0a4db112a78c797bcbb3de22089dd"><a href="#" title="">Питомцы</a></li> <li class="leaf odd" id="menu3ba616ccf88282895a37179beefc0738"><a href="#" title="">Союзы наций</a></li> <li class="leaf even" id="menu6dce40499890fe92438f282f3f4bd9c4"><a href="#" title="">Северный континент</a></li> <li class="leaf odd" id="menu32a526cd94c789ce12b598dc261c8fa5"><a href="#" title="">Скакуны</a></li> <li class="leaf even" id="menu573e5895c592b2a6b76bf61ae21478ae"><a href="#" title="">Создание логотипа</a></li> <li class="leaf odd" id="menucd39bdc8449848c1ec77fdbc4db9624d"><a href="#" title="">Средства передвижения</a></li> <li class="leaf even" id="menu0c73388108f335d6d9586d7b2018ac5a"><a href="#" title="">Суд</a></li> <li class="leaf last odd" id="menu49617eddd23f2451593063a10ea80dca"><a href="#" title="">Яркие персонажи</a></li> </ul></li> <li class="expanded odd" id="menu088422bc453b477c2536d78c9740b543"><a href="#" title="">Локации</a><ul class="menu"> <li class="expanded first even" id="menua00834d85fb295a00d956b5a8542aace"><a href="#" title="">Моря и острова</a> <ul class="menu"><li class="leaf first odd" id="menud6f0fd2efad52327fad334d052763c5f"><a href="#" title="">Бухта висельников</a></li> <li class="leaf even" id="menu5f2a76ad2a299da4e7063039b0ac7b90"><a href="#" title="">Изначальный материк</a></li> <li class="leaf last odd" id="menu06fa291ecd617aa79d5259960163b8dd"><a href="#" title="">Инистер</a></li> </ul></li> <li class="expanded even" id="menudd715e6fada81351d862cb44fade06d5"><a href="#" title="">Восточный континент</a><ul class="menu"> <li class="leaf first odd" id="menu3cdfc9c5ee57171a7a23344e67020fc1"><a href="#" title="">Безмолвное озеро</a></li> <li class="leaf even" id="menud4e76a72c8fcfe61912285a4dd94f303"><a href="#" title="">Белоснежная бухта</a></li> <li class="leaf odd" id="menu78ac70d6c4f6b5249367584705f72624"><a href="#" title="">Золотой сад</a></li> <li class="leaf even" id="menu555d8994b5c896179452c4ff518c4719"><a href="#" title="">Каор-Норд</a></li> <li class="leaf odd" id="menua778919889283ff51cb14d969f8ffa68"><a href="#" title="">Махадеби</a></li> <li class="leaf even" id="menu3d65e79b6eea7ed3b4050e51ea0b092f"><a href="#" title="">Порт Лютни</a></li> <li class="leaf odd" id="menude1116e87c61795e0463967dd96f5ed8"><a href="#" title="">Свалка и Кристальное озеро</a></li> <li class="leaf even" id="menu15b1cf0dd7ee6c54cdd80697e54091c0"><a href="#" title="">Тигриный хребет</a></li> <li class="leaf last odd" id="menua8f391adc412c6d4de6bc59a55892eed"><a href="#" title="">Холмы Тихих Песен</a></li> </ul></li> <li class="expanded last even" id="menu555c4fbb7452fa3e4b006f94f4eb263e"><a href="#" title="">Западный континент</a><ul class="menu"> <li class="leaf first odd" id="menu4593dcfc301dfeb7f8b189fbafc755ec"><a href="#" title="">Белый лес</a></li> <li class="leaf even" id="menu72ca69432774b1c0647f6cde5ab42b78"><a href="#" title="">Виндилоу</a></li> <li class="leaf odd" id="menu394eb23605a86fe6c8e56124e73ee702"><a href="#" title="">Заболоченные низины</a></li> <li class="leaf even" id="menu296eeb123b8261eadaf4f18e8e8745dd"><a href="#" title="">Земля Говорящих Камней</a></li> <li class="leaf odd" id="menu96c9067e3534b7f8fd6c1fd264272c13"><a href="#" title="">Крепость Ронвен</a></li> <li class="leaf even" id="menu77a0c592600d40b637d3127aa9dc478c"><a href="#" title="">Лес Гвинедар</a></li> <li class="leaf odd" id="menu2d94eec223292f2bbe2f366869cfd2e0"><a href="#" title="">Маренлоу</a></li> <li class="leaf even" id="menu146583caf845ef34a4d05081f855eca0"><a href="#" title="">Порт-Аргенто</a></li> <li class="leaf odd" id="menuf837ead16b1169d0d7886feba49b9834"><a href="#" title="">Руины Салема</a></li> <li class="leaf even" id="menu626b8cd326af3c5bb81eccbdd61d924c"><a href="#" title="">Стоунхольд</a></li> <li class="leaf last odd" id="menu6f527d4e4676e5be08aa12df98ce6c58"><a href="#" title="">Хоупфорд</a></li> </ul></li> </ul></li> <li class="expanded last even" id="menuca272ffe9d83561333d1a5da94586bd6"><a href="#" title="">История мира</a><ul class="menu"> <li class="leaf first even" id="menu50a243ab7edae44b116147f50269f7eb"><a href="#" title="">Аранзеб</a></li> <li class="leaf odd" id="menu05a0f29abb224f242b165dc426305ea4"><a href="#" title="">Аранзебия</a></li> <li class="leaf even" id="menufb45caadd0c621ac6d3d2cf9d7e47434"><a href="#" title="">Джин</a></li> <li class="leaf odd" id="menu33c4b99f3d2ef93a8c0f3774502bb5d7"><a href="#" title="">Инох</a></li> <li class="leaf even" id="menu8a173651609cc7aea3c80024455026d8"><a href="#" title="">Кипроза</a></li> <li class="leaf last odd" id="menu740ede45db9c1d705a1ad7cd1f762a7b"><a href="#" title="">Мелисара</a></li> </ul></li> </ul></li> <li class="expanded even" id="menuc24797c4abfb4ebe54dc45b9e411ac3a"><a href="#">Медиа</a><ul class="menu"> <li class="leaf first even" id="menuea74c049a03543f25af7ed274c857e18"><a href="#" title="">Партнерская программа для блогеров</a></li> <li class="leaf odd" id="menua0959731ad7bd64d907b100cf28c5775"><a href="#">Видео</a></li> <li class="leaf even" id="menua56ba692aad2479bfa5f088aa17dbbc4"><a href="#">Скриншоты</a></li> <li class="leaf last odd" id="menuf64f457326d92c412371753eb211a65c"><a href="#" title="">Обои</a></li> </ul></li> <li class="expanded odd" id="menu3e5d53ad868231660799b4c559ea5211"><a href="#" title="">Общение</a><ul class="menu"> <li class="leaf first odd" id="menu67b67f0bad308311c5a6f1d33df1fc17"><a href="#" title="">Форум</a></li> <li class="leaf last even" id="menuea2516f035d007d556e0cf355a9d6013"><a href="#" title="Социальные сети">Социальные сети</a></li> </ul></li> <li class="expanded even" id="menu74846c1f5c480ef0e34aabcd1a88f02c"><a href="#" title="">Сервисы</a><ul class="menu"> <li class="leaf first even" id="menu5e552ba8f8487aa6432a31afa88f47b6"><a href="#" title="">База знаний</a></li> <li class="leaf odd" id="menue2770ab4f2119bd41a809a2c9030ae6c"><a href="#" title="">Калькулятор умений</a></li> <li class="leaf even" id="menuca98b5cf775dabfe439bac92066d89aa"><a href="#" title="">Осады</a></li> <li class="leaf odd" id="menu72a48781688afc2329703347b0247bbe"><a href="#" title="">Статус серверов</a></li> <li class="leaf even" id="menu93cb87d0cd0d7354aa79f34ffe61bfc4"><a href="#/" title="">Герои союзов</a></li> <li class="leaf odd" id="menu3a156ec9f0e2c82f30801c2901021b5c"><a href="#" title="">Трансфер</a></li> <li class="leaf even" id="menu6fce668453b56de7e64095d56f2f89c1"><a href="#" title="">Восстановление предметов</a></li> <li class="leaf last odd" id="menu9d1b8d3cf0c1bf454e0f8df9df8330cf"><a href="#" title="">Большой марафон</a></li> </ul></li> <li class="leaf odd" id="menu5dad7b0a025be1b1dd97ed9bae68e48b"><a href="#" title="">Скачать</a></li> <li class="expanded even" id="menu662448730e42616d253de473ba48fc61"><a href="#" title="Поддержка">Поддержка</a><ul class="menu"> <li class="leaf first even" id="menu69fd05ed84cce7998b0571caecf87b3a"><a href="#" title="">Техническая поддержка</a></li> <li class="expanded last odd" id="menu6d8365a5856fcd224e28b1a84f008071"><a href="#" title="">Документы</a><ul class="menu"> <li class="leaf first odd" id="menu2e3ba04a10f608b2b87f64108cce7c79"><a href="#" title="">Лицензионное соглашение</a></li> <li class="leaf even" id="menu215298953c96fb2a7696b1b33b6ccd84"><a href="#" title="">Правила Игры</a></li> <li class="leaf odd" id="menudaaa033c11bfdc215945ddbfd27aa423"><a href="#" title="">Правила Форума</a></li> <li class="leaf last even" id="menu6c36bc6191531428262480ca2b01a784"><a href="#" title="">Штрафные Санкции</a></li> </ul></li> </ul></li> <li class="expanded last odd" id="menua46c372347e02010f5ef45fe441e4349"><a href="#" title="">Профиль</a><ul class="menu"> <li class="leaf first odd" id="menu1794c6768d344befe141546664415862"><a href="#" title="">Личный кабинет</a></li> <li class="leaf even" id="menu5e4fca693932050c609ab26b0cbd11c3"><a href="#" title="">Корзина предметов</a></li> <li class="leaf odd" id="menu943868077fe075c3564d1a5f0d652d70"><a href="#" title="">Активация PIN-кода</a></li> <li class="leaf even" id="menu0f7ef45a6478ef6aa87af9eb9952f101"><a href="#" title="">Пополнить счет</a></li> <li class="leaf odd" id="menu6161615a4ab946bb3cb316b504819830"><a href="#" title="">Юзербары</a></li> <li class="leaf even" id="menu412d7f7ce50b3d656edce212b5a8962e"><a href="#" title="">История покупок в магазине</a></li> <li class="leaf odd" id="menub45d2e4da07e5c8232766240594c29fe"><a href="#" title="">История премиум-подписки</a></li> <li class="leaf last even" id="menua2c753a3691a87ba93a2036ff9ca9821"><a href="#" title="">История пополнения счета</a></li> </ul></li> </ul> </div> </div> </div> Css: Код /* Primary menu */ #block-menu-primary-links { width: 1150px; position: absolute; z-index: 20; } #block-menu-primary-links > ul.menu { margin: 10px 0px 0px 200px; padding: 0px; position: relative; z-index: 20; } #block-menu-primary-links > ul.menu > li { float: left; padding: 0px 18px 0px 0px; list-style: none; } #block-menu-primary-links > ul.menu > li > a { color: #40231b; font: 21px "Cambria", Georgia, "Times New Roman", Times, serif; text-decoration: none; text-shadow: 1px 0px 1px #999999; } #block-menu-primary-links > ul.menu > li > a:hover { color: #4f7730; text-shadow: 1px 0px 1px #8ebc6a; } #block-menu-primary-links > ul.menu > li.expanded > a { padding-right: 13px; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/0211313001475504393.png) right 13px no-repeat; } #block-menu-primary-links > ul.menu > li.expanded > a:hover { background-position: right -87px; } /* Secondary menu */ #block-menu-primary-links > .menu > li > .menu { display: none; position: absolute; margin-left: -11px; padding: 0px 0px 4px 0px; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/0073563001475504404.png) left top repeat-x; border-bottom-right-radius: 6px; z-index: 12; } #block-menu-primary-links > .menu > li:hover > .menu { display: block; } #block-menu-primary-links > .menu > li > .menu:after { content: ''; width: 146px; height: 27px; display: block; position: absolute; margin: -5px 0px 0px -13px; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/0726298001475504416.png) left top no-repeat; z-index: 12; } #block-menu-primary-links > .menu > li > .menu > li { display: block; margin: 0px; padding: 0px; position: relative; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/14363799.png) 12px 0px no-repeat; white-space: nowrap; } #block-menu-primary-links > .menu > li > .menu > li:first-child { margin-top: 16px; background: none; } #block-menu-primary-links > .menu > li > .menu > li > a { display: block; margin: 0px; padding: 0px 20px 2px 12px; color: #fff; font: 16px/30px Cambria, Georgia, "Times New Roman", Times, serif; text-decoration: none; } #block-menu-primary-links > .menu > li > .menu > li > a:hover { text-shadow: 0px 0px 5px #ffc; } #block-menu-primary-links > .menu > li > .menu > li.expanded > a { background: url(http://zornet.ru/Ajaxoskrip/Abaveg/0794179001475504485.png) right 2px no-repeat; } #block-menu-primary-links > .menu > li > .menu > li.expanded > a:hover { background-position: right -28px; } /* Tertiary menu */ #block-menu-primary-links > .menu > li > .menu > li > .menu, #block-menu-primary-links > .menu > li > .menu > li > .menu > li > .menu { display: none; position: absolute; left: 100%; top: 0px; padding: 0px 0px 4px 0px; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/14363806.png) left top repeat; border-radius: 6px; z-index: 13; } #block-menu-primary-links > .menu > li > .menu > li:hover > .menu, #block-menu-primary-links > .menu > li > .menu > li > .menu > li:hover > .menu { display: block; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li, #block-menu-primary-links > .menu > li > .menu > li > .menu > li .menu > li { display: block; margin: 0px; padding: 0px; background: url(http://zornet.ru/Ajaxoskrip/Abaveg/14363809.png) 12px 0px no-repeat; white-space: nowrap; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li:first-child, #block-menu-primary-links > .menu > li > .menu > li > .menu > li > .menu > li:first-child { background: none; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li > a, #block-menu-primary-links > .menu > li > .menu > li > .menu > li > .menu > li > a { display: block; margin: 0px; padding: 0px 20px 2px 12px; color: #fff; font: 16px/30px Cambria, Georgia, "Times New Roman", Times, serif; text-decoration: none; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li > a:hover, #block-menu-primary-links > .menu > li > .menu > li > .menu > li > .menu > li > a:hover { text-shadow: 0px 0px 5px #ffc; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li.expanded > a { background: url(http://zornet.ru/Ajaxoskrip/Abaveg/0320984001475504543.png) right 2px no-repeat; } #block-menu-primary-links > .menu > li > .menu > li > .menu > li.expanded > a:hover { background-position: right -28px; } (rip Бармен) - он же JoniDen. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 16 | |
| |