jquery vertical accordion menu

На чтение 10 мин. Опубликовано

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

Шаг 1-й. Разметка HTML

Обычная разметка с древовидным построением и с наличием тега для вывода иконок. Стоит обратить внимание лишь на один класс во второй строчке кода, класс green (зеленый). Именно этот класс определяет каким цветом будет меню. Чтобы изменить цвет достаточно, к примеру, указать класс red (красный), вместо зеленого. Всего цветов пять: blue (синий), green (зеленый), red (красный), white (белый), black (черный).

Шаг 2-й. Стили оформления CSS

Стилизация всех основный деталей, включая и самого меню.

Шаг 3-й. jQuery

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

All the Free jQuery Plugins about ‘Accordion menu’ are listed here.

Содержание
  1. Create Multi-level Expanding Navigation From Nested Elements
  2. S > 10/18/2019 — Menu — 267 Views
  3. SEO-friendly Vertical Accordion Menu With jQuery
  4. Mobile-friendly Navigation Plugin With jQuery — Ace Responsive Menu
  5. Vertical Expanding Navigation In jQuery — VerticalMenu
  6. jQuery Accordion Menu Plugin For Bootstrap 4/3 — metisMenu
  7. Dynamic Multi-level Menu Plugin With jQuery And JSON — json2menu
  8. Sl > 12/12/2018 — Menu — 1970 Views
  9. Mobile Accordion Menu With jQuery And CSS3
  10. Responsive & Multi-Level Accordion Menu Plugin
  11. Lightweight Collapsible Accordion Menu Plugin — collapsible
  12. jQuery Collapsible Navigation With Unlimited Nesting — edlcCollapsibleNav
  13. Modern Off-canvas Accordion Navigation With jQuery — s > 03/04/2017 — Menu — 13304 Views
  14. Responsive Sl > 03/02/2017 — Menu — 9778 Views
  15. Cookie-enabled jQuery Accordion Menu Plugin — Auroramenu
  16. Lightweight jQuery Accordion Plugin With Smooth Animations — Woco Accordion
  17. Responsive Collapsible Toggle Menu Plugin With jQuery — eosMenu
  18. Vertical Accordion Menu Plugin For jQuery — Nav Accordion
  19. Multi-level Vertical Accordion Menu Plugin — lazeemenu
  20. Retina-ready Flipping Accordion Menu with jQuery and CSS3
  21. Pretty Accordion Menu with jQuery and CSS3 — MenuToggle
  22. Multilevel Accordion Menu Plugin For jQuery
  23. Smooth Multilevel Accordion Menu Plugin For jQuery — vmenu
  24. Create An Accordion Image Menu with jQuery & jQuery UI
  25. jQuery Plugin For Accordion Style Responsive Select Menu
  26. Super Smooth Accordion Dropdown Menu Using jQuery and CSS3
  27. Bootstrap Style Vertical Accordion Menu with jQuery and CSS3 — bs_leftnavi
  28. Collapsible Tree Menu Plugin with jQuery and CSS3 — Nxeed Tree Menu
  29. Animated Vertical Accordion Menu with jQuery and CSS3 — mtree.js
  30. jQuery Vertical Collapsible Menu with Multiple Transition Effects
  31. Create A Pretty Accordion Menu with jQuery and CSS3
  32. Animated Multi-Column Bottom Navigation with jQuery and CSS3 — rocker
  33. jQuery Multi Level Accordion Menu Plugin — Slight Submenu
  34. Lightweight jQuery Recursive Accordion Menu Plugin — Quiccordion
  35. jQuery Accordion-Style Image Menu Plugin
  36. Multilevel jQuery Accordion Menu Plugin — acxmenu
  37. Smooth Accordion Menu Plugin with jQuery — accordionMenu
  38. Accordion Menu with jQuery
  39. Плагин
  40. Установка плагина
  41. Настройки плагина
  42. Важный момент: рубрики и подрубрики.

Create Multi-level Expanding Navigation From Nested Elements

A really small jQuery navigation plugin that makes it easier to generate a multi-level, accordion-style, expanding/collapsing menu from nested HTML elements.

S > 10/18/2019 — Menu — 267 Views

A minimal clean semantic sidebar accordion menu for documentation websites or reading web applications. Built with jQuery, CSS, and nested HTML lists.

