Сейчас, уже довольно распространенная практика использовать выпадающее меню на сайтах. Чтобы реализовать такую задачу, можно использовать несколько способов, но я расскажу про самый простой, это меню без использования JavaScript / Jquery
Расписывать тут все прям до тонкостей не буду, но расскажу про основное.
HTML
Для начала сделаем HTML- структуру нашего выпадающего меню
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<ul class="menu"> <li><a href=#>Menu 1</a> <ul class="submenu"> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> <li><a href=#>SubMenu 1</a></li> </ul> </li> <li><a href=#>Menu 2</a> <ul class="submenu"> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> <li><a href=#>SubMenu 2</a></li> </ul> </li> <li><a href=#>Menu 3</a> <ul class="submenu"> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> <li><a href=#>SubMenu 3</a></li> </ul> </li> <li><a href=#>Menu 4</a> <ul class="submenu"> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> <li><a href=#>SubMenu 4</a></li> </ul> </li> <li><a href=#>Menu 5</a> <ul class="submenu"> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> <li><a href=#>SubMenu 5</a></li> </ul> </li> </ul> |
Все что мы сделали, создали основной список, с классом menu и дальше, в каждую li мы положили новые списки, которые являются нашими подменю, так же это можно понять и по классу который мы им присвоили submenu
CSS
Добавим немного стилей для меню и сделаю все магию появления выпадающего меню
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
ul { display: block; margin: 0; padding: 0; list-style: none; } ul:after { display: block; content: ' '; clear: both; float: none; } ul.menu > li { float: left; position: relative; } ul.menu > li > a { display: block; padding: 10px; color: white; background-color: red; text-decoration: none; } ul.menu > li > a:hover { background-color: black; } ul.submenu { display: none; position: absolute; width: 120px; top: 37px; left: 0; background-color: white; border: 1px solid red; } ul.submenu > li { display: block; } ul.submenu > li > a { display: block; padding: 10px; color: white; background-color: red; text-decoration: none; } ul.submenu > li > a:hover { text-decoration: underline; } ul.menu > li:hover > ul.submenu { display: block; } |
Немного внесу пояснения, чтобы вам было понятнее как это работает. Все элементам с классом submenu мы присвоили значение display: none. И теперь нам необходимо сделать что бы при наведении на одну из li главного меню, появлялось подменю. Это мы сделали при помощи таких стилей:
|
1 2 3 |
ul.menu > li:hover > ul.submenu { display: block; } |
Они и позволяют видеть подменю при наведении.
Если у вас есть вопросы, пишите в комментарии, буду рад помочь.
Чтобы не пропустить выход новых статей, подписывайтесь на мой telegram-канал
Автор публикации
Оставьте ответ