Простое выпадающее меню

Простое выпадающее меню

Простое выпадающее меню

Простое выпадающее меню может быть создано без JavaScript и/или jQuery. Для создания используются CSS-свойства display, padding, псевдокласс :hover. Работающее меню можно посмотреть сразу (Нажмите «Fork», если хотите оформить HTML-меню по-своему). Продолжительность видео ~12мин. Заметка рассчитана на начинающих верстальщиков, вебразработчиков, которые делают первые шаги по изучению основ HTML и CSS; для тех кто изучил курс «Основы HTML5 и CSS3».

Создание простого выпадающего меню

Для создания меню на сайте обычно используется структурный блочный HTML-элемент nav и ненумерованный список. В одном из пунктов списка встраивается еще один список, так, чтобы он не входил в гиперссылку. Можно было бы разместить ul и внутри a, но на мой взгляд это не очень хорошая идея, ведь псевдо-класс :hover работает и с элементами li!

В нашем случае мы не рассматриваем вариант, когда у выпадающего списка тоже есть вложенные списки — эта задача не сложна сама по себе, но вызовет трудности у начинающего верстальщика. Также заметим, что построение меню можно выполнить, если найти или написать соответствующий JavaScript.

Для удобства работы с разметкой (вдруг у нас встретится ещё один nav), добавим CSS-класс нашему структурному навигационному элементу; гиперссылки сделаем заглушками, но вы можете вместо # прописать http://htmllab.ru 🙂

HTML-разметка для меню с выпадающим подменю
<nav class="menu">
  <ul>
    <li><a href="#">Lorem.</a></li>
    <li><a href="#">Explicabo?</a>
    
      <ul>
        <li><a href="#">Lorem.2</a></li>
        <li><a href="#">Eveniet.2</a></li>
        <li><a href="#">Omnis.2</a></li>
        <li><a href="#">Beatae.2</a></li>
      </ul>
    
    </li>
    <li><a href="#">Doloribus.</a></li>
    <li><a href="#">Sint.</a></li>
  </ul>
</nav>

Главное в CSS: чистка значений по умолчанию у HTML-элементов, входящих в меню; сокрытие будущего выпадающего подсписка (подменю) и его отображение, при наведении на родительский HTML-элемент — использование псевдо-класса :hover

CSS-правила для выпадающего меню
.menu ul li{
  padding: 10px;
}
.menu ul > li:hover{
  background-color: #f96;
}
.menu ul ul > li:hover{
  background-color: #69e;
}
.menu ul li, .menu ul{
  display: inline-block;
}
.menu ul{
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #f63;
}
.menu ul ul{
  display: none;
  position: absolute;
  background-color: #369;
  margin-top: 10px;
  margin-left: -10px;
}
.menu ul a{
  color: #fff;
  text-decoration: none;
}
.menu ul ul a{
  color: #fff;
  text-decoration: none;
}
.menu li:hover ul{
  display: block;
}

.menu li:hover li{
  display: block;
}

Созданное меню не является идеальным и может быть улучшено (подумайте, как именно). Удачной вам разработки и пусть создание подобных меню никогда не вызовет сложности!

Добавить комментарий