SEO-friendly Vertical Accordion Menu With jQuery

A responsive, semantic, SEO-friendly, multi-level, accordion-style sidebar (dropdown) navigation system written in jQuery, CSS and HTML unordered list.

Mobile-friendly Navigation Plugin With jQuery — Ace Responsive Menu

A lightweight, flexible, cross-browser, multi-level, mobile-friendly jQuery responsive menu plugin for your modern web project.

Vertical Expanding Navigation In jQuery — VerticalMenu

VerticalMenu is a small jQuery script to create a responsive vertical accordion navigation where the menu item will be expanded to the fullscreen when clicked/tapped.

jQuery Accordion Menu Plugin For Bootstrap 4/3 — metisMenu

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

Dynamic Multi-level Menu Plugin With jQuery And JSON — json2menu

json2menu is a jQuery plugin that dynamically renders a multi-level accordion menu using JSON, AJAX, and HTML unordered list.

Sl > 12/12/2018 — Menu — 1970 Views

A fancy jQuery & CSS powered hamburger navigation that reveals a vertical accordion menu sliding from the edge of the screen when activated.

Mobile Accordion Menu With jQuery And CSS3

A mobile-friendly hamburger toggle navigation built using jQuery/CSS that will slide in a multi-level, accordion-style expanding menu when toggled.

Responsive & Multi-Level Accordion Menu Plugin

An easy jQuery plugin to create a multi-level and fully responsive accordion menu (dropdown list) from any nested Html elements.

Lightweight Collapsible Accordion Menu Plugin — collapsible

collapsible is a jQuery plugin used to create a vertical collapsible or accordion menu that allows the visitor to open multiple (or single) menu items at the same time.

jQuery Collapsible Navigation With Unlimited Nesting — edlcCollapsibleNav

edlcCollapsibleNav is a jQuery/jQuery UI widget which allows you to create a vertical, accordion-style tree / navigation menu with CSS3 powered smooth expand/collapse animations.

Modern Off-canvas Accordion Navigation With jQuery — s > 03/04/2017 — Menu — 13304 Views

A simple and tiny jQuery plugin that helps you create a modern, mobile-friendly, off-canvas, sidebar accordion menu for your cross-platform webpages.

Responsive Sl > 03/02/2017 — Menu — 9778 Views

crbnMenu is a lightweight jQuery plugin for creating an accordion-style collapsible sidebar navigation with sub menus on your webpage.

Auroramenu is a super light jQuery plugin used for creating a vertical accordion menu from html unordered lists that has the ability to persist the open/close states using cookies.

Lightweight jQuery Accordion Plugin With Smooth Animations — Woco Accordion

A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.

Responsive Collapsible Toggle Menu Plugin With jQuery — eosMenu

eosMenu helps you create a responsive, multi-level, accordion-style menu where all the menu items will be collapsed into a dropdown toggle menu on small screens.

Vertical Accordion Menu Plugin For jQuery — Nav Accordion

Nav Accordion is a jQuery plugin that lets you generate a vertical, multilevel, collapsible accordion menu from a nested unordered list for your site navigation.

Multi-level Vertical Accordion Menu Plugin — lazeemenu

lazeemenu is a dead simple jQuery plugin used for generating a multi-level, vertical accordion menu from nested html lists.

Retina-ready Flipping Accordion Menu with jQuery and CSS3

A cool, themeable, retina-ready, jQuery based accordion menu that opens with an awesome 3D flipping effect using several CSS3 properties.

Pretty Accordion Menu with jQuery and CSS3 — MenuToggle

MenuToggle is a simple jQuery based vertical accordion menu that uses CSS3 transition for smooth toggle slide animations.

Multilevel Accordion Menu Plugin For jQuery

A nice, modern jQuery accordion plugin which gives you the ability to create a touch-enabled multilevel accordion menu with CSS3 powered expand / collapse animations.

Smooth Multilevel Accordion Menu Plugin For jQuery — vmenu

vmenu is a accordion menu plugin for jQuery/Zepto that generates a vertical, multi-level, expanding/collapsing navigation menu from nested Html lists.

Create An Accordion Image Menu with jQuery & jQuery UI

A jQuery & jQuery UI based accordion image menu that allows to smoothly expand & collapse images on mouse hover.

