Создание вертикального меню-аккордеона

Создание вертикального меню-аккордеона

Owebs
27 мая 2022
Просмотры 115
Рейтинг
Время чтения Время чтения: 8 минут

Оглавление
Развернуть Свернуть
Оглавление 1
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.
Оглавление 2
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.
Оглавление 3
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.

Сегодняшний урок будет посвящён одному из самых часто используемых элементов UI - аккордеону. Аккордеон предназначен для более компактного хранения больших текстовых информаций. Таких как: описание товаров, характеристик, условий договоров и т.д. Его интерактивность и незамысловатость привлекают внимание пользователей и тем самым, делают сайт более интересным и запоминающимся. На самом деле, спектр применения аккордеона довольно широк и поэтому, мы оставим на ваш выбор, в каком направлении его использовать.

Для создания аккордеона вам надо перекопировать следующие части кодов:

HTML:
                <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>
            
CSS:
                .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);
                }
            
JS:
                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');
                        }
        
                    });
        
                });
            

После копирования вышеупомянутых кусков кода, у вас должен появиться такой аккордеон:

Оглавление 1
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.
Оглавление 2
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.
Оглавление 3
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.

Количество элементов в аккордеоне может быть разным по вашему желанию. Для этого, можете смело добавлять или удалять блок с классом "element". Все цвета кнопок в CSS можете изменять по своему желанию. Для корректной работы аккордеона, не рекомендуем вносить изменения в структуру html или JavaScript кода.

Ow
Имя:
Комментарий:
Развернуть все Скрыть
Декор Декор

Популярные Популярные

Анимированный индикатор для пунктов меню на сайте
Просмотры 183
Рейтинг 15
8 декабря
5 месяцев назад

Расскажем как написать анимированный индикатор для пунктов меню на сайте. Так портал станет более интерактивным и привлекательным для пользователей.

Оформления блока акций через CSS
Просмотры 344
Рейтинг 6
14 декабря
5 месяцев назад

В данном уроке будем стилизовать текст для объявлений об акции. Необходимо сделать так, чтобы наше объявление привлекло потенциальных покупателей

Создание сайтов через нейросети
Просмотры 366
Рейтинг 4
9 февраля
3 месяцев назад

Популярность нейросетей в 2024 году набирает обороты. Нет, они не заменяют полноценных специалистов. Зато существенно упрощают и ускоряют работу тех же копирайтеров, сеошников и дизайнеров.

Сегодня мы расскажем, какие нейросети можно использовать в работе, разберем их функционал и приведем примеры генерации.

Оставьте заявку СЕЙЧАС

Поставив галочку, Вы даете согласие на обработку ваших Персональных данных

Сookies-файлы на сайте

Наш сайт использует куки.
Продолжая им пользоваться, вы соглашаетесь на обработку данных в соответсвии с политикой конфидециальности.

Согласен