ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированное выпадающее меню на CSS / HTML

Анимированное выпадающее меню на CSS / HTML

Отличное горизонтальное меню навигации, которое выстроено с помощью CSS3. Где будет иметь под меню или категорий при клике на раздел. Дизайн здесь плоский, что может подойти на многие ресурсы по стилистике, безусловно его можно по гамме цвета выставлять как вам нужно. Но здесь главное, что в этом меню можно размещать очень много запросов, которые будут грамотно разделены. По сути здесь собираемся сделать еще один шаг и добавить выпадающее разноплановое меню. Где узнаем, как создать анимированные выпадающее меню CSS3, используя очень простые и доступные методы создания элементов в css переходах и позиционировании, чтобы отобразить наше раскрывающееся меню.

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

Проверяя, как работают все элементы, то вот снимок с Demo, где немного изменил оттенок, что в реальности идет.

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

HTML

Код

<nav>
  <ul id="granitaxulakin">
  <li><a href="#"> Главная</a></li>
  <li><a href="#"> Скрипты</a>
  <ul>
  <li><a href="#">ZorNet.Ru: Портал</a></li>
  <li><a href="#">ZorNet.Ru: Портал</a></li>
  <li><a href="#">ZorNet.Ru: Портал</a></li>
  <li><a href="#">ZorNet.Ru: Портал</a></li>
  </ul>
  </li>
  <li><a href="#"> Шаблоны</a>
  <ul>
  <li><a href="#">Первый - 1</a></li>
  <li><a href="#">Второй - 2</a></li>
  <li><a href="#">Третий - 3</a></li>
  <li><a href="#">Четвертый - 4</a></li>
  </ul>
  </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="#"> Стили CSS</a></li>
  </ul>
  </nav>

CSS

Код

#granitaxulakin {
  list-style: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #125f73;
  z-index: 999;
}

#granitaxulakin > li{
float:left;
position:relative;
display:block;
margin:0 auto;
transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
}

#granitaxulakin > li:hover{
background-color:#006882;
}

#granitaxulakin > li > a {
  color: #f3f1f1;
  float: left;
  text-decoration: none;
  padding: 20px 27px;
  letter-spacing: .1em;
}

#granitaxulakin ul {
  position: absolute;
  z-index: -1;
  top: -999px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #162831;
  transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
}

#granitaxulakin ul li a{
color:#f7f3f3;
text-decoration:none;
display:block;
padding:3px 9px;
font-size:13px;
line-height:3em;
}

#granitaxulakin ul li:hover{
background-color:#075265;
}

#granitaxulakin li:hover ul {
display:block;/**/
top:57px;
min-width:198px;
}

В нашем первом разделе используется оператор > для стилизации только первого уровня ul. Во втором стиле раздела указывается только раскрывающийся список. Как вы можете видеть, все выглядит довольно нормально, пока мы не начнем стилизовать выпадающее меню.

Все в основном зависит от селектора #granitaxulakin ul. Здесь вы увидите, что контент абсолютно свободен от страницы. Где есть возможность вернуть подменю на страницу, настроив селектор #granitaxulakin li: hover ul, изменив верхнее значение.

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

18 Июня 2018 Просмотров: 1778 Комментариев: (0)

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

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

Kosten

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