вРазные полезности

Темное горизонтальное меню PuBle на CSS для uCoz

 
Этот скрипт в меню ходит давно и показывает его в стилях не очень чисто в плане, есть лишний. И после того как разобрав Темное горизонтальное меню PuBle на CSS для uCoz и сделав демонстрацию, что можете посмотреть, теперь можно устанавливать. В первые вижу такой эффект у него, но прогибающие это скажем у всех есть и это не исключение, здесь просто наводишь получаешь один цвет вверху а когда делаешь клик, то появляется зеленый оттенок, только уже в низу. Теперь давайте разберем по быстрому его, чтоб было понятно как его настроить.

Первое, вы его можете настраивать в ширину как вам нужно или под каркас ресурса и за это отвечает width:1035px;, если вам просто нужна во весь экран монитора ширина, то убираем эти цифры и прописываем avto и оно автоматически найдет свое место. Но как можно заметить, что оно узкое и к примеру под блог или фиксированную ширину подойдет в этом случай отлично впишется. Можно также поменять цветовую гамму которая будет появятся при переходе на раздел который пропишите, но здесь только фотошоп вам поможет, CSS за это не отвечает, так как идут файлами.

Код:

Код
<div id=»menu»>
<ul>
  <li><a href=»#»>zornet 1</a></li>
  <li><a href=»http://zornet.ru/»>Сайт ZoRnet</a></li>
  <li><a href=»#»>zornet 3</a></li>
  <li><a href=»#»>zornet 4</a></li>
  <li><a href=»#»>zornet 5</a></li>
  <li><a href=»#»>zornet 6</a></li>
</ul>
</div>

CSS:

Код
*
  margin: 0 auto;
  padding: 0 auto;
  outline: 0;

html
  background: #fff;

body
  width:1035px;
  color: #555;
  font: .84em/1.42 Tahoma, Arial, Helvetica, sans-serif;

/* ?aai?ay ?anou */
#menu ul
  border-bottom: 1px solid #121314;
  border-top: 1px solid #2b2e30;
  background: #fff repeat-x url(http://zornet.ru/CSS-ZORNET/Skript/zr/menuul.png);
  height:35px;
  list-style-type: none;

#menu ul li
  float:left;

#menu ul li a
  font-size:12px;
  display: block;
  background: no-repeat url(http://zornet.ru/CSS-ZORNET/Skript/zr/li.png);
  height:35px;
  padding: 8px 10px 0px 10px;
  text-decoration:none;
  color:#d4d4d4;
  font-family: Arial, serif;
  font-weight: 400;

#menu ul li a:hover
  background: no-repeat url(http://zornet.ru/CSS-ZORNET/Skript/zr/lihover.png);
  color:#dfdfdf;

#menu ul li a:active
  background: no-repeat url(http://zornet.ru/CSS-ZORNET/Skript/zr/liactiv.png);
  color:#dddddd;

.ctr
  clear: both;

Теперь можно посмотреть эту навигацию в реале.

источник: zornet.ru

Похожие посты