» »

Темное горизонтальное меню 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.07.2015 Просмотров: 584 Комментарий: (3)

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

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

Комментарий: 3
Canon
Canon 05.09.2015 20:551
0
Вот простое горизонтальное меню, не каких прогибов и теней, а просто навел и тебе показали что правильно.
Kosten
Kosten 05.09.2015 21:122
0
Иногда простое не значит, что по установке будет также прост, но это меню исклюючение.
Canon
Canon 06.09.2015 03:113
0
Сейчас просто делают не как раньше, что много всяких плюшек и значит мой сайт крутой. А оказалось, что все эти плюшки на мобильный телефон не адаптированные и вот приходиться снимать и делать лицо по проще, чтоб люди потянулись.
avatar