Плюсом використання псевдокласу :checked є те, що ми можемо клацати по різних елементах і відстежувати їх стан включено чи ні. Цей механізм знадобиться для створення меню, яке можна прив'язати до певного тексту. При натисканні на текст з'являється меню, ще одне натискання це меню приховує. На мал. 1 продемонстровано, як це меню виглядає.
Мал. 1. Меню, що випадає
Алгоритм створення такого меню не відрізняється від створення вкладок. Додаємо <input type="checkbox"> та <label>, потім зв'язуємо їх один з одним через атрибути id та for.
<code data-language="html"><input type="checkbox" id="menu"> <label for="menu">Текст</label>
Нижче маємо саме меню у вигляді списку <ul> .
<code data-language="html"><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 меню можна відображати зверху або праворуч від тексту.