2 разных мега меню категорий joomla настройка. Функции и параметры. Конкретные предложения по доработке меню

20.02.2019

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

Часть из представленных к обзору расширений подготовлены к работе на джумла 4 (покажем как устанавливать и настраивать). Список расширений составлен в соответствии с рейтингом на официальном портале CMS - joomla.org (по степени популярности того или иного расширения).

Меню статьи

(список рассмотреных компонентов меню)

Вертикальное, горизонтальное, аккордеон, многоуровневое, плавающее, адаптивное (в пл. вер.)

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

Вертикальное, горизонтальное, многоуровневое, статичное, адаптивное (во всю ширину экрана).

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

Навигационная кнопка, возвращающая в начало страницы. Обширный набор функций.

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

Горизонтальное, многоуровневое, статичное, адаптивное (аккордеон).

Вертикальное, горизонтальное, многоуровневое, статичное, адаптивное (аккордеон).

Панель инструментов для нижней части шаблона (для вывода иконок соцсетей или HTML-кода).

Навигационные кнопки, возвращающие вниз или вверх страницы.

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

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

Пункт этого меню прокручивает страницу до нужного места (якоря). Вертикальное, горизонтальное, многоуровневое, статичное.

Плавающее в правом нижнем углу меню в виде иконки, с выпадающим списком.

Вертикальное, статичное. Отображается в формате "дерева" или списка. Отображает структуру материалов, категорий, разделов в joomla.

Maxi Menu CK

Мощное приложение, позволяющее выводить различные типы меню joomla:

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

Главные особенности:

Распространяется бесплатно.
Совместим с джумла 3.х.
Работает на всех мобильных устройствах, есть опция - активировать адаптивный дизайн.

Функции

В пунктах могут быть вставлены не только заголовки, но и картинки, модули joomla, можно добавить к заголовку описание. Возможно создание дополнительных столбцов. Имеются встроенные эффекты для красивого вывода подменю. Интеграция с контентом Virtuemart, Adsmanager, Hikashop, Joomshopping, при условии установки дополнительных патчей (ссылки указаны в модуле). Изменить внешний вид можно с помощью множества готовых решений (устанавливаются также дополнительно пакет тем) или спецнастройками (дополнительный компонент и плагин MaxiMenuCKParams). Главное преимущество разработки - модуль SEO оптимизирован.

Работа с приложением

После установки с его помощью можно вывести на сайт любое созданное средствами CMS Joomla меню (достаточно сделать выбор в поле «Источник»).

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

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

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

Simple Responsive Menu

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

Адаптивность (при условии, что шаблон сайта также адаптивный).

Совместимость с джумла 3.х.

Установка, настройка, вывод на сайт

Ссылка для скачивания актуальной последней версии: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/simple-responsive-menu . Выбираем источник, например, mainmenu или создадим новое, специально под Simple Responsive Menu. Зададим пункт, который будет по умолчанию активным. Настроим уровни вложенности: по умолчанию с 1-го до последнего.

Перейдём в последнюю вкладку, где зададим параметры адаптивности:

Ширина экрана, при которой меню будет сворачиваться;

Место, где расположится кнопка.

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

Toolbar

Буквальный перевод - панель инструментов. Модуль создан для отображения фиксированного меню в нижней части шаблона (позиции debug), при прокрутке страницы остаётся на месте. Допустимо размещение иконок, например, соцсетей или HTML-кода.

Разработана версия для джумла 4 (работает на 2.5, 3.х).

Отзывчивый.

Назначение

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

Совместимость с последней версией Web357 Framework v1.7.х.

Установка на джумла 4, настройка

Скачиваем через официальный портал joomla.org: https://extensions.joomla.org/extensions/extension/social-web/social-display/toolbar// . Устанавливаем привычным методом. По завершении увидим сообщение об успешной установке.

Главное - задать позицию debug, выбрать где отображать - по верху или по низу («верхнее», «дно»), добавить либо код, либо картинку со ссылкой.

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

Page Scroll Buttons

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

Совместим с джумла 1.6-3.х. и 4.
Предоставляется бесплатно.
Адаптивный (работает на мобильных устройствах).

Функции

Главное предназначение - размещение навигационной кнопки в верхней или нижней части страницы.

Основные функции:

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

Активация

Скачиваем здесь (после регистрации на сайте разработчика): https://extensions.joomla.org/extensions/extension/structure-a-navigation/site-navigation/page-scroll-buttons. Устанавливаем, заходим, отключаем вывод заголовка или переименовываем, активируем, назначаем позицию, выбираем страницы, на которых выводить (по умолчанию назначено - «ни на одной»).

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

Сохраним изменения, проверим результат на сайте.

Menu Wrench

