Выберите язык

Расширения

Featured

Обзор DJ-MegaMenu Light. Бесплатный модуль меню Joomla

 

 

DJ-MegaMenu Light – это русскоязычный бесплатный модуль меню Joomla, позволяющий создавать горизонтальное выпадающее меню с анимацией, подзаголовками и иконками.

Видео обзор

 

  • Модуль – 00:01:14.
  • Пункт меню – 00:06:38.
  • Как сделать меню в Joomla – 00:11:13.
  • Определение позиций шаблона – 00:16:33.

Видео лучше просматривать с качеством 720 HD. Этот и другие видеоуроки можете найти на каналах сайта Aleksius.com в YouTube и Mail.ru.

Ссылки из видео:

У модуля есть много настроек. Он совместим со стандартной системой меню Джумла и позволяет отображать подменю в виде мега-меню (в несколько столбцов). DJ-MegaMenu Light является урезанной версией платного расширения DJ-MegaMenu.

В обзоре будет участвовать последняя, на момент написания статьи (14.06.2019), русскоязычная версия DJ-MegaMenu Light 4.0.0 в Joomla 3.9.8. Бесплатный шаблон фронтальной части сайта – JM Services 1.0.5. Демонстрационный сайт (англоязычный) на базе быстрого старта шаблона JM Services 1.0.5.

О том, как создавать и редактировать сами меню и пункты Joomla, Вы можете узнать в статьях «Урок по меню Джумла 4. Создание и редактирование» и «Урок по меню сайта Joomla 3. Создание и редактирование».

На рисунке ниже показан пример модуля DJ-MegaMenu Light. Его внешний вид зависит от шаблона и настроек модуля. Можете посмотреть на модуль на демонстрационном сайте.

DJ-MegaMenu Light
DJ-MegaMenu Light

На официальном сайте расширений Joomla 1 отзыв, расширение добавлено 04 декабря 2018.

  • Общий рейтинг – 5 из 5.
  • Функциональность – 5 из 5.
  • Простота использования – 5 из 5.
  • Поддержка – 5 из 5.
  • Документация – 5 из 5.

Основные возможности и особенности

  • Переведён на русский, английский и другие языки.
  • Адаптивный дизайн (создание мобильного меню). Три типа мобильного меню: Offcanvas (рисунок ниже), aккордеон, cписок. Несколько эффектов анимации Offcanvas меню.
  • Создание горизонтального меню.
  • Создание выпадающего меню.
  • Создание мега-меню (подменю в несколько столбцов).
  • Отображение иконок и подзаголовков с возможностью отключения на мобильном или обычном меню.
  • Поддержка шрифтов Awesome.
  • Подменю в виде дерева или спадающего списка.
  • Анимация на базе CSS Десятки эффектов анимации появления и исчезновения подменю.
  • Возможность открытия подменю по нажатию или наведению.
  • Соответствие требованиям WCAG для инвалидов. Возможность управления меню с клавиатуры.
  • Возможность задавать фоновое изображение подменю с указанием его выравнивания.
Бесплатное меню для Joomla
Бесплатное меню для Joomla

Сравнение DJ-MegaMenu Light и DJ-MegaMenu

В DJ-MegaMenu Light, в отличие от платной версии – DJ-MegaMenu, нет таких возможностей:

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

Модуль меню и пункты меню

Настройки DJ-MegaMenu Light можно найти как в самом модуле, так и в настройках каждого из пунктов меню. Рассмотрим некоторые из доступных опций.

Модуль меню. Помимо стандартных настроек, для всех модулей Joomla, у DJ-MegaMenu Light есть свои – особые. Они разделены на три вкладки:

  1. Модуль (рисунок ниже).
  2. CSS3 анимация и опции скрипта.
  3. Настройки мобильного меню.
Бесплатный модуль меню Joomla
Бесплатный модуль меню Joomla

На первой вкладке – Модуль (рисунок выше) можно указать, какое меню Joomla отображать в модуле, активировать отображение иконок и подзаголовков. На рисунке ниже показан пример пункта меню с иконкой. Обратите внимание, что это именно иконка, а не растровая картинка. Можно применять иконки шрифта Awesome и иконки Bootstrap.

