Drupal Nice Menus и Superfish. Описание и сравнение модулей dropdown меню.

Модули Nice Menus и Superfish позволяют создать выпадающие меню вертикальные и горизонтальные. Вам стоит выбрать один из модулей и использовать его. Оба модуля популярные и имеют большое количество дополнительных модулей.

Модули Nice Menus и Superfish используют одну и ту же библиотеку jquery Superfish:

https://www.drupal.org/project/nice_menus
https://www.drupal.org/project/superfish
https://github.com/mehrpadin/Superfish-for-Drupal

Начнем с Nice Menus.

Nice Menus

Меню с помощью Nice Menus создается автоматически после включения модуля. Включите модуль. Никаких дополнительных действий, библиотека уже в модуле, действительно, nice меню)

Теперь давайте зайдем в настройку блоков, там будет несколько блоков Nice menu, выберем первый:

nice menus drupal

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

nice menus drupal

Обратите внимание на настройку Respect "show as expanded" option, она позволяет раскрывать все пункты меню (по умолчанию). Это нужно чтобы были всегда видны вложенные пункты меню, а не только когда мы уже выбрали родительский пункт меню.

drupal nice menus

Можно также выставить, чтобы меню всплывало вниз, для этого ориентацию нужно выбрать Down:

nice menus вниз

 И теперь меню будет выпадать вниз:

drupal nice menus down

 Настройки Nice Menus не очень широкие:
/admin/config/user-interface/nice_menus

Здесь мы можем выставить только скорость раскрытия и задержку, мне нравится, когда меню быстро открывается, поэтому я обычно выставляю так:

drupal nice menus settings

Ну вот и все у вас есть выпадающее меню. Nice menus - это быстро и минимум усилий.

Drupal Superfish

Модуль Superfish требует немного больше времени в установке, но оно того стоит, у нас будет возможно более гибко настраивать внешний вид и работу меню.

Итак, нам понадобится библиотека superfish для друпала, именно версия для друпала. В описание модуля об этом написано:
https://github.com/mehrpadin/Superfish-for-Drupal

Если у вас не установлен модуль Libraies API, то вам следует его поставить:
 https://www.drupal.org/project/libraries

Я скачал версию 1.0 для текущей версии модуля. Копируем библиотеку в папку sites/all/libraries/superfish:

superfish 1.0

Также нужно поставить модуль jQuery Update:
https://www.drupal.org/project/jquery_update 

 В настройках jQuery Update советую выставить настройки для фронтенда 1.7,  а для административной части 1.5 (чтобы не глючил Views):
/admin/config/development/jquery_update 

drupal jquery update

Теперь можно включить модуль Superfish. Заходим в отчет о состояние и проверяем, чтобы superfish подключилась.

/admin/reports/status

drupal superfish

 Теперь заходим в блоки и включаем один из superfish блоков:
/admin/structure/block

drupal superfish

 Здесь у нас уже гораздо больше настроек, поэтом давайте разберем их поэтапно:

друпал superfish

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

друпал superfish

Здесь у нас стандартные настройки, единственно у нас не установлен jquery.easing, его можно дополнительно установить, но я не буду это делать, потому что и так superfish работает прекрасно.

Выберите регион и можете посмотреть как это будет выглядеть. Остальные настройки мы рассмотрим ниже:

друпал superfish

У меня все отлично работает, если у вас что-то пошло не так, то пишите в комментариях.

 А теперь перейдем к вкусностям Superfish, а именно его адаптивности к различным устройствам. Например на телефонах наше меню будет как обычный селект, что позволяет легко выбирать пункты на телефоне.

superfish mobile

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

superfish mobile

 Таким образом Superfish явно уделывает Nice Menus по функциональности, но  Nice Menus проще и быстрее в установке и настройке. Если вы все-таки пошли по пути Nice Menus, то вам помогут дополнительные модули в настройке адаптивности меню:

https://www.drupal.org/project/responsive_menus
https://www.drupal.org/project/mobile_navigation

Комментарии

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Plain text

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