Випадаюче меню з використанням лише CSS та недокументованих можливостей елемента прапорця
Структура HTML виглядає так. Важливо, що елемент введення повинен розташовуватися першим, до елементів підпису та ненумерованого списку. Пізніше, коли ми розбиратимемо код CSS, стане зрозуміло, чому.
Як Ви бачите, тут немає нічого складного, всі елементи HTML звичайні, які широко використовуються:
- У блочному елементі знаходиться решта.
- Елемент введення типу прапорець потрібен через можливість бути встановленим або невстановленим. Він буде захований увесь час.
- Елемент підпису буде використовуватися для перемикання стану елемента введення та виклику меню, що випадає.
- Елемент ненумерованого списку - це просто список, який потрібно зробити видимим, коли меню розгорнуто. Це може бути будь-який інший елемент.
Недокументовані можливості елемента прапорця
Нам потрібен елемент прапорця тільки заради його встановленого стану, якому можна задати стилі за допомогою псевдокласу: checked. Встановлення та зняття прапорця робиться за допомогою натискання на елемент підпису, що є звичайною функцією браузера. Спочатку сховаємо елемент прапорця:
Ще сховаємо за замовчуванням елемент ненумерованого списку — це меню, що випадає, яке повинно бути видно, тільки коли воно розгорнуте:
А ось і недокументована можливість. Якщо об'єднати псевдоклас :checked із спорідненим селектором
, можна змінювати властивості CSS елементів, що йдуть за елементом прапорця. Це причина, з якої потрібно, щоб елемент прапорця розташовувався вище за інші елементи в дереві об'єктів документа.
Код вище покаже ненумерований список, лише якщо встановлено прапорець. Так як у елемента введення типу прапорець можливі тільки два стани, він відмінно підходить для перемикання елементів між розгорнутим ізахованим станами.