• урок
  • pantey

Добавляем пункт «разделителя» в меню Drupal 7.

18.03.2014

Иногда, при разработке структуры сайта, а точнее при его темизации необходимо модифицировать стандартное меню Drupal, а именно добавить некий «разделитель», который визуально бы делил пункты какого либо меню на логические разделы. Задача довольно простая, но почему-то вызывающая проблемы со стороны разработчиков. Что бы вы наглядно поняли о чем идет речь, то скриншот для вас ниже:

Разделители структуры меню

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

Все разделители являются обычными пунктами меню

И по умолчанию, он так же выводится как обычный пункт, нам же необходимо всего лишь переопределить данный пункт меню, а в качестве индентификатора будем использовать его url. Думаю с идеей понятно. В качестве url, он же индентификатор, я буду использовать адрес

  1. http://none

Вы же можете использовать любой необходимый вам адрес. Теперь необходимо лишь перекрыть вывод пункта меню, url которого содержит «http://none». Для решения данной задачи нам понадобится хук Drupal:

  1. <?php theme_menu_link();?>

Открываем ваш файл template.php вашей текущей темы, в моем случае это Bartik и пишем следующий код:

  1. /**
  2.  * Implements theme_menu_link().
  3.  */
  4.  
  5. function bartik_menu_link(array $variables) {
  6. $element = $variables['element'];
  7. $sub_menu = '';
  8.  
  9. if ($element['#below']) {
  10. $sub_menu = drupal_render($element['#below']);
  11. }
  12.  
  13. $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  14. if($element['#href'] == 'http://none'){
  15. return '<span class="separator">' .$element['#title'] .'</span>' . $sub_menu . "\n";
  16. }else{
  17. return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
  18. }
  19. }

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

После чего чистим кеш сайта, добавляем пункты меню с url http://none и радуемся результату. Как вы можете теперь видеть, что все пункты с данным url были преобразованы в строку, обрамлены в тег span и добавлен класс separator

Обернули пункты в тег span и добавили класс "separator"

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

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (2)

Profile picture for user Виталий
Иван
08.05.2015

Может я не по теме, но такой вопрос (вижу что у вас на сайте она решена):
Возьмем допустим главное меню, там если прописывать бекграунд, размеры и прочее для ul li то ссылкой будет все равно только лишь текст (название ссылки меню). Так вот подскажите как сделать ссылкой весь блок li.

Profile picture for user Виталий
Mist
19.05.2015

Для этого нужно знать только css. Вариантов решения несколько. Если брать в пример этот сайт, то для ссылок можно прописать следующие нужные вам свойства:

display: block;
padding: 10px;