ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Темное горизонтальное меню PuBle на CSS для uCoz

Темное горизонтальное меню 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;
}

/* ðàáî÷àÿ ÷àñòü */
#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;
}

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

08 Июля 2015 Просмотров: 2108 Комментариев: (3)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 3
Порядок вывода комментариев: Canon 05 Сентября 2015 20:55¹ 0 Вот простое горизонтальное меню, не каких прогибов и теней, а просто навел и тебе показали что правильно. Kosten 05 Сентября 2015 21:12² 0 Иногда простое не значит, что по установке будет также прост, но это меню исклюючение. Canon 06 Сентября 2015 03:11³ 0 Сейчас просто делают не как раньше, что много всяких плюшек и значит мой сайт крутой. А оказалось, что все эти плюшки на мобильный телефон не адаптированные и вот приходиться снимать и делать лицо по проще, чтоб люди потянулись.