6 аккордеон меню Joomla 3.x/4 настройки и возможности

 

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

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

skin32 1

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

 

Модуль AccordeonMenuCK

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

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

Возможности

Ссылка: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/accordeon-menu-ck.

  • Описание вставляем после названия ссылки, отделяя его двумя «слэшами» (//). Модуль можно загрузить по ID (в заголовок ссылки): [modid=IDOFMODULE].
  • Изображение можно вставить с текстом или без него.
  • На одной странице можно разместить множество меню формата аккордеон.
  • Уровень вложенности может быть разный (количество не ограничено).
  • Работать с СЕО меню можно через CSS.
  • Множество предустановленных тем (с плагином Params) и возможность изменения стиля оформления.
  • Пункты меню с описанием и кнопкой далее можно создать из статей, проранжированных по дате, из статей определенной категории, из контента популярных компонентов (см. далее).
  • Интеграция с Flexicontent, Hikashop (с соответствующим патчем), Virtuemart (скачав патч).
  • Специальное меню для мобильных приложений (доступно после установки отдельного модуля).
  • Для сайтов на joomla предусмотрена дополнительная возможность для вывода: не только с помощью модуля, но в любом месте шаблона с помощью спецпозиции – «ici ‘maximenuCK’».

Настройка

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

skin32 16

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

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

skin32 17

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

skin32 18

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

skin32 19

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

skin32 20

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

skin32 21

skin32 22

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

skin32 23

skin32 24

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

 

Расширение swMenuFree

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

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

Страница для скачивания: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/swmenu.

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

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

skin32 2

skin32 3

  • В настройках можно задать источник – меню из тех, что уже созданы стандартными способами либо «Usecontent» (Использовать только контент). В последнем случае необходимо также активировать гибридное меню.

skin32 4

skin32 5

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

skin32 6

  • Перед или после пункта меню можно поместить пользовательский код cssили html.

skin32 7

  • Функция предварительного просмотра (отображает последние изменения) – удобно при работе.

skin32 8

  • Настройки для «адаптивного» меню (отображение на мобильных устройствах в формате аккордеона).

skin32 9

skin32 10

  • Горизонтальная и вертикальная ориентация.

skin32 11

  • Интеграция с Virtuemart.
  • Обновляется до следующей версии без потери настроек.

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

skin32 12

skin32 13

skin32 14

skin32 15

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

 

Модуль Simple Responsive Menu

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

  • Бесплатный.
  • Отзывчивый.
  • Для joomla 3.x.

Настройки

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

Скачиваем здесь: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/simple-responsive-menu. Открываем модуль, активируем, настраиваем.

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

skin32 25

skin32 26

skin32 27

skin32 28

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

 

Модуль Floating Buttons

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

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

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

skin32 30

skin32 31

skin32 32

Модуль 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. Все настройки в первой вкладке модуля: источник, название меню, размеры, при которых будет отображаться аккордеонное меню, цветовое оформление, названия пунктов, иконки.

skin32 33

skin32 34

skin32 35

skin32 36

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

skin32 37

 

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

 

Модуль DJ-SelectMenu

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

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

Скачиваем: https://extensions.joomla.org/extension/dj-selectmenu. Настройка максимально простая – выбираем меню из списка готовых, выбираем, как открывать (в новом или в том же окне).

skin32 29