» »

Зеленое горизонтальное меню фиксация для uCoz


Зеленое горизонтальное меню фиксация для 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;}




Если вам нужен синея навигация, то здесь можете посмотреть.
29.05.2015 Просмотров: 472 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 29.05.2015 20:061
0
Хочу повториться, меню не резиновое и только на фиксированные сайты. А так понимаете их множество.
avatar