Выпадающее меню

Плюсом использования псевдокласса :checked является то, что мы можем щёлкать по разным элементам и отслеживать их состояние — включено или нет. Этот механизм пригодится для создания выпадающего меню, которое можно привязать к определённому тексту. При щелчке по тексту появляется меню, ещё один щелчок это меню скрывает. На рис. 1 продемонстрировано, как это меню выглядит.

Рис. 1. Выпадающее меню

Алгоритм создания такого меню не отличается от создания вкладок. Добавляем <input type="checkbox"> и <label>, затем связываем их друг с другом через атрибуты id и for.

<input type="checkbox" id="menu">
<label for="menu">Текст</label>

Ниже располагаем само меню в виде списка <ul>.

<ul>
  <li><a href="#">Пункт 1</a></li>
  <li><a href="#">Пункт 2</a></li>
</ul>

В стилях скрываем <input> и <ul> через свойство display со значением none.

input, ul { display: none; /* Прячем */ }

Затем <ul> отображаем через комбинацию :checked и ul.

:checked ~ ul {
  display: inline-block; /* Показываем меню */
}

Чтобы пользователь понимал, что перед ним не обычный текст, добавим к нему пунктирное подчёркивание через border-bottom и при наведении поменяем курсор на «руку», как это происходит со ссылками, через cursor.

label {
  cursor: pointer; /* Вид курсора */
  border-bottom: 1px dashed blue; /* Пунктир снизу */
}

Окончательный код для создания выпадающего меню с использованием псевдокласса :checked показан в примере 1.

Пример 1. Выпадающее меню на CSS

Здесь у нас меню располагается снизу от текста, но с помощью свойств left, top, right, bottom для селектора ul меню можно отображать сверху или справа от текста.