Как сделать меню Joomla
Как сделать меню Joomla

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

Подзаголовки пунктов меню
Подзаголовки пунктов меню

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

CSS3 анимация и опции скрипта
CSS3 анимация и опции скрипта

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

Настройки мобильного меню
Настройки мобильного меню

Пункты меню. В настройках каждого пункта меню доступна вкладка Опции DJ-MegaMenu (рисунок ниже). Чтобы она появилась необходимо активировать плагин «Системный плагин DJ-MegaMenu».

Все опции оснащены русскоязычными подсказками. Заданные тут настройки действуют на конкретный пункт меню.

Опции DJ-MegaMenu
Опции DJ-MegaMenu

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

  1. Template Parameters.
  2. Module Suffixes.
  3. Install Demo Copy.
Меню Joomla
Меню Joomla

В результате на сайте получилось так, как показано на рисунке ниже.

Мега-меню Joomla
Мега-меню Joomla

Как сделать меню в Joomla

Рассмотрим основные шаги по созданию меню в Джумла. Это актуально не только для DJ-MegaMenu Light, но и для других модулей, использующих штатный компонент меню Joomla (com_menus). Процесс настройки зависит от того, страницу какого типа Вам нужно создать. Но ниже указан универсальный «метод».

Шаг 1. В большинстве случаев сперва нужно создать некий объект, на который будет вести пункт меню. Например, материал Joomla, контакт, товар VirtueMart, категорию доски объявлений DJ-Classifieds и так далее. Это делается в других компонентах, не в компоненте меню.

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

Шаг 2. Если меню ещё не создано, то перейдите в Меню – Менеджер меню – Создать меню. Укажите Заголовок и Тип меню. Заголовок можно указывать на любом языке, а тип меню указывайте английскими буквами, без пробелов.

Шаг 3. Перейдите в Меню – Менеджер меню – «Название Вашего меню» и нажмите кнопку Создать. На появившейся странице нажмите кнопку Выбрать (рисунок ниже).

Создание пункта меню
Создание пункта меню

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

Выбор типа пункта меню
Выбор типа пункта меню

Шаг 5. Укажите все обязательные настройки, поля, отмеченные звёздочкой, необходимые для сохранения пункта меню. Их набор сильно зависит от типа пункта меню. Иногда достаточно указать только заголовок.

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

После этого сохраните пункт меню.

Настройка пункта меню
Настройка пункта меню

Шаг 6. Перейдите в Расширения – Модули и нажмите на Создать. В появившемся окне выберите название модуля меню, который Вы хотите отображать на сайте. В Joomla есть свой собственный модуль – «Меню». Для создания меню при помощи модуля DJ-MegaMenu Light выберите – «DJ-MegaMenu».

Шаг 7. Не важно, выбрали Вы модуль «Меню» или «DJ-MegaMenu», на первой вкладке укажите заголовок модуля, название меню, которое Вы хотите отображать в модуле, выберите состояние Опубликовано и укажите позицию. Позиция зависит от Вашего шаблона.

Настройка модуля
Настройка модуля

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

Если надо, то перейдите на другие вкладки модуля и настройте другие параметры.

Шаг 8. Перейдите на сайт и посмотрите на результат. При необходимости вернитесь в настройки модуля и\или меню\пунктов меню и измените настройки для достижения желаемого результата.

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

Похожие материалы
Автор статьи – Хорошевский Алексей
Хорошевский Алексей

Кандидат технических наук, преподаватель Харьковского национального университета радиоэлектроники, веб-мастер и SEO-оптимизатор с опытом более 15 лет. Специалист по созданию сайтов на Joomla и WebSite X5. Автор научных публикаций, видеокурсов и обучающего контента по веб-разработке и SEO. Ведёт блог и YouTube-канал, где делится своими знаниями и практическим опытом. Предоставляет услуги по созданию, доработке, сопровождению и продвижению сайтов. Подробнее об авторе…

Социальные сети:

Публикации и работа:

 

Полезные ссылки:

Загрузка комментария... Комментарий будет обновлён через 00:00.
Напишите комментарий...
- оставшихся символов.
или оставить комментарий как гость