Использование сниппетов для построения разделенного многоуровневого меню

Авторы решений:

Задача:


    перевозка тракторов
  • Разделение расположения основных и второстепенных разделов меню.
  • Второстепенные разделы показываются только при выборе одного из основных.
  • Выделение активным классом всех родительских пунктов на всех уровнях.
  • Возможность вывода дерева меню (много уровней) в подразделах (чего нельзя добиться при использовании secondary_links)

Решение:

  1. Перейти: Админка → Конструкция → Меню
  2. Создать меню (можно создать необходимые пункты прямо в primary links - меню уже создано по умолчанию). Чтобы сделать его многоуровневым, выбирайте у пунктов родителя. Не нужно создавать 2 отдельных меню.
  3. Зайти на вкладку Настройки - выбрать:
    Меню, содержащее основные ссылки: ваше меню (Primary links)
    Меню, содержащее дополнительные ссылки: нет дополнительных ссылок.
  4. Написать в нужном месте в page.tpl.php такой код:
    Для primary_links
    <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links) ?><?php } ?>
  5. Расположим слева в page.tpl.php левую колонку:
    <?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
  6. Создадим блок в админке и поместим туда вот такой PHP код (источник):
    <?php
    $primary_menu_id
    = variable_get('menu_primary_menu', 0);
    if (
    menu_in_active_trail($primary_menu_id)){
     
    // get the menu items that lead to the current menu item
     
    $active_trail =_menu_get_active_trail();
     
    // get the menu id of the active top-level link
     
    $mid = $active_trail[1];
     
    $menu_item = menu_get_item($mid);
     
    $menu_tree = menu_tree($mid);
    print
    '<ul class="ВАШ КЛАСС ДЛЯ ЛЕВОГО МЕНЮ">'.$menu_tree.'</ul>';
    }
    ?>
  7. Для того чтобы сделать родительскую ссылку с class="active", воспользуемся TemplatePHP сниппетом с этой страницы. Вставляем в template.php данный код (без закрывающего ?>).
    <?php
    function phptemplate_links($links, $attributes = array()) {
      if (!
    count($links)) {
        return
    '';
      }
     
    $level_tmp = explode('-', key($links));
     
    $level = $level_tmp[0];
     
    $output = "<ul class=\"links-$level ".$attributes['class']. "\">\n";
      foreach (
    $links as $index => $link) {
       
    $output .= '<li';
        if (
    stristr($index, 'active')) {
         
    $output .= ' class="active"';
        }
    // frontpage AND current-link in menu is <front>
       
    elseif((drupal_is_front_page()) && ($link['href']=='<front>')){
         
    $link['attributes']['class'] = 'active';//add class active to <li
         
    $output .= ' class="active"';//add class active to <a
       
    }
       
    $output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
      }
     
    $output .= '</ul>';
      return
    $output;
    }
    ?>
  8. Теперь сделаем так, чтобы все родительские ссылки имели вид как у ссылки с class="active", решим эту проблему с помощью CSS.
    Такое меню генерирует код из блока.
    <ul class="sbtree">
    <li class="leaf"><a href="/Company_History">Company History</a></li>
    <li class="expanded"><a href="/Business_Units">Business Units</a>
      <ul class="menu">
       <li class="expanded"><a href="/Property_Development">Property Development</a>
        <ul class="menu">
         <li class="leaf"><a href="/board_committees" class="active">Board Committees</a></li >
         <li class="leaf"><a href="/Rules_of_Procedure">Rules of Procedure</a></li>
        </ul>
       </li>
       <li class="leaf"><a href="/Real_Estate_Funds">Real Estate Funds</a></li>
       <li class="leaf"><a href="/Russia">Russia</a></li>
      </ul>
    </li>
    <li class="leaf"><a href="/Corporate_Governance">Corporate Governance</a></li>
    </ul>

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

    ul.sbtree li a.active - просто активное меню второго уровня
    ul.sbtree li.expanded a - родительский пункт развернутого меню, содержащего активный пункт - хотим чтобы он был как активный
    ul.sbtree li.expanded ul.menu li a - дочерний неактивный пункт меню третьего уровня - хотим чтобы он был как неактивный
    ul.sbtree li ul.menu li a.active - дочерний активный пункт меню третьего уровня
    ul.sbtree li.expanded ul.menu li.expanded a - родительский пункт развернутого меню в развернутом меню - хотим чтобы он был как активный
    ul.sbtree li.expanded ul.menu li.expanded ul.menu a - дочерний неактивный пункт развернутого меню в развернутом меню - хотим чтобы он был как неактивный
    ul.sbtree li.expanded ul.menu li.expanded ul.menu a.active - - дочерний активный пункт меню четвертого уровня

Использованные материалы:

http://www.drupal.ru/node/13380

Creative Commons: ­Attribution-Share Alike 2.5

Данные материалы выложены под лицензией Creative Commons: ­Attribution-Share Alike 2.5. Это значит, что вы можете распространять, копировать и модифицировать эти произведения при условии упоминания авторства оригинала, и при условии, что они также будут распространяться на условиях этой лицензии (то есть, изменённую работу нельзя защитить копирайтом). Подробнее смотри: http://ru.wikipedia.org/wiki/Creative_Commons