Створення вертикального меню, що розгортається.
За допомогою псевдокласу :target можна створити багато, наприклад, перемикання між вкладками з використанням лише CSS3. Однією з головних переваг коду CSS є те, що можна задавати будь-які стилі коду HTML, так що ми перетворимо ту розмітку, щоб вона виглядала як вертикальне меню, що розгортається.
Цей код HTML5 близький до коду, використаного для створення перемикання між вкладками. Ми тільки замінили клас статті на accordion та перейменували деякі ідентифікатори для більшої зрозумілості. Ще тут у нас 5 розділів, тому що так краще виглядає:
Як і там, заголовок розділу, на який можна натискати, міститься у кожному розділі у тегу h2.
Спочатку задамо стилі блоку статей та елементам розділу. Кожен розділ спочатку закритий, і його висота дорівнює 2em, зверніть увагу, що значення властивості переповнення встановлено як приховане:
Тепер назва розділу займатиме все доступне місце у закритому стані:
А тепер можна встановити стилі для розгорнутого стану активного розділу за допомогою псевдокласу :target. Ми задаємо велику висоту та колір фону, після чого збільшуємо та змінюємо колір і у назви:
При необхідності можна задати висоту розділу автоматичної, щоб використовувати найменший відповідний розмір. Але тоді не вдасться додати цікавий ефект переходів CSS3, який плавно змінить розмір елемента:
Цей код CSS простіше, ніж у перемикання між вкладками, і виглядає більш цікаво. Але вертикальні меню досить прості, у наступному уроці ми розповімо про те, як зробити ще цікавіше горизонтальне меню.