Вернуться к уроку

Раскрывающееся меню

важность: 5

Создайте меню, которое раскрывается/сворачивается при клике:

P.S. HTML/CSS исходного документа понадобится изменить.

Открыть песочницу для задачи.

Для начала, зададим структуру HTML/CSS.

Меню является отдельным графическим компонентом, его лучше поместить в единый DOM-элемент.

Элементы меню с точки зрения семантики являются списком UL/LI. Заголовок должен быть отдельным кликабельным элементом.

Получаем структуру:

<div class="menu">
  <span class="title">Сладости (нажми меня)!</span>
  <ul>
    <li>Пирог</li>
    <li>Пончик</li>
    <li>Мед</li>
  </ul>
</div>

Для заголовка лучше использовать именно SPAN, а не DIV, так как DIV постарается занять 100% ширины, и мы не сможем ловить click только на тексте:

<div style="border: solid red 1px">[Сладости (нажми меня)!]</div>

…А SPAN – это элемент с display: inline, поэтому он занимает ровно столько места, сколько занимает текст внутри него:

<span style="border: solid red 1px">[Сладости (нажми меня)!]</span>

Раскрытие/закрытие сделаем путём добавления/удаления класса .menu-open к меню, которые отвечает за стрелочку и отображение UL.

Обычно меню будет закрыто:

.menu ul {
  margin: 0;
  list-style: none;
  padding-left: 20px;
  display: none;
}

.menu .title::before {
  content: '▶ ';
  font-size: 80%;
  color: green;
}

Если же меню раскрыто, то есть имеет класс .menu-open, то стрелочка слева заголовка меняется и список детей показывается:

.menu.open .title::before {
  content: '▼ ';
}

.menu.open ul {
  display: block;
}

Для JavaScript остался минимум работы – только добавить/удалить класс при клике.

Открыть решение в песочнице.