Аккордеон меню только javascript

Содержание

Простой аккордеон на JavaScript и CSS
Аккордеон меню
Меню аккордеон на JS
Демонстрация меню аккордеон.
HTML структура
CSS код
JS код
Добавление иконок
Комментарии ( 0 ):
Как сделать — Складывающийся/Аккордеонный контент (Меню-аккордеон)
Аккордеон
Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Простой аккордеон на JavaScript и CSS

Вашему вниманию простая по установке и по своей работе аккордеон, которые созданы на HTML и также CSS3 и где также не нужно подключение jQuery. Также для полноценной работы здесь идет JavaScript, что будет отвечать за функцию открытие категорий или раздела, и по аналогичному клику идет закрытие. Все отлично по дизайну настраивается, где немного стилистику изменил, если на demo страницы мы видим плоский дизайн, то здесь добавил градиент.

Где стразу вид изменился, но это все только будет видно при открытии, что не стал вообще изменять, так как все корректно по цветовой палитре выстроено. Безусловно, если вы ходили по разным интернет ресурсам, то вам вероятно встречался такой стиль, что только изменяется по цветовой гамме на многих сайтах.

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

Все проверено по функциям, также такой стиль с изменением идет:

Первое описание в категорий.

Еще одно описание.

Адаптивное модальное окно

Табы в виде аккордеона на CSS

.asengou-vanuseb <
width: 75%;
max-width: 595px;
margin: 47px auto;
box-shadow: 0px 0px 5px 3px rgba(148, 148, 148, 0.41), 0px 0px 14px 5px rgba(0, 0, 0, 0);
border: 2px solid #dcdada;
border-radius: 3px;
>

button.kenodougou <
width: 100%;
background-color: #eae8e8;
border: none;
outline: none;
text-align: left;
padding: 17px 18px;
font-size: 18px;
color: #312e2e;
cursor: pointer;
transition: background-color 0.2s linear;
border: 1px solid #e0dcdc;
text-shadow: 0 2px 0 #fffcfc;
border-bottom: 1px solid #c3c3c3;
>

button.kenodougou:after <
content: ‘\f055’;
font-family: «fontawesome»;
font-size: 14px;
float: right;

button.kenodougou.is-open:after <
content: ‘\f056’;
>

