Красивое 3D меню горизонтальное для сайта ucoz
 | |
| Это тот материал скрипта Красивое 3D меню горизонтальное для сайта ucoz, где стили являются основным, так как при нажатие раздел который вы написали двигается. Есть которые при клике, когда наведешь, здесь когда только хочешь перейти. Как видите оно не сильно темное, и что характерно, подойдет на антологичный оттенок и на светлом, также смотреться будет красиво. Немного код поправил и теперь где картинка домик, написано главная страница. Когда кто то зайдет на сайт, то один раздел будет уже включен, это можно написать самый основной. И так он будет всегда, даже если вы будете клик делать на другой. Одно только не разобрал, это когда добавляешь другие рубрики, то оно становиться в 2 ряда. Это означает, вы можете только назначенное количество написать на нем. Также присутствует зеленый цвет на буквах, что можно поменять. Установка: Код: Код <section class="container"> <nav> <ul class="nav"> <li><a href="http://zornet.ru" 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="#" title="О нас">О нас</a></li> <li><a href="#" title="Блог">Блог</a></li> <li><a href="#" title="Контакты">Контакты</a></li> </ul> </nav> </section> CSS: Код .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: #ccc; text-shadow: 0 1px rgba(0, 0, 0, 0.9); background-color: rgba(0, 0, 0, 0.05); border: 1px solid #232428; border-bottom-color: #1f2326; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)); -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px #262a2e, 0 3px #1f2326, 0 4px 3px rgba(0, 0, 0, 0.2); } .nav > li:hover { color: #b0d157; text-shadow: 0 1px black, 0 0 20px rgba(255, 255, 255, 0.5); } .nav > li.active, .nav > .active:active, .nav > li:active { z-index: 2; margin: 4px 0 0; height: 43px; color: #aaa; text-shadow: 0 1px black; background-color: rgba(255, 255, 255, 0.03); border-color: #212425; border-width: 1px 0; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15), 1px 0 rgba(0, 0, 0, 0.05), -1px 0 rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.05); } .nav > li:active { z-index: 3; } .nav > li:first-child { border-left-width: 1px !important; border-left-color: #212425; border-radius: 5px 0 0 5px; } .nav > li:last-child { border-right-width: 1px !important; border-right-color: #212425; 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; line-height: 44px; padding: 0 20px; font-size: 12px; font-weight: bold; color: inherit; text-decoration: none; outline: 0; } .nav .nav-icon { padding: 0 15px; } [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; }  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
