В этом уроке мы рассмотрим вариант создания простого вертикального раздвигающегося меню.
Для начала определимся с HTML-кодом. Как правило, меню представляет собой набор ссылок на различные страницы, поэтому удобнее всего его реализовывать при помощи маркированного списка с ссылками внутри.
<ul>
<li><a href=”#”>Меню 1</a></li>
<li><a href=”#”>Меню 2</a></li>
<li><a href=”#”>Меню 3</a></li>
<li><a href=”#”>Меню 4</a></li>
<li><a href=”#”>Меню 5</a></li>
</ul>
Обратите внимание, что вне зависимости от того, какое меню необходимо создать, вертикальное или горизонтальное, его структура будет идентична.
Общие действия для любого меню:
- обнулить внешние и внутренние отступы у списка;
- убрать маркеры у элементов списка.
Далее можно приступать к оформлению элементов списка и ссылок внутри.
Для ссылок стоит задать стили в обычном состоянии, а также при наведении и щелчке мышкой.
Также стоит подумать над тем, как будет отображаться пункт меню для страницы, на которой мы находимся – как правило, у «текущего» пункта меню свой особенный внешний вид.
Важный этап — добавление интерактивности.
Сначала прячем выпадающее подменю по умолчанию, с помощью display: none;
Затем делаем так, чтобы при наведении мыши на пункт меню, внутри которого расположено подменю, оно появлялось. Для этого используем контекстный селектор в сочетании с псевдоклассом :hover и display: block;.
Состояние «открытое подменю»
Иногда нужно сделать так, чтобы выпадающее подменю было открыто по умолчанию (а не только при наведении мыши). Этого добиться очень просто – нужно сразу добавить к нужному пункту меню класс, который отвечает за «открытость» меню.
Многоуровневые меню
Довольно часто встречается многоуровневое вертикальное меню, оно идеально подходит при создании больших проектов с большим деревом категорий.
В HTML многоуровневые меню размечают как обычные многоуровневые списки. Например:
<ul>
<li><a href=”#”>Меню 1</a></li>
<li><a href=”#”>Меню 2</a>
<ul>
<li><a href=”#”>Подменю 2-1</a></li>
<li><a href=”#”>Подменю 2-2</a></li>
<li><a href=”#”>Подменю 2-3</a></li>
<li><a href=”#”>Подменю 2-4</a></li>
<li><a href=”#”>Подменю 2-5</a></li>
</ul>
</li>
<li><a href=”#”>Меню 3</a></li>
<li><a href=”#”>Меню 4</a></li>
<li><a href=”#”>Меню 5</a></li>
</ul>
