Простое выпадающее меню может быть создано без 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 🙂
<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
.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;
}
Созданное меню не является идеальным и может быть улучшено (подумайте, как именно). Удачной вам разработки и пусть создание подобных меню никогда не вызовет сложности!