Меню с выпадающим списком позволяет наглядно отразить структуру сайта, а также служит отличным навигатором по веб-ресурсу. Поэтому так популярны сторонние разработки со множеством дополнительных настроек и полезных функций (отображение картинок, иконок, описаний и даже вывод некоторых модулей джумла прямо в пункте меню).
Создание выпадающего меню в joomla 3
Но прежде чем перейти к топ-листу из 7 лучших модулей выпадающего меню для joomla 2.5/3.х/4, изучим стандартные возможности CMS.
Чтобы сделать выпадающее меню в joomla 3, в существующем необходимо создать новые пункты, задав им родительский элемент (т.е. пункт, по отношению к которому новый станет вложением). Родителя выбирают из ранее созданных пунктов. Выпадающий список появится на сайте, если это предусмотрено шаблоном joomla.
Создание выпадающего меню в joomla4
Выпадающее меню в джумла 4 создаётся по тому же принципу, только вместо выбора родителя приходится указывать его ID.
Прежде чем сделать подменю, создадим меню. По умолчинию в CMS создано mainmenu и один единственный пункт – Home. Создадим новые родительские элементы, а затем дочерние пункты. Посмотрим результат на сайте.
По умолчанию mainmenu стоит в позиции right и модуль отображает все пункты, дочерние отличаются лишь шрифтом меньшего размера. Найдём этот модуль (через меню-связанный модуль) и поменяем настройки.
Если в параметре модуля End Level выбрать вместо All – 1 или 2, будет отображаться только пункты 1-го или 1-го и 2-го уровня. Попробуем отключить опцию Show Sub-menu Items. Меню будет отображаться в формате аккордеон: под первым пунктом будет высвечиваться ниспадающий список, а под другими нет; при нажатии на второй пункт первое подменю закроется, откроется второе.
Как видим в стандартном шаблоне джумла 4 выпадающего меню не предусмотрено, но есть многоуровневое и аккордеонное.
Maxi Menu CK
Популярная и действительно достойная внимания разработка – не зря именно её мы описываем первой.
Модуль позволяет выводить фиксированные и плавающие меню, с пользовательским описанием, картинками, дополнительными столбцами и даже встраивать в пункты меню модули. Аналог – Accordeon Menu CK.
- Отзывчивый (iPad, Android, iPhone).
- Для CMSJoomla 3.x.
- Бесплатный.
Возможности
- Эффекты для выпадающего списка.
- Можно добавить описание, изображение, иконку, модуль.
- Горизонтальная или вертикальная ориентация.
- Несколько на одной странице.
- Интеграция с популярными расширениями джумла (Virtuemart, Adsmanager, Hikashop, Joomshopping).
- SEO оптимизация.
Настройка
Установочный файл найдём через портал джумла: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/maxi-menu-ck/. После установки увидим список возможностей:
- способ вставки описания (рядом с названием пункта меню ставим два «слэша», после которых введём текст).
- способ загрузки модуля – [modid=IDOFMODULE], например, [modid=185]. Можно вставить лишь некоторые (html, Breadcrumbs, LoginForm, модуль меню, некоторые сторонние приложения, например, форма обратной связи, слайдер).
- добавить новый столбец (или строка, в зависимости от ориентации меню), прописать ширину в пикселях – [col=180]. Перед этим «шорткодом» следует написать название столбца – будет отображаться как анкор (переход возможен на материал или веб-страницу – в зависимости от выбранного типа меню при создании этого пункта).
- отобразить изображение без текста, помещаем вместо заголовка [img].
Воспользуемся некоторыми из них. Создадим меню, которое выведем на сайт с помощью модуля MaxiMenuCK. Создадим пункты.
Зайдём в модуль и познакомимся с настройками. Определим ориентацию и позицию меню (фиксированное или плавающее, перетекающее в плавающее, верхнее меню или по низу), зададим размеры.
Вставим логотип, разместим его слева или справа, зададим ширину и высоту.
Модуль открывает множество возможностей для оформления сайта.
Дополнительно с этим меню разработчик предлагает установить:
- компонент и плагин Params (для настройки стиля меню);
- плагин Mobile (для настройки мобильной версии менюшки);
- пакет тем для Maximenu CK Params;
- патчиК2, Hikashop, Joomshopping, Virtuemart, AdsManager.
Ссылки на установочные файлы встроены в модуль.
ARI Ext Menu
Простой модуль с открытым кодом CSS, что позволяет настраивать меню «под себя». Аналог – ARI YUI Menu.
- Лицензия GPL (распространяется бесплатно).
- Работает на всех версиях джумла.
- Адаптивный (можно задать параметр auto для ширины).
Ссылка: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/ari-ext-menu/.
Чтобы активировать модуль, достаточно выбрать меню, задать ориентацию и опубликовать в нужном месте, на нужных страницах. Хотя имеется множество других настроек (цвета окна меню, пунктов активного и неактивного, вложенность).
Если в меню созданы подпункты, модуль выведет их в формате выпадающего списка.
SWMenu
Мощное расширение, позволяет создавать меню разного типа (выпадающее, гибридное – пункты создаются по названиям материалов joomla).
- Имеются версии free и pro.
- Адаптивное (подстраивается под размер экрана – на небольших сворачивается в кнопку с ниспадающим списком).
- Последнее обновление создано для джумла 2.5-3.х.
Возможности:
- встроен русский языковой пакет;
- интеграция с Virtuemart;
- в качестве источника можно выбирать меню либо контент;
- настраивается стиль окна и каждого пункта меню, отдельно – подменю;
- ориентация горизонтальная и вертикальная настраивается для меню и подменю;
- можно добавить код cssили html;
- есть кнопка «Предварительный просмотр»;
- можно настроить вид меню на мобильных устройствах.
Настройка
Скачиваем данное расширение: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/swmenu. Откроем компонент, выберем источник.
Чтобы настроить меню для мобильных устройств развернём ниспадающий список ResponsiveMenu. В открывшемся окне выберем «Показать кнопку «Открыть/закрыть меню», пропишем для неё текст.
Выберем ориентацию.
Попробуем поменять цвета, изменить углы.
Проверим результат с помощью опции «Предварительный просмотр».
Сохраним изменения и активируем модуль.
DJ-Menu
От стандартного меню джумла DJ-Menu отличается анимированными эффектами.
- Больше не поддерживает джумла 2.5, только 3.0-3.х.
- Адаптивное (работает на мобильных устройствах).
- Лицензия GPL, но продление платное.
Возможности:
- Вертикальное и горизонтальное направление для меню и подменю (следующего уровня).
- Эффекты Fade, Transition, Duration.
- Dремя задержки перед закрытием подменю/
- Есть поле для ввода ID, чтобы отображать несколько меню на одной странице.
Настройка
Модуль работает с MySQL ver. 5.1 + и библиотекой jQuery. Ссылка для скачивания: https://extensions.joomla.org/extension/dj-menu/. Зайдём в модуль, укажем источник меню, уровни отображения (по умолчанию стоят все). Можно сменить тему: при default получаем горизонтальное меню в темных тонах с выпадающим подменю, при смене на override from template– офорление будет зависеть от шаблона и места в шаблоне. Включим опцию «маленький экран» (Display SELECT for small screens) и изменим при необходимости ширину экрана, при которой меню будет сворачиваться в одну кнопку.
На вкладке CSS3 Animationsandscriptoptionsможно указать анимацию, прописать ID и время задержки закрытия подменю.
Roknavmenu
Позволяет сделать многоуровневое меню и отобразить на сайте в разных стилях (встроены разные темы).
- Распространяется бесплатно.
- Работает на joomla 3.х.
- Адаптивное (вытягивается по ширине экрана, на мобильных устройствах убирается в одну кнопку).
Возможности
Можно добавить:
- дополнительные строки в ссылки джумла,
- пользовательские параметры для определенного пункта меню,
- иконку,
- дополнительный столбец.
В модуле имеется и множество других настроек.
Настройка
Скачиваем архив: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/roknavmenu. Содержит модуль и плагин. Плагин по умолчанию включен, а модуль не создан. Перейдём в менеджер модулей, чтобы добавить его. В созданном модуле выберем источник меню, включим опцию «показывать подменю», выберем тему Fusion и настроим «под себя».
Выбрать анимационный эффект и задать продолжительность анимации сможем в последней вкладке.
Сохраним изменения и откроем сайт. Внешний вид меню будет зависеть от шаблона и точечных настроек.
BM CoolMenu
Главное преимущество модуля – возможности для оформления выпадающего меню (цвета фона и текста, цвет при наведении, углы, границы). Можно добавить фоновое изображение с помощью настройки css (например, фон с градиентом).
- Загрузка бесплатная.
- Работает с версиями джумла 2.5-3.х.
- Адаптивный (подстраивается по мобильные устройства).
Страница модуля на портале джумла: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/bm-cool-menu/. Модуль работает с jQuery и без неё.
Выбираем в модуле источник, уровни меню – стартовый и конечный, отмечаем «Да» напротив опции ‘Show Sub-menu Items’ (отображает пункты подменю). Настроим внешний вид: выберем цвета, подходящие шаблону, уберём границы.
Назначим позицию и сохраним.
DJ SelectMenu
Простой и быстрый способ добавить на сайт joomlaвыпадающее меню – модуль DJSelectMenu (не нужно делать точечных настроек, поскольку в нём всего две опции). Уникальность разработки состоит во внешнем виде – кнопка со списком выпадения. Модуль пригождается, если нужно предложить пользователям выбор услуг или категорий товаров. А также идеально подходит для сайтов, которые чаще посещают с мобильных устройств, чем с ПК.
- Распространяется бесплатно.
- Адаптивный.
- Для джумла версий 2.5-3.х.
Страница на портале joomla: https://extensions.joomla.org/extension/dj-selectmenu/ После установки открываем модуль, выбираем источник и способ открытия (в каком окне – в том же или в новом).