xandeadx.ru Блог музицирующего веб-девелопера

Drupal → Mega Menu своими руками

Опубликовано в

Мега-меню это выпадающее меню, во втором уровне которого, помимо ссылок, может выводится любая другая информация — представления views, блоки, материалы и т.д.

Mega menu

На drupal.org есть несколько модулей для создания таких меню, но мне не подошёл ни один, поэтому пришлось писать ручками.

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

Моё решение:

1. Добавить в template.php

/**
 * Preprocess function for theme_menu_link()
 */
function THEMENAME_preprocess_menu_link(&$vars) {
  if ($vars['element']['#original_link']['menu_name'] == 'main-menu') {
    if ($vars['element']['#title'] == 'Пункт 1') {
      $vars['element']['#below']['content_for_mm']['#markup'] = 'Нужный контент для пункта 1...';
    }
    else if ($vars['element']['#title'] == 'Пункт 2') {
      $vars['element']['#below']['content_for_mm']['#markup'] = 'Нужный контент для пункта 2...';
    }
    // ...
 
    if ($vars['element']['#below']) {
      $vars['element']['#below']['#prefix'] = '<div class="mega-menu">';
      $vars['element']['#below']['#suffix'] = '</div>';
    }
  }
}

2. Добавить в .css файл темы

ul.menu li .mega-menu {
  display: none;
  position: absolute;
  z-index: 10;
  background: white;
  border: 1px solid black;
  padding: 10px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .5);
}
 
ul.menu li:hover .mega-menu {
  display: block;
}

Результат:

Mega menu

Единственное условия — меню нужно выводить с помощью блоков, а не в page.tpl.php.

Написанное актуально для Drupal 7
Похожие записи

Комментарии RSS

Единственное условия — меню нужно выводить с помощью блоков, а не в page.tpl.php.

Почему же? Помнится, я генерировал меню в THEMENAME_preprocess_page(), а в page.tpl.php просто вставлял переменную с полностью сгененирированным кодом.

ну так возможно и будет работать, надо смотреть чтобы пункты проходили через theme_menu_link()

Возникает вопрос, насколько быстро такое меню работает, особенно если там views?

зависит от экспы разработчика

ну так возможно и будет работать, надо смотреть чтобы пункты проходили через theme_menu_link()

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

drupal.ru есть несколько модулей для создания таких меню

Наверно, имелся ввиду drupal.org?

конечно)

Есть еще такой модуль http://drupal.org/project/om_maximenu достаточно функциональный, куча настроек, выводит содержимое блоков в качестве подменю.

om_maximenu - хорош, но очень тяжел

А как, собствеенно, вывести это меню с помощью блока? Где и что прописать?

структура - блоки - переместить - сохранить

Привет

Простое и грамотное решение, на друпал 6 это возможно?

Если да, копать в сторону програмного вывода меню или куда вообще?))

Заранее благодарен

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

Коллега, Вы зря мучились. связка Nice menu + Menu Views - вот решение А вот не подскажет ли кто как сделать, чтобы н на 1-м уровне было с картинками?

Для Drupal 6 тоже было бы интересно подобное решение..

Подскажите, как можно реализовать на drupal меню как на этом сайте (блок лучших записей с миниатюрами)?

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании