Drupal: How to Use Snippets to Building of Split-Level Menu
Problem:
- Splitting of primary and secondary menus.
- Secondary menus are shown when the primary menu item is selected.
- Selecting of all parent items (on all levels) as active class.
- Option to output menu tree (many levels) in submenus (you cannot do this using secondary_links)
Solution:
- Navigate to: Administer → Site building → Menu
- Create menu (You can create the necessary menu items right in primary links – menu is already created by default). To make it multilevel, select parent for menu items. There is no need to create two different menus.
- Open Settings tab and select:
- Insert the following code in page.tpl.php:
For primary_links
Menu with primary links: your menu (Primary links)
Menu with secondary links: no additional links
<?php if (isset($primary_links)) { ?><?php print theme(‘links’, $primary_links) ?><?php } ?>
5. At the lef of page.tpl.php, add this column:
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?>
6. Create block in admin area and put 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="YOU CLASS FOR LEFT MENU">’.$menu_tree.'</ul>';
}
?>
7. To make parent link with class="active", please use TemplatePHP snippet from here. Insert this 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;
}
?>
8. Then make all parent links look like links with class="active". We will solve this problem with the help of CSS. Such menu generates code from the block:
<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>
You may need these classes to track 4 levels of split menu:
ul.sbtree li a.active – just active menu of the second level
ul.sbtree li.expanded a – parent menu item which contains active item – we wish it to be as active
ul.sbtree li.expanded ul.menu li a – child inactive menu item of the third level – we wish it to show it inactive
ul.sbtree li ul.menu li a.active – child active menu item of the third level
ul.sbtree li.expanded ul.menu li.expanded a – parent item of expanded menu in expanded menu – we wish to show it active
ul.sbtree li.expanded ul.menu li.expanded ul.menu a – child inactive item of expanded menu in expanded menu – we wish to show it inactive
ul.sbtree li.expanded ul.menu li.expanded ul.menu a.active – child active item of 4-level menu