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


Содержание

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

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

В этой статье я познакомлю Вас с вертикальным меню (для сайтбара) с выпадающим списком, по другому accordion. Сделано меню на jQuery и состоит всего из двух файлов. Очень нужная фишка, особенно для интернет-магазинов и сайтов с большим количеством разделов и подразделов. Замечу также, что навигации на сайте нужно выделять намного большее внимание нежели дизайну и всему остальному. Ведь именно через навигацию пользователь находит нужную ему информацию.

Сейчас я в подробностях опишу как вставить такое меню к Вам на сайт. Для этого сначала выделите место для это меню. Сдейлате два блока, один поменьше в ширину, другой побольше. В котором побольше места — это часть контента, где поменьше — там будет вертикальное меню. Хватит всего 200 пикселей (конечно если у вас не такие длинные названия разделов). Итак, приступим:

Шаг 1. Скачайте архив

Архив весит всего 8КБ и состоит из двух файлов: index.html (отвечает за html код и вывод меню) и menu.css (отвечает за стили меню).

Шаг 2. Залейте файл menu.css

При помощью ftp клиента или файл-менеджера залейте файл menu.css в папку с вашими стилями или прямо в корень сайта, что я не советую делать. Вы можете переименовать файл по своему вкусу

Шаг 3. Пропишите путь к стилям и скриптам

Далее зайдите на страницу (или шаблон), где у Вас будет работать это меню accordion и в блоке после пропишите следующий код:

Это путь до файла menu.css, так что внимательно пропишите этот путь, если у Вас css файл лежит где-то в папкет. Например, если menu.css лежит в папке css, то путь до него будет такой:

Также нужно подключить библиотеку jQuery:

И прописать, исполняющий открытие подразделов, javascript код:

Шаг 4. Вставьте html код меню

Осталось только вставить html код самого вертикального меню:

И подключать его к плагину меню, если вы работаете на CMS или прописывать в ручную разделы вашего сайта.

JQuery плагин вертикального аккордеон меню для блога WordPress

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

Плагин

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

Процесс создания аккордеона

Процесс разработки вертикального аккордеона будет состоять из:

  • создания HTML разметки;
  • описания его внешнего вида с помощью CSS;
  • написания логики на JavaScript.

Дизайн аккордеона (скриншот):

HTML код аккордеона и его описание

Аккордеон (accordion) состоит из элементов (accordion-item). Каждый элемент в свою очередь включает в себя заголовок (accordion-item-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show . Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

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

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content , т.е. содержимого .

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none ). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show , который необходимо добавить к его родительскому элементу (accordion-item).

Илон Маск рекомендует:  Что такое код bzopen

JavaScript код аккордеона

Сценарий (логика) аккордеона:

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

Аккордеон, заголовки которого отделены друг от друга

Скриншот аккордеона, элементы которого отделены друг от друга с помощью отступа:

CSS, добавляющий к элементам аккордеона отступы снизу ( margin-bottom ):

Аккордеон с анимацией появления

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

Стили аккордеона, включающие в себя анимацию (для отображения содержимого):

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

Пример настройки аккордеона в качестве вертикального меню.

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

CSS и JavaScript:

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

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

HTML, CSS и JavaScript код многоуровневого меню:

Free jQuery Accordion menu Plugins

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


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/2020 — Menu — 231 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/2020 — Menu — 1944 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/2020 — Menu — 13275 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/2020 — Menu — 9750 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.

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

Возможно вы хотели посмотреть все выпадающее меню на этом сайте, тогда перейдите по ссылке.

Навигация по странице:

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

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

К позитивным можно отнести:

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

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

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

Делать или не делать выпадающее меню, это ваше решение, моя ж задача показать вам способы создания меню аккордеонов.

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

к менюДля начала, нам потребуется нехитрый HTML код для построения вертикального меню. Выглядит он будет вот так:

Это само меню, оно идеально подходит под вывод меню в WordPress. Также нам нужно не забыть подключить библиотеку jquery к нашему хтмл документу. В примере я это делаю вот так:

Хотя существуют и другие способы подключения. Например в вордпресс, эта библиотека javascript подключается по умолчанию и эта строчка будет лишней.