Menu Wrench - идеальный вариант для сайтов, где множество меню, пункты которых порой целесообразно объединять, выводить вместе. Позволяет создать навигацию из любых пунктов (не важно на какой «глубине» они находятся, какому меню джумла относятся).

Бесплатный.
Адаптивный.
Для джумла 2.5-3.х (последняя версия вышла летом 2014).

Возможности

Дочерние пункты можно выводить на том же уровне, что и «родитель». Можно выборочно выводить любые пункты из существующих.

Скачаем разработку с портала джумла: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/menu-wrench . Откроем для настройки: достаточно выбрать пункты и всё готово.

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

Оформление зависит от шаблона сайта (можно попробовать поменять стиль во вкладке «Дополнительные параметры»).

BM Cool Menu

Главное достоинство - множество опций для точечной настройки внешнего вида (цвета, текст, углы, границы). Плюс - открытый код CSS. Идеально подходит для отображения выпадающего списка.

Версия FREE.
Совместимость с joomla 2.5-3.х.
Отзывчивость (подстраивается под размер экрана).

Параметры настройки

Установим с портала джумла: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/bm-cool-menu .

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

А также произвести точечные настройки внешнего вида:

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

Работает как с библиотекой jQuery, так и без неё (предусмотрена опция включить/выключить).

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

Menu Anchor

С помощью этой разработки вы можете использовать пункты плавающего меню как якоря для прокрутки страницы до нужного места или открытия нужного текста на другой странице. Расстановка якорей - популярный приём, особенно уместен на LandingPage, в статьях длиной до 20 экранов монитора. А с плавающим такой метод становится ещё эффективнее - плагин обеспечивает быструю навигацию по странице сайта.

Адаптивный.
Лицензия GPLv2 (free).
Для CMS 3.2-3.8 +.

Устанавливаем, активируем плагин. Ссылка: https://extensions.joomla.org/extensions/extension/structure-a-navigation/menu-systems/menu-anchor .

Добавляем якоря в материал.

Floating Buttons

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

Недавняя разработка (февраль 2018 г.), работает только на последних версиях джумла - на 3.х.
Адаптивный (есть опция показывать на всех устройствах или только на мобильных).

Преимущества

Стильное оформление, которое можно менять (цвет, иконки, тема), удобная настройка - основные преимущества модуля (кнопки «+» и «-» позволяют быстро добавлять новые пункты, а четырех конечная стрелочка - перетаскивать, упорядочивать их).

Активация

Затем перейдём к специализированным:

видимость плавающих кнопок на всех устройствах либо только на мобильных;
цвет основной кнопки;
цвет значка на кнопке;
иконка (выбрать из предложенных);
повернуть кнопку - да или нет;
тема поля (оформление надписей) - тёмные оттенки, светлые.

Добавим сколько нужно пунктов (кнопка Menu Items). Пропишем для них - заголовок, ссылку, цвет кнопки, значка, выберем иконку из предложенных.

Проверим, что получилось. При необходимости поменяем параметры.

Articles Count

Модуль позволяет выводить сворачивающееся «дерево», создавать структурированные списки с категориями, с указанием количества статей. О приложении ещё нет отзывов на joomla.org, но оно находится не на последнем месте по популярности запросов в поисковиках.

Главные особенности:

Бесплатный.
Отзывчивый, если установлен на отзывчивом шаблоне.
Создан для джумла 3.х, последняя версия (3.0.2) для джумла 4 «Альфа», но к сожалению на тестовой версии CMS модуль пока не работает.

Функции и параметры

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

в соответствующих полях выбираем категории для отображения (все - «корень», или выборочно); то же самое с контактами, лентой новостей, weblinks, с расширениями (com_contentи пр.);
можно выводить дочерние и родительские категории;
выводить пустые категории, неопубликованные статьи;
отображать категорию со ссылкой или без;
выбрать пункт для отображения по умолчанию (например, главная);
макет дерева либо списка.

Настраиваем и публикуем.

Может показаться, что одни плагины или модули меню joomla создавались в соответствии с последними тенденциями в сайтостроении, в то время как другие серьезно устарели (в отношении некоторых проектов стоит всерьёз задуматься о закрытии). И всё же для каждой из приведённых разработок можно найти достойное применение. Или выбрать наиболее подходящий вариант из топ-15 лучших меню джумла.

Обзор будет проходить в последней, на момент написания статьи (01.07.2016), русскоязычной версии DJ-MegaMenu 3.4.1, Joomla 3.5.1 в шаблоне JM Real Estate Ads 1.0.2. Обратите внимание, что для DJ-MegaMenu есть более двух десятков готовых, профессиональных шаблонов сайта . О некоторых из них можете прочесть в . В статье «Видео урок по DJ-Catalog. Создание интернет магазина с нуля (часть 3) » показан пример настройки новой версии DJ-MegaMenu.

