Красивое меню для сайта uCoz
Не плохое горизонтальное меню, подойдет для многих сайтов. Как видим, горизонтальное меню в темных тонах, так что лучше ставить, на темные интернет ресурсы. Также можно поставить на любую тематику, просто по своей стилистике оно сделано красиво и не относится не к одной теме, так где хорошо будет смотреться, то устанавливаем. Установка: Верхняя часть сайта: Код <div id="menu"> <ul id="navigation"> <li><a href="#" title="Главная">Главная</a></li> <li><a href="#" title="Новости">Новости</a><ul><li><a href="#" title="Обновления игры">Обновления игры</a></li></ul></li> <li><a href="#" title="Обучение">Обучение</a> <ul> <li><a href="#" title="Новичкам">Новичкам</a></li> <li><a href="#" title="Интересные секреты">Интересные секреты</a></li> </ul> </li> <li><a href="#" title="Видео">Видео</a><ul><li><a href="#" title="Воды">Воды (записи стримов)</a></li><li><a href="#" title="Интервью">Интервью</a></li></ul></li> <li><a href="#" title="Скачать">Скачать</a> <ul> <li><a href="#" title="Комиксы">Комиксы</a></li> </ul> </li> <li><a href="#" title="Герои">Герои</a></li> <li><a href="#" title="Предметы">Предметы</a></li> <li><a href="#" title="Гайды по героям">Гайды</a></li> <li><a href="#" title="Форум">Галерея</a></li> <li><a href="#" title="Форум">Форум</a></li> <div class="clear"></div> </ul> </div> Css: Код /*-----------------------*/ .clear { clear: both; } #menu { width: 100%; float: left; position: relative; margin: 50px 0 0 0; padding:0 } #navigation { list-style: none; padding: 0; margin: 0; background: #111; } #navigation li { float: left; font-family: PT Sans,sans-serif; font-size:14px; } #navigation li:hover { background: #222; } #navigation li:first-child { -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 0 0 5px; } #navigation li a { display: block; padding: 0 20px; text-decoration: none; line-height: 40px; color: #fff; } #navigation ul { display: none; position: absolute; list-style: none; margin-left: -3px; padding: 0; overflow: hidden; } #navigation ul li { float: none; } #navigation li:hover > ul { display: block; background: #222; border: solid 3px #fff; border-top: 0; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25); } #navigation li:hover > ul li:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } #navigation li li a:hover { background: #000; } #navigation ul li:last-child a, #navigation ul li:last-child a:hover { -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } /*-----------------------*/ (rip Бармен) - он же JoniDen. |
Поделиться в социальных сетях
Материал разместил
Комментарии: 5 | |
| |