Наше вертикальное меню аккордеон имеет класс current-menu-item который отвечает за показ пункта меню в развернутом вида, когда открыта нужная страница. Если ваша CMS делает другие классы для активных пунктов меню не строить расстраиваться, я покажу в CSS и JavaScript места, где нужно внести изменения.

Илон Маск рекомендует:  Отладка PHP программ

Готовый пример вы сможете скачать чуть ниже.

CSS для меню аккордеон

к менюДалее нам нужно написать стили CSS для создания меню аккордеона. Ничего сложного, главное понимать что у нас получится в итоге.

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

Раскрывающееся вертикальное меню аккордеон CSS:

Внимательно смотрим на последнею строчку, там есть current-menu-item, если ваша цмс использует другое имя класса, для подсвечивания активного пункта, нужно заменить на свое имя.

Раскрывающееся меню аккордеон JavaScript & jQuery

к менюДля создания нашего меню нам потребуется создать и подключить файл javascript. Код этого файла будет отвечать за добавления события клик (onclick) по пункту меню.


Вот собственно код:

Опять обращаю ваше внимание на предпоследнею строчку

Ну на этом собственно и все, наше простое меню аккордеон готово. Ниже вы можете посмотреть скриншоты, демо, а также скачать пример. (Смотрите кликабельный скин)

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

Практически все, кто работал с шаблонами, знакомы с аккордеоном, поскольку этот элемент в значительной мере помогает оснащать страницы какими-то дополнительными материалами из разных категорий сайта. Но как насчет того, чтобы все пункты меню, которые были вами созданы изначально, умели складываться таким же образом, как и вышеуказанный модуль? Именно функцию сворачивания всех пунктов, обеспечивает Joomla аккордеон меню, и предлагает сделать даже самые мощные системы этого элемента, максимально компактными. Помимо этого, вы сможете теперь использовать ряд настроек, которые приблизят формат и дизайн этого элемента к общему виду проекта. Мало кто от этого откажется, ведь настройка расширения элементарна, а польза от такой «фишки» большая, поскольку освобождается место для других блоков, более масштабных.

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

Для всех типов меню, будут предлагаться настройки цвета. Что характерно, вы сможете выбирать гамму для основного блока, а также дополнительный цвет для выплывающих подпунктов. Помимо того, корректируется текст, которым подписаны сами пункты, а загрузка типов идет из списка шрифтов Google, и вам остается лишь верно вписать одно из наименований. Есть небольшая хитрость, с помощью которой добавляются эти шрифты, в конце наименования нужно просто вписать значок «+», и тогда все будет сделано мгновенно.

«Разработчик Jextensions предусмотрел еще и разную анимацию для этого меню. В первом случае весь список будет просто разворачиваться, как в стандартном аккордеоне, а вот во втором, каждая вкладка сможет разворачиваться при наведении курсора отдельно. Либо ручной формат, либо автоматика – вариант для каждого свой. Самое важное, что все пункты меню Joomla, будут размещаться компактно, быстро разворачиваться и столь же успешно скрываться. Это великолепная альтернатива емким меню, которые занимают значительную часть страницы, что не всем нравится».

Быстрый запуск

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

Как использовать «аккордеон»-меню для мобильной версии лендинга?

Раскрывающееся меню (accordion menu) способно сэкономить место на экране мобильного устройства, однако у него есть и «побочные эффекты». Например, элемент может дезориентировать пользователя, заставив его прокручивать страницу до конца. Но, зная некоторые «фишки», можно создать удобный во всех отношениях пользовательский интерфейс.

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

Пример с сайта Tommy.com: фильтр по цене сделан в виде раскрывающегося меню, которое при нажатии сдвигает контент вниз.

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

Почему стоит использовать раскрывающиеся списки в мобильном дизайне?

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

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

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

Сайт Всемирного Фонда дикой природы: на странице мы видим разделы один над другим

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

Как можно решить эту проблему? Хорошо разработанная страница сразу объясняет, куда вы попали и что можете здесь найти.

Три основных преимущества аккордеон-меню

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

