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

Темное горизонтальное меню GERATEN для ucoz

При нажатие на категорию, которую вы пропишите, то будет в синей гамме она. Сразу хочу сказать, что я много убрал скрипта Темное горизонтальное меню GERATEN для ucoz и это были под категорий на каждой рубрике. Их можно было оставить, но реально так медленно они появлялись, что для сайта было бы большой минус, так как функциональность стоит на первом месте. Можете ставить на светлый фон и смотреться будет по дизайну красиво, в демонстраций я подобрал противоположный оттенок, что можете посмотреть. Так навигация по своим стилям простая и в тоже время оригинальная, что можно очень редко найти второй такой стиль.

Код:

Код

<ul id="nav">
  <li><a href="#">Главная</a></li>
  <li><a href="http://zornet.ru/">ZORNET.RU</a>
<li><a href="#">Скрипты для ucoz</a></li>
  <li><a href="#">Шаблоны сайта</a>
  <li><a href="#">Обратная связь</a></li>
  <li><a href="#">Форум сайта</a>
  <li><a href="#">О сайте</a></li>
</ul>

CSS:

Код

#nav {
  background: #e5e5e5;
  float: left;
  margin: 0; padding: 0;
  border: 1px solid black;
  border-bottom: none;
}

#nav li a, #nav li {
  float: left;
}

#nav li {
  list-style: none;
  position: relative;
}

#nav li a {
  padding: 1em 2em;
  text-decoration: none;
  color: white;
  background: #292929;
  background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
  border-right: 1px solid #3c3c3c;
  border-left: 1px solid #292929;
  border-bottom: 1px solid #232323;
  border-top: 1px solid #545454;
}

#nav li a:hover {
  background: #2a0d65;
  background: -moz-linear-gradient(top, #11032e, #2a0d65);
  background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}

/* Submenu */

.hasChildren {
  position: absolute;
  width: 5px; height: 5px;
  background: black;
  right : 0;
  bottom: 0;
}

#nav li ul {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  padding: 0; margin: 0;
}

#nav li:hover > ul {
  display: block;
}

#nav li ul li, #nav li ul li a {
  float: none;
}

#nav li ul li {
  _display: inline; /* for IE6 */
}

#nav li ul li a {
  width: 150px;
  display: block;
}

/* SUBSUB Menu */

#nav li ul li ul {
  display: none;
}

#nav li ul li:hover ul {
  left: 100%;
  top: 0;
}

#nav li ul

11 Апреля 2015 Просмотров: 1340 Комментариев: (0)

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

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

Kosten

Комментарии: 0