Создание вертикального меню-аккордеона
Сегодняшний урок будет посвящён одному из самых часто используемых элементов UI - аккордеону. Аккордеон предназначен для более компактного хранения больших текстовых информаций. Таких как: описание товаров, характеристик, условий договоров и т.д. Его интерактивность и незамысловатость привлекают внимание пользователей и тем самым, делают сайт более интересным и запоминающимся. На самом деле, спектр применения аккордеона довольно широк и поэтому, мы оставим на ваш выбор, в каком направлении его использовать.
Для создания аккордеона вам надо перекопировать следующие части кодов:
<div class="accordion">
<div class="element">
<div class="top">
Оглавление 1
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
</div>
</div>
<div class="element">
<div class="top">
Оглавление 2
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
</div>
</div>
<div class="element">
<div class="top">
Оглавление 3
</div>
<div class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.
</div>
</div>
</div>
.accordion {
max-width: 700px;
border: none;
outline: none;
text-align: left;
}
.accordion .top {
position: relative;
font-weight: bold;
font-size: 18px;
color: #000;
background-color: rgb(255, 205, 129);
transition: all 0.3s linear;
padding: 15px 30px 15px 20px;
cursor: pointer;
}
.accordion .top::before {
content: '';
position: absolute;
top: 50%;
right: 17px;
transform: translateY(-50%) rotate(40deg);
width: 10px;
height: 2px;
background-color: #000;
}
.accordion .top::after {
content: '';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%) rotate(-40deg);
width: 10px;
height: 2px;
background-color: #000;
}
.accordion .content {
height: 0;
color: #000;
background-color: #fff;
border: 1px solid rgb(255, 205, 129);
border-top: none;
padding: 0 20px;
transition: all 0.5s;
overflow: hidden;
}
.accordion .element:hover .top,
.accordion .element.is-open .top{
background-color: rgb(247, 180, 80);
}
.accordion .element.is-open .content{
height: auto;
padding: 10px 20px;
}
.accordion .element.is-open .top::before {
transform: translateY(-50%) rotate(-40deg);
}
.accordion .element.is-open .top::after {
transform: translateY(-50%) rotate(40deg);
}
document.querySelectorAll('.accordion .element').forEach(accordionElement => {
accordionElement.addEventListener('click', function () {
if(!accordionElement.classList.contains('is-open')) {
accordionElement.classList.add('is-open');
}
else {
accordionElement.classList.remove('is-open');
}
});
});
После копирования вышеупомянутых кусков кода, у вас должен появиться такой аккордеон:
Количество элементов в аккордеоне может быть разным по вашему желанию. Для этого, можете смело добавлять или удалять блок с классом "element". Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы аккордеона, не рекомендуем вносить изменения в структуру html или JavaScript кода.