Меню аккордеон jquery: Вертикальное меню аккордеон на jQuery · Блог веб-студии Keengo

Важный момент: рубрики и подрубрики.

Если на Вашем блоге есть подрубрики к рубрикам, Вам нужно создать произвольное меню. Это нужно для того, чтобы плагин меню корректно их отображал и вообще работал.

Чтобы создать произвольное меню в WordPress Вам нужно зайти в Внешний вид, а затем в Меню. Далее нужно придумать название меню, выберите какое Вам понравится:-) после нажимаем на кнопочку Создать меню.

Когда меню будет создано нужно будет выбрать его элементы, в нашем случае это будут рубрики. Ниже будет не большое окошко с рубриками, в этом окошке нужно будет выбрать вкладку Все, затем нажать Выделить все, а после нажать Добавить в меню. Теперь давайте посмотрим что у меня получилось с рубриками на beloweb.ru.

Теперь нужно создать подрубрики. В данном случае у рубрики 

После того ка Вы сделаете этот шаг, плагин JQuery Accordion Menu Widget будет работать.

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

javascript — Открыть закрыть секцию по клику, при этом закрыть другие если они открыты

Задать вопрос

Вопрос задан 2 года 8 месяцев назад

Изменён 2 года 8 месяцев назад

Просмотрен 1k раз

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

Надеюсь не сильно мудрено написал

• javascript
• accordion

0

Это называется аккордеон (accordion) или collapsible:

const handleClick = event => {
  const divs = document.querySelectorAll("div")
  const target = event.target.nextElementSibling
  target.classList.toggle("hide")
  divs.forEach(item => {
    if (item !== target) {
      item.classList.add("hide")
    }
  })
}
document.querySelectorAll("button").forEach(item => {
  item.addEventListener("click", handleClick)
})

 button {
  display: block;
}
.hide {
  display: none;
}

<button>Кнопка 1</button>
<div>Контент 1</div>
<button>Кнопка 2</button>
<div>Контент 2</div>
<button>Кнопка 3</button>
<div>Контент 3</div>

jQuery:

const handleClick = event => {
  const $target = $(event.target).next()
  $target. toggleClass("hide")
  $("div").each(function() {
    if ($(this)[0] !== $target[0]) {
      $(this).addClass("hide")
    }
  })
}
$("button").on("click", handleClick)

button {
  display: block;
}
.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Кнопка 1</button>
<div>Контент 1</div>
<button>Кнопка 2</button>
<div>Контент 2</div>
<button>Кнопка 3</button>
<div>Контент 3</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

