Меню аккордеон только css

Создаем меню аккордеон средствами CSS

В первую очередь хочу Вас заверить, что Вы не ошиблись и это не блог музыкальной консерватории. Сегодня в данной статье пойдет речь о так называемом «аккордеоне».

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

Такое решение для меню является своеродным нетрадиционном методом оформления навигации на сайте, что несомненно будет привлекать пользователей ресурса. К основным преимуществам аккордеона относят его характеристики юзабилити. Это простой и действенный способ разместить большой объем информации на ограниченном пространстве сайта.

Создаем аккордеон на базе CSS

Меню данного типа можно легко создать, используя jQuery. В этом случае нужно будет проследить чтобы библиотека на которой работает меню ни с чем другим не конфликтовала и все корректно работало во всех видах браузеров. Мы предлагаем более простое решение этой загвоздки. Создание вертикального меню типа аккордеон на основе CSS обеспечит не только хорошую кроссбраузерность, но и сократит объем кода исполняемого на странице, что тоже не мало важно.

Однако не стоит забывать о неповторимом Internet Explorer. Даже при использовании общепринятых правил CSS он требует особого внимания в виде js-кода, который нормализует его работу с таким кодом. В прочем если Вас не сильно волнуют 7 и более ранние версии этого браузера, можете не обращать внимания на это замечание.

Принцип работы этого способа создания меню не имеет ничего сложного. Двумя основными столбами, на которых держится гармошка, написанная средствами CSS, являются свойства :target (больше о нем можно узнать в статье о псевдоклассах CSS) и transition.

Ниже показан пример реализации метода:

div class="accordMenu"> section id="first"> h1>a href="#first">Раздел 1a>h1> div> p>Выплывающий контент или дополнительные ссылки для перехода в соответствующие подразделыp> div> section> section id="second"> h1>a href="#second">Раздел 2a>h1> div> p>Выплывающий контент или дополнительные ссылки для перехода в соответствующие подразделыp> div> section> section id="third"> h1>a href="#third">Раздел 2a>h1> div> p>Выплывающий контент или дополнительные ссылки для перехода в соответствующие подразделыp> div> section> div>

.accordMenu h1 + div height: 0; overflow: hidden; -moz-transition: height 0.3s ease-in-out; -webkit-transition: height 0.3s ease-in-out; -o-transition: height 0.3s ease-in-out; transition: height 0.3s ease-in-out; > .accordMenu :target h1 + div height: 100px; > h1 a, h1 font-size:17px; color:#444; font-weight:lighter; text-transform:uppercase; text-decoration:none; padding:5px; > section  background:#eee; border:1px solid #c9c9c9c; > p  padding:5px; >

Не стоит забывать про особенность работы метода в Internet Explorer. Для так называемого «костыля» для нашего дедушки подойдет множество средств, все зависит от Вашего энтузиазма и фантазии. В указанном примере костыль не используется.

Вот так будет выглядеть работа кода на практике

В каких браузерах работает?

Подводя итог

Использование верстки меню нетипичными способами на основе CSS позволяет эргономично организовать контент Вашего интернет-ресурса.

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

Источник

Как создать вертикальный аккордеон для сайта

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

Что такое аккордеон?

Аккордеон – это вертикально сложенный набор заголовков. Каждый из них может быть развернут, чтобы показать содержимое, связанное с ним. Этот элемент так называется из-за того, что принцип его действия напоминает музыкальный инструмент аккордеон.

В данном примере, при показе контента, связанного с заголовком, стрелочка, расположенная справа от него изменяет своё направление на противоположное. Данная стрелочка в этом аккордеоне реализована с помощью псевдоэлемента ::after следующим образом:

.accordion__header::after { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1.25rem; content: ""; } .accordion__item_show .accordion__header::after { transform: rotate(-180deg); }

Очень часто на сайте аккордеоны используются для создания блока FAQ (последовательность вопросов и ответов).

Пример создания простого аккордеона

Процесс разработки вертикального аккордеона начнём с написания HTML разметки :

 
 
 
Заголовок 1
 
Содержимое 1
 
 
 
Заголовок 2
 
Содержимое 2
 
 .
 

• .accordion – это общая обертка для элементов, она непосредственно содержит .accordion__item ;
• .accordion__item – это один элемент, внутри которого располагается заголовок .accordion__header и содержимое .accordion__body ;
• .accordion__header – заголовок, при нажатию на который будет открываться .accordion__body ;
• .accordion__body – содержимое, связанное с заголовком .accordion__header .

Раскрыт или нет .accordion__item определяется посредством класса accordion__item_show . Если данный класс присутствует у элемента, то .accordion__body показывается. В противном случае – нет.

Переключение состояния .accordion__item осуществляется посредством нажатия на заголовок .accordion__header .

Теперь зададим стили для аккордеона : accordion.css. Они очень простые. Разметка заголовка .accordion__header выполняется с помощью CSS Flexbox.

Самое основное, если .accordion__item не имеет класса accordion__item_show , элемент .accordion__body не показывается:

.accordion__item:not(.accordion__item_show) .accordion__body { display: none; }

В противном случае .accordion__body показывается.

Остальные стили отвечают только за оформление аккордеона и к функционалу прямого отношения не имеют.

Последнее что осталось – это создать код на JavaScript . Задача JavaScript будет заключаться в переключении класса accordion__item_show у элемента .accordion__item при нажатии на .accordion__header . То есть JavaScript в зависимости от того по какому заголовку кликнули, будет просто добавлять или удалять класс accordion__item_show у .accordion__item :