Существует несколько способов реализации метода: вторая навигационная панель (navigation bar), дополнительное меню или выпадающий список. Но самым элегантным решением будет именно «аккордеон». Так вы займете минимальное пространство и удержите пользователя на сайте.

Взглянем на ресурс Webmd. Здесь такие списки реализованы именно в форме «гармони» (справа). Но, к сожалению, по умолчанию заданы следующие настройки: первый список открывается (слева) и блокирует обзор остального контента. Некоторые посетители могут подумать, что здесь можно найти информацию только о профилактике наркомании.

Метод можно применить не только для структурирования контента, но и для контакт-форм на лендинге. Раскрывающиеся и зарывающиеся списки не будут перегружать экраны (ведь длинные формы очень неудобны владельцам смартфонов).

Кроме того, пользователям не придется многократно загружать страницу.

Сайт Skinnyties: форма для оформления заказа выполнена в стиле аккордеон-меню, что позволяет пользователям видеть весь контент без трения по вине чересчур длинных форм.

Минусы «аккордеон»-списков

Метод имеет явные преимущества для мобильных версий сайта: он позволяет перенести второстепенный контент на другие страницы. Но стоит признать, что подобные списки могут вызывать существенные юзабилити-проблемы.

Когда пользователи разворачивают «аккордеон», список может быть сдвинут в верхнюю часть экрана (как в примере ниже), чтобы увеличить пространство для просмотра контента выбранного раздела.

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

Сайт WebMD.com: когда пользователь выбрал «Побочные эффекты» (Side Effects) из списка, содержимое отодвигается наверх, создавая впечатление, что это новая страница.


Дабы предотвратить путаницу и позволить клиентам быстро возвращаться к просмотру всего списка, примените вместо кнопки «Назад» функцию «Свернуть». Если последним действием было разворачивание списка, то он просмотрит его и закроет без перехода на предыдущие страницы.

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

Прокрутка до следующей опции

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

Иногда контент одного из разделов списка может быть довольно внушительным по размеру, в таких случаях не обойтись без кнопки «Закрыть». В приведенном ниже примере из Википедии вкладка «История» (History) содержит очень много информации, и если читатель захочет перейти к другому разделу, ему придется проскроллить до самого конца, дабы найти следующий список или вернуться в самое начало.

Сайт Wikipedia.org: Нажав на вкладку «История» из списка, мы видим релевантный контент. Но если пользователь решит прервать чтение и найти другую подтему, ему приходится лишний раз прокручивать всю страницу вниз или вверх.

В подобных ситуациях незаменим такой элемент списка как кнопка «Закрыть», которая упростит поиск и избавит пользователя от лишних усилий. Чтобы решить проблему излишней прокрутки при навигации по мобильной версии сайта, Zappos в своем приложении для Android активировал кнопку «Свернуть». Так любой пользователь мог легко закрыть список и вернуться подбору фильтров.

Пользователям англоязычных сайтов повезло меньше: после тестов выяснилось, что мало кто понимает смысл этой кнопки. Разработчики использовали термин «collapse», который у обычных пользователей ассоциировался с негативными смыслами вроде «обвал» и «крушение».

Илон Маск рекомендует:  Идеальная служба информационной безопасности

Zappos для Android: фильтр по брендам сделан в формате аккордеона (cлева). После того, как список открылся, можно нажать кнопку «Свернуть» (Collapse) и вернуться к полному списку (справа).

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

Сайт Amazon.com: заголовок списка «Размер обуви» закрепился после того, как пользователь начал пролистывать размеры. Этот элемент дизайна позволяет быстро закрыть гармошку и перейти к следующей опции.

Делаем выводы

Раскрывающиеся списки — отличный дизайн-инструмент мобильных версий лендинга, позволяющий «уплотнить» контент в ограниченном пространстве. Благодаря этому пользователи видят всю структуру ресурса и могут сосредоточиться на содержании, а не на деталях.

Но если вам нужно много текстовой информации, то не заставляйте пользователей прокручивать всю страницу, чтобы свернуть список или перейти к другому разделу. Так вы только дезориентируете пользователя. К счастью, подобные юзабилити-проблемы «лечатся» небольшими корректировками макета.

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