button.kenodougou:hover, button.kenodougou.is-open <
background: linear-gradient(to top, #bfb7b5 20%, #eaeae3 50%, #dcd7cd 80%);
>

.vanusebo-videnod <
background-color: #ffffff;
border-left: 1px solid rgb(210, 209, 209);
border-right: 1px solid rgb(220, 209, 209);
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
border-bottom: 1px solid #aba3a3;
>

var kenodougous = document.getElementsByClassName(«kenodougou»);

for (var i = 0; i 2019-06-19 Загрузок: 3 Просмотров: 2900 Комментарий: (0)

Источник

Аккордеон меню

Аккордеон представляет собой список с раскрывающимся содержимым (рис. 1). Удобен для создания больших меню из-за компактности, а также для блоков вопросов и ответов. Название произошло от музыкального инструмента, который напоминает своим видом.

Рис. 1. Вид аккордеона

Есть два типа аккордеон-меню.

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

Поскольку аккордеон своей работой напоминает вкладки, то мы можем использовать тот же самый код HTML, что и при создании вкладок (пример 1). Для первого типа аккордеона вставляем , который позволяет выбрать лишь один пункт, а для второго типа — с его помощью можно раскрывать и закрывать произвольное число пунктов.

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

Не забудьте, что для каждого надо добавить своей уникальный id , а его значение затем вставить в атрибут for у расположенного ниже элемента .

Алгоритм создания аккордеона повторяет шаги при создании вкладок. Сперва мы прячем и содержимое через свойство display со значением none .

Затем с помощью псевдокласса :checked показываем содержимое, задавая свойству display значение block .

Для разнообразия справа от заголовка добавим символ плюса, он будет показывать пользователю что пункт раскрывается; при открытии пункта символ плюса меняем на минус. Оба действия делаются через псевдоэлемент ::after и свойство content, в значении которого пишем текст. При желании плюс и минус можно поменять на что-то другое, к примеру, на стрелки.

Чтобы пользователь понимал, что на пункты списка можно щёлкать, изменим вид курсора на «руку» при наведении на заголовок.

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

Пример 2. Создание аккордеона

Под HTML5 обычно подразумевают два разных понятия:

Это язык разметки документа, пришедший на смену HTML4 и XHTML.
Это набор веб-технологий, позволяющий делать на сайте всякие интересные штуки.

Источник

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

Сегодня мы создадим на чистом JS коде – меню аккордеон с тремя секциями, при клике на которые, будет открываться панель с текстом, а при втором клике обратно закрываться.

Меню аккордеон обычно используют для блока часто задаваемых вопросов.

Демонстрация меню аккордеон.

HTML структура

Создадим 3 кнопки с классом accordion, ниже которых поместим дивы с классом panel. Внутри блоков, будут параграфы с текстом.

Ответ на Вопрос 1.

Ответ на Вопрос 2.

Ответ на Вопрос 3 .

Картинка пока невзрачная, добавим стилей и спрячем секции с текстом.

CSS код

Стилизация кнопок, которые используются для открытия и закрытия панели аккордеона.

.accordion <
background-color: #cfd8dc;
color: #fff;
… >

При наведении курсора на кнопку и при клике по ней, будет меняться цвет фона. Для смены цвета при клике, мы повесим на функцию в JS класс active.

.active, .accordion:hover <
background-color: #607d8b;
>

Стилизация блоков с текстом (ответы на вопросы). По умолчанию эти блоки спрятаны за счет нулевого свойства максимальной высоты.

JS код

Объявим две переменные, первая переменная будет получать элемент по названию класса accordion. Вторая переменная с названием i.

var acc = document.getElementsByClassName(«accordion»);
var i;

В цикле for, мы перебираем весь массив элементов с классом accordion, то есть будут выводиться все заголовки.

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

Метод toggle добавляет и удаляет класс active для замены цвета кнопки, управляющей панелью.

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

var panel = this.nextElementSibling;

Для раскрытия, спрятанных блоков с текстом (эффект аккордеона), надо менять максимальную высоту, в зависимости от высоты панели на разных размерах экрана. Сначала делаем проверку, если значение максимальной высоты в стилях для блока с классом panel, равно нулю, то новая максимальная высота станет больше на энное количество пикселей, в зависимости от размера экрана у пользователя.

if (panel.style.maxHeight) <
panel.style.maxHeight = null;
> else <
panel.style.maxHeight = panel.scrollHeight + «px»;
>
>);
>

Добавление иконок

Для наглядности все кнопки следует снабдить символами, где символ плюс указывает на сложенный аккордеон, а минус – на раскрытый. При клике на кнопку, знак плюс меняется на знак минус.

Это подходящий случай для применения псевдокласса after. Код для content, можно найти в таблице символов Юникода.

.accordion:after <
content: ‘\002B’; /* Код Юникода для символа «плюс» (+) */
color: #fff;
font-size: 18px;
float: right;
margin-left: 4px;
>

.active:after <
content: «\2212»; /* Код Юникода для символа «минус» (-) */
>

Меню аккордеон надо использовать на сайтах, в целях экономии места и удобства получения информации.

На CodePen вы можете увидеть весь код меню аккордеон на чистом JS, который можно скачать и использовать в своих проектах.

Хотите научиться создавать на чистом JS больше интерактивных компонентов? Вам поможет замечательный видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

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

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник

Как сделать — Складывающийся/Аккордеонный контент (Меню-аккордеон)

Узнайте, как создать меню-аккордеон (складывающийся контент).

Аккордеон

Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого количества контента:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Источник

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
Будет доступно управление элементами с клавиатуры и других устройств.
Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
Работает при выключенном javascript.

Минус:

Старые браузеры не знают таких тегов и не будут скрывать информацию.

HTML:

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

К сожалению, у дефолтного маркера есть два недостатка:

Старые браузеры его не видят.
Вебкит баузеры не позволяют менять символ маркера.

По этой причине, дефолтный маркер надо спрятать и создать свой.

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

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

Анимация маркера при помощи transform: scale(1,-1);

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

Svg маркер + анимация поворота:

Summary:before пришлось серьезно переделать:

Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
Картинку вешаем при помощи background.

Так же нужно у summary поставить отступ padding-left: 1.5em, чтоб текст и иконка не накладывались друг на друга.

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Svg маркер справа + эффект зеркального поворота стрелки:

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

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

Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник