Как сделать выпадающее меню в html

ВЫПАДАЮЩЕЕ МЕНЮ В HTML

В этой статье мы покажем вам более универсальное решение как сделать выпадающее меню в html, которое подойдёт для любого сайта и не потребует от вас много усилий.Кроме того это меню является адаптивным, что немаловажно на сегодняшний день!

Выглядеть это выпадающее меню будет вот так:

Само выпадающее меню создаётся исключительно при помощи html и CSS, а для кнопки вызова адаптивного меню на маленьких экранах используется небольшой скрипт.

HTML РАЗМЕТКА ВЫПАДАЮЩЕГО МЕНЮ

Для создания выпадающего меню на html нам нужно будет создать многоуровневый список. Для того чтобы избежать путаницы со стилями я сразу обернула данное меню в отдельный блок и присвоила классы для используемых списков.

CSS СТИЛИ ВЫПАДАЮЩЕГО МЕНЮ

Теперь нам нужно дописать CSS стили для этого выпадающего меню. Их мы дописываем файл стилей активной темы или шаблона или подключаем как отдельный CSS файл в разделе .

Конечно же, все эти стили вы можете скорректировать и подогнать оформление данного выпадающего меню под дизайн своего сайта.

АДАПТАЦИЯ HTML МЕНЮ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА

Для того чтобы данное меню стало адаптироваться под мобильные устройства нам нужно:

  • 1.Добавить дополнительный блок с кнопкой, которая будет вызывать выпадающее меню на мобильных устройствах. Для этого перед кодом вывода меню вставляем код:

  • 2.Далее нам нужно убедиться что к сайту подключена библиотека jQuery.

  • 3.Добавить небольшой скрипт, который отвечает за вызов выпадающего меню при нажатии на соответствующую кнопку на маленьких экранах. Данный скрипт вставляем перед закрытием тега

Вот, собственно говоря, и всё! Теперь осталось всё сохранить, проверить работоспособность и при необходимости внести свои правки в html и css код. На первый взгляд кода много, но он не сложный и вы без труда сможете скорректировать его под свой сайт.