10 лучших компонентов меню «гармошка» в jQuery/JavaScript/CSS (обновление 2023 г.

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

Первоначально опубликовано 19 мая 2019 г., обновлено 15 февраля 2023 г.

Содержание:

• Плагины jQuery Accordion Menu
• Библиотеки аккордеонного меню Vanilla JS
• Аккордеонные меню на чистом CSS

Плагин jQuery Accordion Menu для Bootstrap 4/3 — metisMenu

metisMenu — это простой плагин jQuery меню для Bootstrap 3, который поможет вам создать сворачиваемое меню с анимированными эффектами аккордеона и поддержкой автоматического свертывания.

[Демо] [Скачать]

Вертикальное аккордеонное меню в стиле Bootstrap с jQuery и CSS3 — bs_leftnavi

Плагин jQuery для создания вертикального навигационного меню в стиле Bootstrap, которое позволяет разворачивать/сворачивать категории меню с эффектами плавного скольжения.

[Демонстрация] [Скачать]

Выпадающее меню Super Smooth Accordion с использованием jQuery и CSS3

Создание выпадающего меню в стиле аккордеона с использованием переходов и преобразований jQuery и CSS3.

[Демо] [Скачать]

Отзывчивый и многоуровневый плагин аккордеонного меню

Простой плагин jQuery для создания многоуровневого и полностью адаптивного меню-аккордеона (выпадающего списка) из любых вложенных элементов HTML.

[Демо] [Скачать]

Анимированное вертикальное аккордеонное меню с jQuery и CSS3 — mtree.js и переходы CSS3.

[Демо] [Скачать]

Vanilla JS Accordion Menu Библиотеки:

Overlay Accordion Menu For Bootstrap 5

Оверлейная система навигации для Bootstrap 5, которая позволяет кнопке-гамбургеру переключать боковое меню, скользящее от левого края экрана.

[Демо] [Скачать]

Вложенное аккордеонное меню с Vanilla JS

Скачать демо

Анимированное многоуровневое аккордеонное меню, построенное с вложенным навигационным списком и ванильным JavaScript.

Аккордеонные меню Pure CSS:

Многоуровневое меню-гармошка с простым HTML и CSS

Простой подход Html5/CSS3 к созданию многоуровневого скользящего меню-гармошки из вложенных html-списков. Он использует хаки с флажками и ярлыками для переключения иерархических меню и несколько свойств CSS3 для плавных эффектов скольжения.

[Демо] [Скачать]

Простое меню-гармошка с переходами CSS3

Простое меню навигации-гармошки, созданное только с помощью CSS и анимированное переходами CSS3.

[Демонстрация] [Скачать]

Оптимизированное для SEO меню-аккордеон на чистом CSS/CSS3

Гладкое, семантическое, оптимизированное для SEO меню-аккордеон (выпадающее меню), построенное с использованием неупорядоченного списка HTML и CSS/CSS3.

[Демо] [Скачать]

Вывод:

Ищете дополнительные плагины jQuery или библиотеки JavaScript для создания потрясающих меню-аккордеонов в Интернете и на мобильных устройствах? Дополнительные сведения см. в разделах jQuery Gauge и JavaScript/CSS Gauge.

См. также:

• Лучшие компоненты аккордеона на чистом JavaScript и CSS
• Лучшие слайдеры-аккордеоны на JavaScript или чистом CSS
• Лучшее адаптивное выпадающее меню
• Лучшие адаптивные меню jQuery Плагины
• Лучшие плагины кругового меню
• Лучшие системы мегаменю
• Лучшие мобильные меню вне холста
• Лучшая плавающая кнопка действия (всплывающее меню) Плагины

Аккордеонное боковое меню с CSS и jQuery — CodeHim

3 апреля 2023 г. 1 апреля 2023 г.

Поделись этим:

Фрагмент кода:
Автор:
Опубликовано:	1 ​​апреля 2023 г.
Последнее обновление:	3 апреля 2023 г.
Загрузок:	12 421

Подробнее

Легкое (около 2 КБ), простое, но привлекательное меню боковой панели с плоским дизайном, созданное с помощью CSS и jQuery. Полезно разместить навигационные ссылки на вашем сайте или использовать как аккордеон общего назначения. В меню аккордеона используется значок со стрелкой шрифта Awesome с расширяемыми элементами.

Кроме того, вы можете полностью настроить это меню (с дополнительным CSS) аккордеоном под свои нужды.

Обзор плагина

Плагин:	Вертикальный Sidenav Отзывчивый
Автор:	Феликс Верас
Лицензия:	Лицензия Массачусетского технологического института
Опубликовано:	1 ​​апреля 2023 г.
Репозиторий:	Форк на GitHub
Зависимости:	jQuery 1.3.1 или последняя версия и Font Awesome 4
Тип файла:	zip-архив (HTML, CSS и JavaScript)
Размер упаковки:	4,49 КБ

Скачать демоверсию

Как сделать аккордеонное боковое меню

1. Прежде всего загрузите библиотеку jQuery JavaScript и

2. Теперь также включите файл CSS и JavaScript Vertical Sidenav (из загруженного каталога проекта).

 css">
  

3. Создайте структуру HTML (как показано ниже) для меню после загрузки всех необходимых ресурсов.

<дел>

<ул>
Элемент 1
Элемент 2 
<ул> 
Подэлемент #1
Подэлемент #2
Подэлемент #3
Подэлемент #4


Элемент 3
Элемент 4 
<ул>
Подэлемент #1
Подэлемент #2
Подэлемент #3
Подэлемент #4


Элемент 5
Элемент 6
Элемент 7 
<ул>
Подэлемент #1
Подэлемент #2
Подэлемент #3
Подэлемент #4


Элемент 8