Есть бесплатная версия данного расширения DJ-MegaMenu Free Edition и совсем урезанная версия DJ-Menu .

Особенности мега меню для Joomla

Рассмотрим основные особенности DJ-MegaMenu.

Возможность настройки каждого пункта меню отдельно друг от друга при помощи расширенных опций в менеджере меню Joomla. Не забудьте активировать плагин DJ-MegaMenu. Добавление иконок, подзаголовков, задание фона (изображение с указанием вертикального и горизонтального выравнивания), возможность показа\скрытия каждого отдельного пункта меню в мобильном или обычном меню. Так же можно задать ключ доступа, который позволит перемещаться в нужную часть страницы при помощи клавиатуры.
Возможность создания многоколоночного (с заданием ширины колонок), древовидного или обычного подменю (рисунок ниже).

Добавление иконок (Bootstrap или Font Awesome) к пунктам меню. Возможность отображения иконок в мобильном или обычном меню.
Добавление различных эффектов CSS3 анимации появления и исчезания (более 30). Настройка времени открытия и закрытия подменю. Настройка направления открытия и возможность раскрытия подменю по нажатию или наведению.
Добавление модулей в меню (рисунок ниже) (с заданием стиля отображения модуля).

Закреплённое меню. Возможность закрепить горизонтальное мега меню для Joomla в верхней части страницы при её прокрутке.
Возможность добавления логотипа в закреплённое меню, его выравнивания и настройки отступа.
Удобные настройки цветов элементов меню из административной части Джумла без необходимости правки CSS файлов.
Две предварительно настроенные темы оформления горизонтального меню.
Данный модуль меню Joomla адаптивный (отзывчивый). Полная поддержка работы с меню при помощи касания (тачскрины) и мобильных устройств iPhone, iPad, Android, Windows Phone.

Возможность выбора одного из нескольких типов мобильного меню с настройками каждого типа. Например, позиция, тема оформления (светлая и тёмная), выравнивание, логотип, наличие «off canvas» меню (выдвижного меню).
Возможность настройки цветов элементов мобильного меню из админки Joomla без необходимости правки CSS файлов.
Возможность настройки состояния мобильного подменю (свёрнуты, развёрнуты, развёрнуты все элементы подменю активного меню)
Возможность вставки модуля в «off canvas» меню.
Настройка «off canvas» меню (список или аккордеон), добавление логотипа. Наличие 14 эффектов. Возможность вставки кнопки открытия мобильного меню в любу часть страниц.
Полная поддержка навигации по меню согласно требованиям стандарта WCAG 2.0 (раздел 508) для людей с ограниченными возможностями.
Поддержка Joomla 3.х и 2.5.
Плагин и модуль мега меню для Joomla переведён на русский язык.
Наличие русскоязычных всплывающих подсказок для опций модуля.
Хорошая документация и техническая поддержка (на английском).

Бесплатная версия DJ-MegaMenu

Есть бесплатная версия DJ-MegaMenu – DJ-MegaMenu Free Edition . Но есть ограничения бесплатной версии по функциональности:

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

По большому счёту, настройка DJ-MegaMenu аналогична настройке любого другого меню:

Создаёте меню в менеджере меню.
Создаёте пункты меню в этом меню.
Устанавливаете DJ-MegaMenu.
В настройках модуля DJ-MegaMenu указываете название созданного меню и публикуете модуль меню в нужной позиции шаблона.

Все остальные настойки и создание стилей – это тонкости. В этой статье есть видео урок по настройки обычного меню Joomla (нужно начать смотреть видео с 24:13).

Более «тонкие» DJ-MegaMenu разнесены по трём разным местам:

Настройки модуля меню Joomla (в менеджере модулей). Тип «DJ-MegaMenu».
Настройки модуля кнопки мобильного меню (в менеджере модулей). Тип «DJ-MegaMenu - Mobile Menu Button».
Настройки каждого пункта меню в менеджере меню Joomla. Для того, чтобы они появились нужно активировать плагин «Системный плагин DJ-MegaMenu» в менеджере плагинов.

Настройки модуля меню Joomla разделены на три вкладки: Модуль, CSS3 анимация и опции скрипта, Настройки мобильного меню . Почти все опции оснащены дополнительными всплывающими подсказками (на русском языке) или понятны из названия. Будут рассмотрены только наиболее интересные, на мой взгляд параметры. Также не будут затрагиваться одинаковые для всех модулей и пунктов меню опции.