this._el.addEventListener('click', (e) => { // получим элемент .accordion__header const elHeader = e.target.closest('.accordion__header'); // если такой элемент не найден, то прекращаем выполнение функции if (!elHeader) { return; } // если необходимо, чтобы всегда был открыт один элемент if (!this._config.alwaysOpen) { // получим элемент с классом accordion__item_show и сохраним его в переменную elOpenItem const elOpenItem = this._el.querySelector('.accordion__item_show'); // если такой элемент есть if (elOpenItem) { // и он не равен текущему, то переключим ему класс accordion__item_show elOpenItem !== elHeader.parentElement ? elOpenItem.classList.toggle('accordion__item_show') : null; } } // переключим класс accordion__item_show элемента .accordion__header elHeader.parentElement.classList.toggle('accordion__item_show'); });

Здесь приведён фрагмент кода. Он будет выполняться при создании нового экземпляра типа ItcAccordion . this._el будет указывать на общую обертку .accordion . Добавление обработчика события click для элемента this._el осуществляется с помощью метода addEventListener() . В качестве аргумента этому методу мы передаём стрелочную функцию, которая будет вызвана при возникновении данного события на этом элементе. Остальные действия пояснены с помощью комментариев.

Как установить аккордеон на сайт

1. Вставить в нужно место страницы верстку аккордеона:

2. Подключить к странице CSS и JavaScript файлы:

3. Инициализировать корневой элемент аккордеона как ItcAccordion с помощью оператора new :

new ItcAccordion('#accordion-1', { alwaysOpen: false });

Свойство alwaysOpen определяет необходимо ли при открытии нового контента закрывать предыдущий. Если false , то необходимо. В противном случае не нужно. Кстати, значение true – это значение по умолчанию и в этом случае его можно не указывать:

new ItcAccordion('#accordion-1');

Аккордеон с анимацией скольжения

Добавление в аккордеон плавного показа или скрытия контента, связанного с заголовком, выполним на основе материала, приведённого в статье: «Создание аналога slideToggle() на чистом JavaScript».

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Стили аккордеона, включающие в себя анимацию, расположены на GitHub: animated-accordion.css.

Вертикальное меню аккордеон

Пример настройки аккордеона, приведённого выше, для использования его в качестве вертикального меню.

 
 
 
Заголовок 1
 
 
Пункт 1.1 Пункт 1.2 Пункт 1.3 .
 
 
 
 
Заголовок 2
 
 
Пункт 2.1 Пункт 2.2 Пункт 2.3 .
 
 
 .
 

Как видно он имеет точно такую же структуру, только в .accordion__content помещены ссылки.

В CSS дополнительно для стилизации добавлен следующий код:

.accordion__content a { position: relative; display: block; padding: 0.5rem 1rem; color: #212529; text-decoration: none; background-color: #fff; border: 1px solid rgb(0 0 0 / 12.5%); } .accordion__content a:last-child { border-bottom-right-radius: inherit; border-bottom-left-radius: inherit; } .accordion__content a:hover { background-color: #f8f9fa; }

Многоуровневое меню аккордеон

Пример разметки многоуровневого вертикального меню аккордеон:

 
 
 
Заголовок 1
 
 
Пункт 1.1 
 
Пункт 1.2
 
 
Пункт 1.2.1 Пункт 1.2.2 
 
Пункт 1.2.3
 
 
Пункт 1.2.3.1 Пункт 1.2.3.2 Пункт 1.2.3.3 
 
 
 Пункт 1.2.4 Пункт 1.2.5 
 
 
 Пункт 1.3 
 
 
 .
 

Здесь дополнительно добавлен ещё элемент .accordion__content .

CSS код для такого меню необходимо брать из файла multilevel-accordion.css, а JavaScript – как в предыдущем примере, т.е. из animated-accordion.js.

Источник

Аккордеон на CSS

2 примера создания аккордеона без использования скриптов.

Один работает с использованием радиокнопок , а другой с флажками

Пример аккордеона с одной открытой вкладкой

Т.к. из одноименных радиокнопок может быть выбрана только одна, соответственно и вкладка аккордеона тоже

HTML:

Обратите внимание, что ID для каждой вкладки должны быть уникальные:

CSS:

Пример аккордеона с несколькими открытыми вкладками

Если нужно иметь открытыми несколько вкладок, то просто заменяем кнопки на флажки

HTML:

CSS такой же, как в первом варианте

• Опубликовано: 20.10.2020 / Обновлено: 04.02.2021
• Рубрики: Меню и аккордеоны
• Метки: CSS
• 28838 просмотров

Смотрите также:

Полноэкранное мобильное меню

Полноэкранное мобильное меню с фиксированной иконкой-гамбургер

Навигационное меню для лендинга

Навигационное меню для лендинга с плавным скроллом и подсветкой пункта активной секции

Боковое меню с иконками на CSS

Фиксированное боковое меню с иконками и выдвигающимися подсказками на CSS

Добавить комментарий:

Комментарии:

На мобильных устройствах, при открытии вкладки, прокручивает всю страницу в конец. Если это лендинг пейдж , то использовать этот аккордеон невозможно.

bbobik. нормальный БАЯН — зря грешишь, всё работает в нормуль — ручки только нужны с головой, что бы для себя сие подделать!

Та же проблема, что только не делал — скроллит в конец страницы, плюнул и сделал на jquery из другого примера

Источник