Светлое горизонтальное меню VARGET для ucoz
 | |
| На сайте я уже залил такое же горизонтальное меню, только в темных тонах. Теперь очередь дошла до светлого тона, что также характерно и красиво будет смотреться на любом ресурсе и тематика здесь очень большая. Сами стили немного переделал, так как оно было по размерам фиксированное и лишний раздел съезжал вниз. Теперь вы можете прописывать сколько угодно категорий, и все будет отлично. Главная страница, уже будет нажата и всегда в таком положение будет. Вы когда произведете клик, то увидите красивый эффект прогибающие, что можете посмотреть. Установка: Код <section class="container"> <nav> <ul class="nav"> <li><a href="#" class="nav-icon" title="Главная"><span class="icon-home"></span> Главная</a></li> <li class="active"><a href="#" title="Продукты">ZORNET.RU</a></li> <li><a href="#" title="Поддержка">Поддержка</a></li> <li><a href="#" title="Обучение">Обучение</a></li> <li><a href="http://zornet.ru/load/skripty/skripty_dlja_ucoz/81" title="Скрипты">Скрипты для ucoz</a></li> <li><a href="http://zornet.ru/load/skripty/skripty_dlja_ucoz/81" title="О нас">Скрипты для ucoz</a></li> <li><a href="#" title="Контакты">Контакты</a></li> </ul> </nav> </section> CSS: Код ol, ul { list-style: none; } .container { margin: 100px auto; width: 100%; text-align: center; } .nav { height: 48px; display: inline-block; } .nav > li, .nav:active > .active { float: left; position: relative; margin: 0 0 4px; height: 44px; color: #000000; text-shadow: 0 1px white; background-color: rgba(0, 0, 0, 0.05); border: 1px solid; border-color: #cfcfcf #d6d6d6 #c8c8c8; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.25)); -webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px #dadada, 0 3px #c4c4c4, 0 4px 3px rgba(0, 0, 0, 0.1); } .nav > li:hover { color: #539f07; text-shadow: 0 1px white, 0 0 20px white; } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #404040; background: transparent; border-color: #ccc; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.05), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.4); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #c6c6c6; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #c6c6c6; border-radius: 0 5px 5px 0; } .nav > li + li, .nav:active > .active + li, .nav:active > li + .active { border-left-width: 0; } .nav > .active + li, .nav > .active:active + li, .nav > li:active + li, .nav > li:active + .active { border-left-width: 1px; } .nav > li > a { display: block; position: relative; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } .nav > li > a:before { content: attr(title); position: absolute; top: 1px; left: 20px; color: rgba(255, 255, 255, 0.4); text-shadow: none; } .nav .nav-icon { padding: 0 15px; } .nav .nav-icon:before { display: none; } [class*="icon-"] { display: inline-block; width: 16px; height: 16px; vertical-align: text-top; background-image: url("http://zornet.ru/CSS-ZORNET/gerav/refad/faren/icons.png"); background-repeat: no-repeat; background-color: transparent; font: 0/0 serif; text-shadow: none; color: transparent; } .icon-home { background-position: 0 0; }  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
