ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальное меню сайта Vtgas при помощи CSS

Горизонтальное меню сайта Vtgas при помощи CSS

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

Не говоря уже о том, что они автоматически изменяют размер до идеального соответствия независимо от размера вашего браузера.
В основном я рекомендую этот тип навигации для страницы продаж или простого сайта для портфолио. Он действительно чист и обладает отличной анимационной работой наряду с отзывчивыми приемами.

Каждая ссылка должна быть разделена вертикальной линией с равным пространством как справа, так и слева. Первая и последняя ссылки не должны иметь эти разделители слева и справа соответственно.

1. Разделитель должен иметь ту же высоту, что и текст.
2. Текст в ссылке должен иметь подчеркивание, применяемое при наведении, но между текстом и подчеркиванием должно быть.
3. Эффекты Hover применяются только к отдельным ссылкам.
4. Весь блок ссылок должен быть доступен клику, а эффект наведения должен начинаться, когда курсор входит в поле ссылки.
5. Активное состояние каждой ссылки должно быть таким же, как при зависании ссылки.

Приступаем к установке:

HTML

Код

<ul class="criptyocan_customizanyp">
  <li><a href="#">Главная</a></li>
  <li><a href="#">ZorNet.Ru</a></li>
  <li><a href="#">Скрипты</a>
  <ul>
  <li><a href="#">Коды</a></li>
  <li><a href="#">Файлы</a></li>
  <li><a href="#">Архивы</a></li>
  <li><a href="#">Логотип</a></li>
  </ul>
  </li>
  <li><a href="#">Шаблоны</a></li>
  <li><a href="#">Дизайн</a></li>
  </ul>

CSS

Код

.criptyocan_customizanyp{
  height: 49.8px;
  padding: 0;
  margin: 0;
  position: absolute;
}

.criptyocan_customizanyp li {
  height: auto;
  width: 147px;
  float: left;
  text-align: center;
  list-style: none;
  font: 14px "Bonveno", "Century Gothic";
  padding: 0;
  margin: 0;
  background-color: #f1ebeb;
  border: 1px solid #afaaaa;
  box-shadow: 0 1px 0 rgba(243, 234, 234, 0.75) inset, 0 1px 3px rgba(14, 14, 14, 0.15);
  border-radius: 3px;
  margin-left: 10px;
}

.criptyocan_customizanyp a {
  padding: 13px;
  text-decoration: none;
  color: #4e4b4b;
  text-shadow: 0 1px #f1e8e8;
  display: block;
  font-weight: bold;
}
.criptyocan_customizanyp li ul{
  display: none;
  height: auto;
  margin-left: -11px;
  padding: 0;
}

.criptyocan_customizanyp li:hover ul{
  display: block;
}

.navbar li ul li {
  background-color:#eee;
  border: 1px solid #ccc;
}

.criptyocan_customizanyp li:hover, a:hover {
  background: #e8e8e8;
}

На этом установка завершена.

Демонстрация

25 Мая 2018 Просмотров: 1306 Комментариев: (0)

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

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

Kosten

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