jQuery Plugin For Accordion Style Responsive Select Menu

A small (2kb) jQuery plugin that transforms a select list into a modern, smooth and fully responsive accordion menu for easier access.

Super Smooth Accordion Dropdown Menu Using jQuery and CSS3

Creating an accordion-style dropdown menu using jQuery and CSS3 transitions & transforms.

Bootstrap Style Vertical Accordion Menu with jQuery and CSS3 — bs_leftnavi

A jQuery plugin for creating a Bootstrap style vertical nav menu which allows you to expand/collapse menu categories with smooth slide effects.

Collapsible Tree Menu Plugin with jQuery and CSS3 — Nxeed Tree Menu

Nxeed Tree Menu is a simple jQuery plugin to create an accordion-style vertical tree menu that is collapsible and expandable with smooth sliding effects.

Animated Vertical Accordion Menu with jQuery and CSS3 — mtree.js

mtree.js is a jQuery plugin that enables you to create an animated vertical accordion menu based on jQuery velocity.js and CSS3 transitions.

jQuery Vertical Collapsible Menu with Multiple Transition Effects

A small jQuery plugin for creating a vertical collapsible menu that allows to expand and collapse sub-menus with multiple transitions.

Create A Pretty Accordion Menu with jQuery and CSS3

A nice-looking and animated animated accordion menu built on top of Font Awesome, CSS3 and a little jQuery script.

Animated Multi-Column Bottom Navigation with jQuery and CSS3 — rocker

rocker is a jQuery plugin for creating a responsive, mobile-friendly multi-column navigation menu sliding from the bottom of the web page.

jQuery Multi Level Accordion Menu Plugin — Slight Submenu

Slight Submenu is a jQuery accordion menu plugin that allows to expand/collapse sub menus with smooth transitions by using mouse events (click or mouse hover.)

Lightweight jQuery Recursive Accordion Menu Plugin — Quiccordion

Quiccordion is a simple and fast jQuery plugin for creating recursive accordion menus with smooth sliding effects.

jQuery Accordion-Style Image Menu Plugin

jQuery accordion image menu plugin allows you to create a Accordion-Style menu with image backgrounds.

Multilevel jQuery Accordion Menu Plugin — acxmenu

acxmenu is a lightweight, cross-browser, and search engine friendly jQuery plugin that allows you to create multilevel accordion menu with animated open and close actions.

Smooth Accordion Menu Plugin with jQuery — accordionMenu

accordionMenu is a lightweight and easy-to-use jQuery that enables you to quickly create accordion Menus with smooth collapse and expand effects on your web page.

Accordion Menu with jQuery

A jQuery Menu plugin that allows you to create a fancy accordion menu using jQuery.

Здравствуйте, дорогие читатели блога. В этот день расскажу Вам я про превосходный плагин, который создаёт на блоге WordPress классное меню аккордеон — JQuery Accordion Menu W >

Плагин

Плагин JQuery Accordion Menu Widget легок в установке и в использовании, к тому же очень функционален. В нем присутствует несколько тем оформления, цветов самого меню, а именно красное, синее, чёрное и серое. Соответственно это аккордеон меню вольётся практически в любой дизайн блога.

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

Ну а теперь давайте перейдём к процессу установки и настройки плагина.

Установка плагина

Теперь нужно, в админке блога, зайти во вкладку плагины, затем выбрать Добавить новый и в поле для поиска вписать JQuery Accordion Menu Widget далее нажать поиск.

Нужный нам плагин будет самый первый в списке. А под ним будет ссылка Установить плагин. После того как он установится нужный нам виджет появится во вкладке Внешний вид — Виджеты.

На рисунке выше я подчеркнул название самого виджета.

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

Настройки плагина

После того как виджет будет добавлен в сайдбар его можно будет настроить по Вашему вкусу. А именно выбрать цвет самого меню, тему оформления. Как будет открываться меню при наведении на него или при клике. Углубляться сильно в настройки не буду, они лёгкие и понятные.

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

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

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

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

Теперь нужно создать подрубрики. В данном случае у рубрики WordPress будет подрубрика Плагины. Для этого Плагины нужно перетащить чуть правее. Смотрите на рисунке ниже, что у меня получилось.

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

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

Оцените статью