Меню в формате «аккордеон» отличается от обычных списков тем, что при нажатии на пункт раскрывается дополнительная информация или ещё один список. Такая форма предпочтительней, поскольку без необходимости не загромождает экран. Эта отличительная характеристика аккордеонного меню особенно актуальна, если сайт просматривают через мобильные устройства.

Сегодня существует множество модулей и компонентов, которые позволяют создать подобный тип меню, но не все из них имеют типичный вид. В истинном понимании аккордеон среди компонентов джумла встречается лишь среди modules для вывода контента (например, sp accordion). Так называемые «мобильные» представляют собой одну кнопку, при нажатии на которую раскрывается всё меню. Более функциональные приложения позволяют добавлять пользовательское описание, которое отображается под заголовком (не раскрывается при нажатии, а видно сразу) или даже вставить модуль joomla. А некоторые разработки выводят раскрывающийся список с красивыми иконками.

Какой выбрать вам – станет ясно после нашего обзора. Представляем топ-6 аккордеон меню для joomla 3.

Модуль AccordeonMenuCK

Интересная разработка – позволяет не просто создавать меню аккордеон joomla, а создавать пункты с картинками, пользовательским названием и описанием, со ссылками. В пункт меню можно даже вставить module joomla. Приложение позволяет настроить анимированные эффекты – различные способы раскрытия подменю.

  • Поддерживает 3.х джумла (есть версии для 2.5).
  • Отзывчивый.
  • Бесплатный (версия free, на сайте разработчика можно найти пакет pro).

