Создание выпадающего меню в Drupal 7 с помощью Panels и Menu Minipanels.

image

03.01.13
Comments 13

Всем привет. Сегодня мы познакомимся с замечательным модулем Panels, который значительно облегчает жизнь разработчику сайтов на Drupal. Я не буду детально разбирать все его настройки, в этом уроке с помощью Panels и Menu Minipanels мы создадим выпадающее dropdown меню. Преимуществом такого меню будет то, что мы сможем помещать внутрь него любые имеющиеся блоки на сайте, а так же создавать новые. Все настройки я буду производить на примере своего сайта, вы же можете создать несколько своих блоков, будь то меню, пользовательские блоки или блоки, созданные с помощью модуля Views.

Итак, для того чтобы создать выпадающее меню, нам потребуются три модуля:- Panels, Menu Minipanels и Ctools. Скачайте эти модули.

Так же для работы модуля Menu Minipanels, нам потребуется посетить страницу QTIP и загрузить уменьшенную версию Qtip. Распакуйте архив и найдите файл с именем: jquery.qtip-1.0.0-rc3.min.js. И поместите этот файл в каталог sites/all/libraries/qtip, т.е. файлы должны быть доступны по пути sites/all/libraries/qtip/jquery.qtip-1.0.0-rc3.min.js.

Затем пройдите на страницу управления модулями и включите их.  В группе модулей «Панели», нам нужно включить  «Mini panels», «Panels», «Panels In-Place Editor», так же нужно включить модуль «Ctools» и «Menu Minipanels»,.

Теперь нужно определиться с заданием. На моем блоге есть три блока, которые нужно показать в выпадающем окне, после того как пользователь наведет на один из пунктов верхнего меню. Пусть это будут блоки «Категории», «Комментарии» и «Популярное».

Итак, давайте приступим.

Создание мини-панели

Пройдем в Структура -> Мини-панели. Нажмем на кнопку «Добавить».

Выпадающее меню

На появившейся странице настроек нужно заполнить поле «Административный заголовок», этот заголовок не будет показываться на сайте, а будет отображаться в интерфейсе администратора, я назвал его «Выпадающее меню» и дал машинное имя «dropdownmenu».

Следующее окно настроек будет «Контекст», здесь ничего настраивать не будем, нажимаем далее.

Следующее самое интересное окно настроек будет «Макет», в котором нам нужно выбрать макет для нашего блока.

В выпадающем списке «Категория», нам нужно выбрать трех-колоночный макет, в который мы поместим наши блоки, и выбрать тип макета, я выбрал тип «33/34/33», после чего нажмем далее.

Выпадающее меню

На следующем этапе нам нужно, распределить блоки по колонкам. В поле тип заголовка я установил значение «Без названия».

Для того чтобы добавить содержимое в блок нужно нажать на шестеренку и выбрать пункт добавление материала:

Выпадающее меню

Должно появиться всплывающее окно, в котором нам нужно выбрать нужный блок.

Давайте в левую колонку добавим блок меню «Навигация». Для этого в левой колонке выберем пункт «Меню», и выберем нужное нам меню, после чего можно будет переопределить заголовок блока, после этого нужно нажать на кнопку «Готово».

Выпадающее меню

Теперь добавим следующий блок «Популярное». Этот блок выводится у меня с помощью модуля Views. Нажмите на шестеренку в центральной колонке для добавления материала. Как я уже говорил, блок «Популярное» создан с помощью модуля Views, выбрать его можно нажав на пункт «Прочее» в левой колонке.

Аналогичным образом добавьте блок в третью колонку, у меня это блок «Комментарии» который так же создается модулем Views.

После того как наши блоки будут распределены по колонкам, можно нажать на кнопку сохранить.

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

Теперь нам нужно создать пункт в верхнем меню, при наведении на который будет показываться наш выпадающий блок. Я назвал этот пункт меню «Панель». Надеюсь, с этим заданием вы справитесь сами, путь ссылки укажите любой,  так же можно этот пункт меню сделать без ссылки, в этом вам поможет модуль «Special menu items», просто установите его и в поле введения пути укажите «<none>», вроде так, позже напишу статью по настройке этого модуля.

Итак после того как вы создали пункт меню, в сомом низу страницы настроек данного пункта вы должны были увидеть пункт с названием «Menu minipanel». Там мы сможем выбрать созданную нами панель «Выпадающее меню». Затем ниже, у нас появятся различные настройки, с которыми в этом уроке я не буду вас знакомить, поиграйтесь с ними самостоятельно. Мы с вами изменим лишь один пункт «Maximum popup width (px)», в котором указывается максимальная ширина всплывающего окна, по умолчанию она ровна 250 пикселей, что будет маловато для наших трех колонок, давайте установим значение в 600 пикселей.

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

Комментарии

GrooMan 05.01.13

У Вас здорово получается - актуально и удивительно просто о сложном. Спасибо.

Юрий 22.01.13

Здравствуйте! Помогите, пожалуйста.
Вы пишите "Итак после того как вы создали пункт меню, вы должны были увидеть пункт с названием «Menu minipanel»". Не увидел. Куда я должен был смотреть?

С уважением, Юрий

admin 22.01.13

В настройках пункта меню в самом низу.

Юрий 22.01.13

Спасибо!!!

Филипп 25.02.13

Добрый день) Не могли бы вы поподробнее описать процесс "создания пункта меню" или добавить скриншот,потому что из описания не понятно где его создавать. Спасибо.

Юрий 22.03.13

Здравствуйте, Сережа!
Вы обещали рассмотреть модуль «Special menu items» ("так же можно этот пункт меню сделать без ссылки, в этом вам поможет модуль «Special menu items», просто установите его и в поле введения пути укажите «», вроде так, позже напишу статью по настройке этого модуля."). Я его установил, но когда пробую отключить линк у элемента меню, у меня перестает работать выпадающее меню.

Большое спасибо Вам.
Юрий.

Алёна 13.02.14

Здравствуйте!
Скажите, а можно ли в выпадающее меню вставить не существующие блоки, а , скажем, ссылки на внешние сайты?

admin 13.02.14

Можно

Владимир 22.04.14

Здравствуйте! А не подскажите как сделать чтобы в таком меню работал Views Slideshow или Nivo Slider или jCarousel. Получается что при выводе содержимого в Mini Panels любым из этих модулей слайд шоу не работает уже при нажатии на "живой просмотр" и соответственно в выпадающем меню вместо слайдов выводится просто картинка.

admin 23.04.14

Выводили слайдеры в другое место?

Владимир 24.04.14

Да, в любом регионе эта же мини панель со слайдером работает, кроме как в выпадающем menu minipanels. Пробовал ставить модуль OM Maximenu, туда запихывал эту панель, все работает.

Ann1511 09.04.15

"Так же для работы модуля Menu Minipanels, нам потребуется посетить страницу QTIP и загрузить уменьшенную версию Qtip. Распакуйте архив и найдите файл с именем: jquery.qtip-1.0.0-rc3.min.js. И поместите этот файл в каталог sites/all/libraries/qtip, т.е. файлы должны быть доступны по пути sites/all/libraries/qtip/jquery.qtip-1.0.0-rc3.min.js."

не могу найти файл jquery.qtip-1.0.0-rc3.min.js. Скачала с друпал.орг "qtip-7.x-2.0-rc3.tar" Распаковала и загрузила all/library, очистила кеш Все равно друпал не видит библиотеку, что делать?

Денис 07.04.16

Понимаю конечно, что уже год практически прошел. Но вдруг кому пригодится
https://github.com/Craga89/qTip1/tree/master/1.0.0-rc3

Комментировать