Меню акордеон

9 червня 2022 р.194

Акордеон являє собою список з вмістом, що розкривається (рис. 1). Зручний для створення великих меню через компактність, а також для блоків запитань та відповідей. Назва походить від музичного інструменту, який нагадує своїм виглядом.

Вигляд акордеону

Мал. 1. Вигляд акордеону

Є два типи акордеон-меню.

При розкритті будь-якого пункту списку відкритий вміст закривається; на власний вплив це схоже на вкладки.
Можна розкривати будь-який пункт списку, інші пункти при цьому не закриваються.

Оскільки акордеон своєю роботою нагадує вкладки, то ми можемо використовувати той самий код HTML, що й під час створення вкладок (приклад 1). Для першого типу акордеону вставляємо <input type="radio">, який дозволяє вибрати лише один пункт, а для другого типу < input type="checkbox"> — з його допомогою можна розкривати та закривати довільну кількість пунктів.

Приклад 1. Код окремого пункту акордеону

<code data-language="html"><div class="tab"> <input type="radio" id="tab1" name="tab-group"> <label for="tab1" class="tab-title">Заголовок пункту</label> <section class="tab-content">Вміст</section>
</div>

Не забудьте, що для кожного <input> треба додати свій унікальний id, а його значення потім вставити в атрибут for у розташованого нижче елемента <label>.

Алгоритм створення акордеону повторює кроки під час створення вкладок. Спочатку ми ховаємо <input> та вміст через властивість display зі значенням none .

.tab input, .tab-content { display: none; }

Потім за допомогою псевдокласу :checked показуємо вміст, задаючи властивості display значення block.

:checked ~ tab-content { display: block; }

Для різноманітності праворуч від заголовка додамо символ плюсу, він буде показувати користувачеві що пункт розкривається; при відкритті пункту символ плюс міняємо на мінус. Обидві дії робляться через псевдоелемент ::after та властивість content, у значенні якого пишемо текст. За бажання плюс і мінус можна поміняти на щось інше, наприклад, на стрілки.

.tab-title::after { content: '+'; } 
:checked + .tab-title::after { content: '−'; }

Щоб користувач розумів, що на пункти списку можна натиснути, змінимо вигляд курсора на «руку» при наведенні на заголовок.

.tab-title { cursor: pointer; }

У прикладі 2 показаний набір запитань та відповідей у вигляді акордеону. У згорнутому стані все це виглядає компактно, кожне питання можна розгортати та згортати.

Приклад 2. Створення акордеону

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Акордеон</title> <style> .tab input, .tab-content { display: none; } 
.tab { font: 0.8rem/1.2 Arial, sans-serif; /* Параметри шрифту */
border: 1px solid #e9eaec; /* Параметри рамки */
border-radius: 3px; /* Закруглюємо куточки */
color: #848994; /* Колір тексту */
margin-bottom: 10px; /* Відстань між пунктами */
} 
.tab-title { padding: 10px; /* Поля навколо тексту */
display: block; /* Блоковий елемент */
text-transform: uppercase; /* Всі літери великі */
font-weight: bold; /* Жирне зображення */
cursor: pointer; /* Вид курсору */
} 
.tab-title::after { content: '+'; /* Виводимо плюс */
float: right; /* Розташовуємо праворуч */
} 
.tab-content { padding: 10px 20px; /* Поля навколо тексту */
} 
.tab :checked + .tab-title { background-color: #50a2de; /* Колір тла */
border-radius: 3px 3px 0 0; /* Закруглюємо куточки */
color: #fff; /* Колір тексту */
} 
.tab :checked + .tab-title::after { content: '−'; /* Виводимо мінус */
} 
.tab :checked ~ .tab-content { display: block; /* Показуємо вміст */
}
</style>
</head>
<body> <div class="accordion"> <div class="tab"> <input type="checkbox" id="tab1" name="tab-group"> <label for="tab1" class="tab-title">Що таке HTML5?</label> <section class="tab-content"> <p>Під HTML5 зазвичай мають на увазі два різні поняття:</p> <ul> <li>Ця мова розмітки документа, що прийшла на зміну HTML4 і XHTML.</li> <li>Це набір веб-технологій, що дозволяє робити на сайті різні цікаві штуки.</li>
</ul>
</section>
</div> <div class="tab"> <input type="checkbox" id="tab2" name="tab-group"> <label for="tab2" class="tab-title">Чи можна програмувати на HTML5?</label> <section class="tab-content"> Ні, на HTML5, як і раніше, не можна програмувати, основною мовою є JavaScript. Тож у розмові краще не згадувати, що вмієш програмувати на HTML5, засміють.
</section>
</div> <div class="tab"> <input type="checkbox" id="tab3" name="tab-group"> <label for="tab3" class="tab-title">Чим HTML5 відрізняється від HTML4?</label> <section class="tab-content"> У HTML5 додані нові елементи, на зразок &lt;header&gt;, &lt;footer&gt;, &lt;aside&gt;, &lt;article&gt;, з'явилася довгоочікувана підтримка аудіо, відео та багато іншого.
</section>
</div>
</div>
</body>
</html>

Рішення з використанням псевдокласу :checked виходить досить гнучким і легко налаштованим під свої потреби. Так, можна заздалегідь зробити окремі пункти відкритими, додавши <input> атрибут checked. Якщо потрібно змінити поведінку акордеона, щоб відкритим був лише один пункт, то потрібно змінити значення атрибуту type на radio. Сам CSS залишається вихідним і будь-які виправлення вносити до нього не знадобиться.

також