Зеленое горизонтальное меню фиксация для uCoz
 | |
| Сейчас все больше замечаешь очень редкую гамму сайта, и вот под нее Зеленое горизонтальное меню фиксаций для uCoz под тематический сайт. Первое что бросается, это тема безопасности nod, но по дизайну выполнено обширно в плане, какая основная тематика у вас на ресурсе. Стильно нарисовано и сверстано под игровой портал, но это не важно, так как смотря на его, можно предположить и поставить совершенно на другую тему. В плане эффекта, здесь оригинально все, не так как обычно, что наводишь и рубрика меняет цвет. Тут 2 полосы в форме стрелок по обоим сторонам, вверх и низ и они появляются там, куда навели. И как можно заметить, вы прописали название и под каждым в низу есть немного светлого оттенка, и вот когда производите клик, он исчезает. Пока на резиновый каркас здесь не предусмотрено, а так можете покрасить 4 файла и будет подходить как вам нужно. Каркас: Код <ul class="menu"> <li><a class="first" href="http://zornet.ru/">Главная</a></li> <li><a href="/">Скрипты uCoz</a></li> <li><a href="/">ZORNET.RU</a></li> <li><a href="/">Блог uCoz</a></li> <li><a href="/">Шаблоны сайта uCoz</a></li> <li><a href="/">Все для сайта</a></li> <li><a href="/">Дизайн сайта uCoz</a></li> <li><a href="/">Связь админа</a></li> </ul> CSS: Код ul.menu {list-style:none;padding:0;margin:0;width:1041px;height:36px;line-height:300%;font-weight:600;background:url('http://zornet.ru/CSS-ZORNET/ZER-1/ZR/back.jpg');font-size:12px; font-family:Tahoma; } ul.menu li {float:left;position:relative;height:36px;background:url('http://zornet.ru/CSS-ZORNET/ZER-1/ZR/separator.png') top right no-repeat;} ul.menu li a {background:url('http://zornet.ru/CSS-ZORNET/ZER-1/ZR/href.png') top center no-repeat;color:#F0FF96;text-decoration:none;display:block;height:36px;padding:0 11px;margin-right:3px;overflow:hidden;text-shadow:0 1px 1px #000;} ul.menu li a.first {background:none;} ul.menu li a:hover {background:url('http://zornet.ru/CSS-ZORNET/ZER-1/ZR/hover.png') top center no-repeat;}  Если вам нужен синея навигация, то здесь можете посмотреть. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