Возможности

  • Описание вставляем после названия ссылки, отделяя его двумя «слэшами» (//). Модуль можно загрузить по ».

Настройка

Скачаем установочный файл с портала joomla.org(https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/accordeon-menu-ck) и создадим меню. Для этого зайдем в модуль, перейдем сразу к вкладке Source (Источник).

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

Перейдём к эффектам, выберем один из множества эффектов перехода.

Зайдём во вкладку Styles. Если хотим выбрать один из 20 готовых шаблонов оформления, стоит установить плагин Params (достаточно выбрать наиболее подходящий для нашего шаблона, но можно произвести и более тонкие настройки стиля).

В следующей вкладке можно настроить границы, тень, отступы, углы и фон окна меню.

В других двух вкладках – стили ссылок разных уровней (1-го, 2-го и последующих).

Остальные параметры доступны после загрузки дополнительных патчей и плагина.

Получилось обычное меню, попробуем добавить описание, как советует разработчик. Для этого зайдём в менеджер меню, выберем то, которое у нас указано в качестве источника. Откроем первый пункт – Главная – и через двойной «слэш» пропишем описание. А в следующий пункт добавим модуль с помощью кода с идентификационным номером. Далеко не любой модуль можно вставить в аккордеонное меню таким способом, но некоторые всё таки работают внутри пунктов.


Разработчик предлагает получить дополнительные возможности по использованию меню «Аккордеон», скачав плагин Params или компонент «Голосование по JED». А чтобы лучше разобраться в возможностях Accordeon Menu CK, предлагает платно скачать всю документацию по модулю.

Расширение swMenuFree

Многофункциональное приложение: позволяет создавать выпадающее, адаптивное (в формате аккордеона) меню и гибридное (из названий материалов).

  • Данное приложение поддерживает joomla 2.5-3.х (есть версии для 1.5 и для 1.0).
  • Отзывчивое.
  • Бесплатное (версия free, на сайте разработчика можно найти пакет pro).

Обзор настроек и возможностей:

  • Несколько языковых пакетов, включая русский (к сожалению, не всегда срабатывает).
  • В настройках можно задать источник – меню из тех, что уже созданы стандартными способами либо «Usecontent» (Использовать только контент). В последнем случае необходимо также активировать гибридное меню.
  • Множество настроек для точечных изменений стиля (шрифты, оформление углов, границ, цвета, изображения, тень, границы).
  • Перед или после пункта меню можно поместить пользовательский код cssили html.
  • Функция предварительного просмотра (отображает последние изменения) – удобно при работе.
  • Настройки для «адаптивного» меню (отображение на мобильных устройствах в формате аккордеона).
  • Горизонтальная и вертикальная ориентация.
  • Интеграция с Virtuemart.
  • Обновляется до следующей версии без потери настроек.

Настроим меню и опубликуем через активацию соответствующего модуля.

Единственный минус расширения – отсутствие поддержки и демо (имеется лишь сложная видео инструкция не на русском языке).

Модуль Simple Responsive Menu

SRMenuавтоматически (при изменении размеров экрана, браузера) убирает все пункты, прячет их под одной кнопкой. Работает только на адаптивном шаблоне джумла.

Настройки

Настроить можно ширину экрана, при которой развернутое меню должно свернуться. А также указать место, где должна расположиться кнопка.

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

Приложение эффективно выполняет своё назначение и оправдывает название – Simple: настройка производится быстро.

Модуль Floating Buttons

Относится исключительно к разновидностям раздвижных меню: создает выпадающий список с иконками, представляет собой плавающую кнопку со значком (одном из 10 предустановленных), размещается, как правило, в нижнем правом углу страницы.

  • Имеется в свободном доступе (лицензия GPLv2).
  • Подходит для Joomla 3.x.
  • Адаптивный.


Скачаем здесь: https://extensions.joomla.org/extensions/extension/style-a-design/modules-panel/floating-buttons. Установим и зайдем в автоматически созданный модуль FloatingButtons. Здесь можно настроить стиль, цвета, иконку, разрешить показывать на всех устройствах, либо только на мобильных. А также прописать для каждого пункта заголовок, url, выбрать для них иконку и цвета.

Модуль JF Mobile Bar

Назначение модуля соответствует названию, но JFMobileBarбольше, чем меню для мобильных устройств – оно работает и на планшетах, и на смартфонах, и на ПК.

  • Последняя версия предназначена для joomla 3.x, предыдущая – 2.5.
  • Распространяется бесплатно.
  • Отзывчивый красивый дизайн.

Возможности и настройка

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

Цветовое оформление можно менять. Доступны иконки.

Поддерживает расширения для соцсетей – EasySocialи JomSocial (можно добавлять ссылки на профили). Но для них требуется установка спецмодулей.

Ссылка на установочный файл: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/jf-mobile-menu. Все настройки в первой вкладке модуля: источник, название меню, размеры, при которых будет отображаться аккордеонное меню, цветовое оформление, названия пунктов, иконки.

После настроек получаем одинаковый вид на компьютере, планшете и смартфоне (если в параметре Show on device указали All, а если любую из других настроек — на компьютере меню будет отображаться полностью, не аккордеоном).

После изучения наиболее популярных разработок становится ясно, что под accordion menu joomla чаще понимают «мобильные» меню, реже раскрывающиеся (ниспадающие) списки. При этом каждый модуль или компонент имеет свои плюсы и оказывается очень кстати на сайтах определённой тематики.

Модуль DJ-SelectMenu

Простая, но уникальная разработка. Позволяет выводить пункты списком (выпадающее меню).

  • Лицензия GPLv2 (free).
  • Адаптивный.
  • Для версий 2.5-3.х (последнее обновление в январе 2020 г.)

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

В примере представлены два варианта вертикального меню «Аккордеон».

В первом варианте, при клике на корневом пункте, показываются подменю второго уровня (если таковые имеются). Что бы их свернуть, требуется еще раз кликнуть на корневом пункте меню. Таким образом, можно сделать видимыми все скрытые пункты.

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

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

Первый вариант. Меню Аккордеон без автоматического закрытия подменю.

Вариант стилевого оформления:

Второй вариант. Меню Аккордеон с автоматическим закрытием неактивного подменю.

html и css код остается без изменений. Нужно только поменять id у родительского контейнера (ul), если предполагается разместить оба варианта на одной странице.

jQuery код для второго варианта (в примере оба меню размещены в одном документе):

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

Меню протестированы в IE 7-8-9, Chrome, Safari, Opera, FF и везде демонстрируют одинаковый результат.

Как сделать — аккордеон (разборный контент)

Узнайте, как создать аккордеон (разборный контент).

Аккордеон

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

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.

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.

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.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL