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

Плюсом использования псевдокласса :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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Меню</title> <style> .dropdown { position: relative; /* Относительное позиционирование */ } .dropdown input, .dropdown ul { display: none; /* Прячем */ } .dropdown label { cursor: pointer; /* Вид курсора */ border-bottom: 1px dashed blue; /* Пунктир снизу */ } .dropdown ul { position: absolute; /* Абсолютное позиционирование */ left: 0; top: 1.3em; /* Положение меню */ margin: 0; padding: 5px; /* Убираем отступы и поля */ list-style: none; /* Убираем маркеры списка */ background: #673AB7; /* Цвет фона */ } .dropdown a { color: #fff; /* Цвет ссылок */ } .dropdown :checked ~ ul { display: inline-block; /* Показываем меню */ } </style> </head> <body> <div class="dropdown"> <input type="checkbox" id="menu"> <label for="menu">Выбери меня</label> <ul> <li><a href="#">Леонардо</a></li> <li><a href="#">Рафаэль</a></li> <li><a href="#">Донателло</a></li> <li><a href="#">Микеланджело</a></li> </ul> </div> </body> </html>

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

ниспадающее меню