• урок
  • 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;