Создание Mega Menu в Joomla

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

Что такое Mega Menu?

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

Модуль меню Mega Menu для Joomla

Mega Menu также можно найти в Joomla.org. Каждый пункт меню – это не просто строка текста с пиктограммой, а мини-статья.

Модуль меню Mega Menu для Joomla

Заметки о Mega Menus в Joomla

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

Можно добавить Mega Menu на любой сайт Joomla с помощью доступных расширений от JED.

  • В этом руководстве я буду использовать следующие средства:
  • Коммерческое расширение Dropdown Mega Menu.
  • Стандартную установку Joomla.
  • Шаблон RocketTheme Tachyon (а также модуль меню Rockettheme's Fusion)

Если хотите поэкспериментировать не покупая расширение, можно загрузить его с Joomlart.com. В нем есть пустой шаблон, в который встроен модуль Mega Menu.

Шаг 1: Создайте дочерние пункты меню

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

Модуль меню Mega Menu для Joomla

Шаг 2: Поместите пункты в три колонки вместо одной

· Откройте Menus и найдите ссылку на родительское меню из Шага 1.
· Разверните параметры (Megamenu Extended).
· Измените число колонок на 3.
· Не обязательно: добавьте описание. Все что вы добавите будет отображаться, как подстрока в меню.
· Сохранитесь и проверьте, как все работает. Наведите указатель на родительское меню и дочерние меню должны отобразиться в трех колонках.

Модуль меню Mega Menu для Joomla

Шаг 3: Добавьте стандартный модуль к дочернему пункту меню 1

  • Выберите логин из выпадающего списка модулей.
  • Зайдите в Menus > Top > Child Item 1.
  • Откройте параметры пункта меню.
  • Разверните параметры (Megamenu Extended).
  • Поставьте галочку в Group – Yes.
  • Выберите радио кнопку Modules.

Модуль меню Mega Menu для Joomla

Шаг 4: Добавьте в дочерний пункт 2 кастомный модуль HTML с видео

Теперь добавим в дочерний пункт 2 кастомный модуль HTML немного другим способом.

  • Зайдите в Extensions > Module Manager > New.
  • Создайте кастомный модуль HTML. В примере 1 для импортирования видео с YouTube я использовал плагин AllVideos. (Посмотрите AllVideos Tutorials, если вам требуется помощь).
  • Создайте место расположения для него, вместо того, что предлагается в выпадающем меню. Я назвал свой «Youtube».
  • Добавьте контент. Будет виден код, использованный плагином AllVideos. Я установил размер выходных данных в параметрах плагина, так чтобы видео не занимало много места на экране.
  • Сохранитесь и вернитесь к пункту меню.
  • Зайдите в Menus > Top > Sample Sites > Child Item 1.
  • Откройте параметры пункта меню.
  • Разверните параметры (Megamenu Extended).
  • Поставьте галочку в Group – Yes.
  • Выберите радио кнопку Module Postions.
  • Выберите положение модуля в соответствующем окне.
  • Сохранитесь.

Модуль меню Mega Menu для Joomla

5: Использование существующего кастомного модуля

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

Проверьте вашу работу и вот что вы увидите. Давайте настроим ширину колонок.

  • Вернитесь в меню > Top > Sample Sites (верхний уровень).
  • Создайте кастомный модуль HTML или выберите любой модуль, который уже опубликован.
  • Если он назначен на каждой странице, он появится в меню на всех страницах.

    Модуль меню Mega Menu для Joomla

  • Если он назначен только на нескольких страницах, он появится в меню на всех страницах, но только в указанном положении на них.
  • Следуйте по той же схеме, как в двух предыдущих примерах.

    Модуль меню Mega Menu для Joomla

  • Выберите имя для кастомного модуля из выпадающего меню Select Modules.
  • Проверьте, как все работает. Вот как это должно выглядеть. Осталось только настроить ширину колонок.
  • Вернитесь в Menus > Top > Sample Sites (пункт меню верхнего уровня).
  • Откройте параметры для редактирования.

    Модуль меню Mega Menu для Joomla

В поле подменю Submenu Column[i] Width, добавьте следующие строки. Они определят ширину для каждой колонки.

colw1=250
colw2=300
colw3=300

Модуль меню Mega Menu для Joomla

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

Модуль меню Mega Menu для Joomla

 

Read this blog for more information