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

Красивое горизонтальное меню VEBDAV для ucoz

Если дизайн белый, то это не факт, что он подойдет на темный и это доказывает Красивое горизонтальное меню VEBDAV для ucoz где навигация на нем очень большая. Так как имеет и вы можете выставить, каждой категорий свои рубрики, что для пользователя или гостя сайта, будет очень удобно. Как можете заметить, что у кода по стилям нет углов, это большинство идут в такой форме, возможно подходит к формату конструктора хорошо. Оттенок цвета вы можете сменить в css, там не сложно, просто найдите свою гамму в цифровой последовательности и поменяйте.

Код:

Код

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


  </ul>
  </nav>

CSS:

Код

*{
  margin: 0;
  padding:0;
}

  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  font-size:0.8em;
}
nav {
  text-align: center;
  margin: 20px 0;
}
nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
  padding: 0 20px;
  border-radius: 7px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: ""; clear: both; display: block;
  }
nav ul li {
  float: left;
}
nav ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
  }
nav ul li:hover a {
  color: #fff;
  }
nav ul li a {
  display: block; padding: 15px 30px;
  color: #757575; text-decoration: none;
  }
nav ul ul {
  background: #5f6975; border-radius: 0px; padding: 0;
  position: absolute; top: 100%;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
  }
nav ul ul li a {
  padding: 15px 30px;
  color: #fff;
  }
nav ul ul li a:hover {
  background: #4b545f;
  }
nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

Источник: http://ruseller.com/

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

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

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

Kosten

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