На первой вкладке Модуль (рисунок ниже) Вы задаёте название меню Joomla, которое нужно показывать. Также можете настроить опции вывода иконок и подзаголовков пунктов меню в зависимости от того, какое меню отображается у пользователя. Плюс, можно отключить\включить добавление Шрифтов Awesome. Это полезно в том случае, когда Вы используете иконки пунктов меню из Шрифта Awesome (набор стилей). Если этот набор уже подгружается шаблоном сайта или другим расширением, можно отключить для препятствия повторной загрузки стиля и оптимизации скорости загрузки сайта.

На вкладке , в основном собраны настройки эффектов анимации меню (рисунок ниже). Тут же можно задать тип подменю (дерево или спадающий список), направление открытия, спадающего списка подменю, действие, при котором будет открываться подменю (нажатие, наведение) и включить\отключить улучшенную совместимость меню для управления с клавиатуры (WCAG 2.0 (раздел 508)). Обратите внимание, что некоторые из этих опций, например, Ширина столбца в пикселях , может быть переопределена для конкретных пунктов меню в настройках каждого из них в менеджере меню.

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

Рассмотрим некоторые настройки пунктов меню в менеджере меню Joomla (рисунок ниже).

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

В этих настройках DJ-MegaMenu Вы сможете добавить фоновое изображение пункта меню, а также добавить модуль (создать позицию). Для этого достаточно в поле Позиция модуля или Позиция мобильного модуля (в зависимости от того, в какое меню Вы хотите добавить модуль) указать название позиции шаблона, из которой Вы хотите отображать модули в меню. Можно указать или существующую позицию, или произвольную. Если указали произвольную, то в настройках модуля, который хотите отображать в меню, укажите эту позицию в настройке Позиция .

В настройках модуля кнопки мобильного меню (рисунок ниже) ничего особого нет. Вы можете выбрать, какой модуль DJ-MegaMenu нужно активировать по нажатию на эту кнопку и можете задать суффикс CSS-класса модуля для задания внешнего вида кнопки.

Русификатор DJ-MegaMenu

Как видите, создать горизонтальное мега меню для Joomla с расширением DJ-MegaMenu достаточно просто. Ещё раз подчеркну, что оно очень хорошо адаптировано к мобильным устройствам и гибко настраивается даже без правки исходного кода. Если Вы применяете это расширение на сайте, где используется шаблон не от Joomla-Monster.com, то, возможно, дополнительно понадобится добавить CSS-стили для гармоничной интеграции данного горизонтального меню Joomla с общим дизайном сайта. А если применяется шаблон от Joomla-Monster.com, то достаточно в настройках модуля, для опций Тема (вкладка ) и Тема мобильного меню (вкладка ) выбрать вариант переопределить из шаблона .

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

Называется данный модуль JUX Mega Menu .

Восхвалять его возможности можно до бесконечности. В общем смотрите сами:

Мега меню joomla

Как то встретил я на одном сайте меню, где при наведении мышкой на пункт Войти , выпадало окно авторизации на сайте, через расширение SLogin . Меня удивила данная возможность, так как мне нужно было такое же решение для нескольких моих веб-проектов. Я зарегестрировался на том сайте после чего понял, что пункт меню при наведении на него мышкой, выводит модуль слогина.

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

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

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

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

Возможности данного меню, которые все как один относятся к плюсовым характеристикам:

Он лёгкий и очень шустрый;
Множество настроек как в модуле, так и в пункте меню;
Выбор горизонтального или вертикального отображения;
При прокручивании страницы, меню может залипать вверху или внизу экрана (задаётся в настройках);
Выводит модули в пунктах меню;
Выпадание субменю вниз или вверх, с настройками скорости выпадания;
Вывод подпунктов меню в заданном количестве колонок:;
Поддерживаются изображения для пунктов меню;
Работает на joomla
и много других возможностей.

Скачать мега меню для joomla

Друзья, модуль JUX Mega Menu я считаю одним из лучших реализаций горизонтального меню для Joomla. К сожалению на данном сайте я уже давно не использую и не обновляю этот модуль, поэтому вынужден был удалить демку, модуль и пакет русификации.

Настройка Мега меню

Чтобы вывести мегаменю на сайте, вам необходимо зайти в менеджер модулей (Расширения → Менеджер модулей) и нажать кнопку Создать новый модуль .

В открывшейся вкладке Тип модуля , выбрать пункт JUX Mega Menu , после чего попадаем в настройки модуля.

Хочу обратить ваше внимание, что настройки осуществляются в двух разных местах :

в настройках модуля
и в настройках пункта меню.

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

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

Перевод устанавливается вручную. Чтоб установить перевод - скачайте и распакуйте архив у себя на компьютере. Затем залейте файлы (3 файла) с переводом в папки сайта на сервере, согласно тому, как они вложенны в архив.

На этом пока всё. Жду ваших вопросов в комментариях ниже (если кто не разобрался с настройками мега меню).

Удачного вам сайтостроения!!!