Создание сайтов с нуля - урок 38 - Вертикальное выпадающее меню

Вертикальное меню с выпадающим подменю

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

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

Позиционирование подменю

Обычно элементам списка li верхнего уровня задают относительное позиционирование, а для выпадающего меню - абсолютное. При этом, выпадающее подменю располагают в том месте, куда оно будет «выпадать». Учитывая, что оно позиционировано абсолютно, это не составляет никакого труда.

Также нужно установить для подменю z-index больше, чем у родительских пунктов, чтобы подменю располагалось выше и перекрывало их при появлении.

И еще один нюанс – при абсолютном позиционировании блочные элементы теряют свойство растягиваться по ширине на все доступное пространство родителя, поэтому для подменю необходимо установить ширину.

Отображаем подменю при наведении

Открытие подменю реализуется аналогично предыдущему уроку – при наведении мышки на родительский пункт меню дочернее подменю получает свойство display со значением block (в скрытом состоянии его значение было none).