Drupal: How To Create Multi-Level Menu Using Snippets
In this article I would tell you about:
- Dividing main and secondary menu items
- Secondary items show when one of the main item is selected
- Highlighting of parent items at every level with an active class
- Ability to show menu tree (for multi-level menus) in submenus (which couldn’t be made using secondary_links)
Solution:
- Go to: Admin→ Construction→ Menu
- Create menu (you can create the necessary items right in primary links – the menu is already created by default). Choose items from a parent menu item to create multi-level menu. Don’t need to create 2 separated menus
- Open Settings and choose:Menu with primary links: your menu (Primary links)
Menu with secondary links: no additional links - Insert the following code to page.tpl.php:For primary_links
<?php if (isset($primary_links)) { ?><?php print theme(‘links’, $primary_links) ?><?php } ?> - Place left column in page.tpl.php:<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
- Create a block in admin area and place the following code there:<?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>';
}
?> - Use TemplatePHP snippet from this page to create a parent link with class=”active”. Insert the following code to template.php (without closing
?>
).<?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;
}
?> - Make parent links looking like links with class=”active”, solve this problem with the help of CSS.
Such menu is generated by the block code.<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>Menu classes for tracking 4 levels of multi-level:
ul.sbtree li a.active – active 2-level menu
ul.sbtree li.expanded a – parent item of an expanded menu with an active item – wish to make the item looking
ul.sbtree li.expanded ul.menu li a – child 3-level menu item – wish to make it looking inactive
ul.sbtree li ul.menu li a.active – child 3-level menu item
ul.sbtree li.expanded ul.menu li.expanded a – parent menu item in an expanded menu – wish it looking
ul.sbtree li.expanded ul.menu li.expanded ul.menu a – child inactive menu item in an expanded menu – wish it looking inactive
ul.sbtree li.expanded ul.menu li.expanded ul.menu a.active – – child active 4-level menu item