Купить этот сайт

Как сделать Мега-меню на Drupal

12 Sep, 2014


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

Я опишу процесс создания такого меню с помощью модуля Menu Minipanels, поскольку использовал его на реальном сайте и результат меня устроил, однако для этой задачи есть и другие модули: MD Megamenu (платный), OM Maximenu, Megamenu, Menu Views, MuchoMenu (альфа-версия на момент написания статьи), GigaMenu (для семерки — dev-версия).

Установка

Для работы модуля Menu Minipanels понадобятся также Libraries, Panels, Ctools и jQuery-библиотека qTip. На момент написания модуль работал с qTip версии 1.0.0-rc3.

Скачиваем библиотеку qTip, в архиве находим файл « jquery.qtip-1.0.0-rc3.min.js» и кладем его в «sites/all/libraries/qtip», затем скачиваем и включаем остальные модули.

Установка с Drush:

$ drush dl menu_minipanels panels ctools
$ drush en -y menu_minipanels
$ drush download-qtip

Настройка

После установки идем в настройки модуля (admin/config/user-interface/menu_minipanels), где выбираем, в каких меню можно использовать Menu Minipanels, а также настраиваем различные эффекты и оформление.

Теперь нужно создать минипанель, которая будет показываться при наведении мыши на пункт меню. Идем в «Структура → Минипанели» (admin/structure/mini-panels), нажимаем «Добавить». Дальше все интуитивно понятно, не буду долго расписывать. Можно добавлять в минипанель вюхи, ноды, просто текст и т. д., это все зависит от задачи в каждом конкретном случае.

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

Теги: 

2 комментария

by Гость on сб, 04/10/2014 - 20:05

У меня опыт с Menu Minipanels не удачен. При большом посещении на сайт создает весомую нагрузку при включенном кешировании. Пришломь написать свой кастомный модуль.

by DreamR1der on пн, 06/10/2014 - 00:03

Спасибо за замечание! Я как-то не думал, что может быть такой косяк. Надо будет на досуге затестить этот момент.

Добавить комментарий

Filtered HTML

  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешённые HTML-теги: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.