I'd like to suggest adding the ability to style top-level parent menu items who have an "active" child. By "active" I mean the menu item for the page you're on (i.e. ones whose <a/> is tagged with class="active").

The problem is that when the active menu is hidden, there's no visual feedback to let the user know where they are in the menu.

I've implemented it in my own version:

In nice_menus.module:

function _nice_menu_tree($pid = 1) { 
  $menu = menu_get_menu($pid); 
  $output['content'] = ''; 

  $output['subject'] = $menu['items'][$pid]['title'];

  /* KLS: Sat Jul 15 17:31:17 CDT 2006
   *      Get the active navigation links appropriate for breadcrumb rendering
   *      except that we'll use it to add a class 'active' to the <li/>s
   *      (usually given only <a/>s). 
   *    - http://api.drupal.org/api/4.7/function/menu_get_active_breadcrumb
   */
  $trail = _menu_get_active_trail();
  
  if ($menu['visible'][$pid]['children']) {
    foreach ($menu['visible'][$pid]['children'] as $mid) {
      $is_active = array_search($mid, $trail);
      if (count($menu['visible'][$mid]['children']) > 0) {
        $class_tags = $is_active ? " class=\"active menuparent\"" : "class\"menuparent\"";
        $output['content'].= "<li id=\"menu-$mid\"$class_tags>".menu_item_link($mid);
        $output['content'].= "<ul>";
        $tmp = _nice_menu_tree($mid);
        $output['content'].= $tmp['content'];
        $output['content'].= "</ul>";
        $output['content'].= "</li>";
      } 
      else {
        $class_tags = $is_active ? " class=\"active\"" : "";
        $output['content'].= "<li id=\"menu-$mid\"$class_tags>".menu_item_link($mid)."</li>";
      }
    }
  }
  return $output;
}

Then you can style using:

ul.nice-menu li.active {
  background-color: myactivemenuitemcolor;
  }

Comments

ivrh’s picture

Hi.

I tried to use your code for Drupal 5.2 and couldn't make it working. I have changed $pid to my current menu, though.
Could you give any suggestions of how to use it with Drupal 5.2 and nice_menu.module?

Thank you.

seppicus’s picture

Version: 4.7.x-1.x-dev » 5.x-1.x-dev

Hey,

I got it working with 5.2.

<?php
function theme_nice_menu_tree($pid = 1, $menu = NULL) {
  $menu = isset($menu) ? $menu : menu_get_menu();
  $output['content'] = '';

  $output['subject'] = $menu['items'][$pid]['title'];
  /* Get the active trail */   
  $trail = _menu_get_active_trail();
  
  if ($menu['visible'][$pid]['children']) {
    foreach ($menu['visible'][$pid]['children'] as $mid) {
      /* check if it is in the active trail */
      $is_active = array_search($mid, $trail);
	  // Build class name based on menu path e.g. to give each menu item individual style.
      $path_class = 'menu-path-'. str_replace('/', '-', $menu['items'][$mid]['path']);
      /* Add the active tag to $path_class */
      $path_class .= $is_active ? " active ": "";
      if (count($menu['visible'][$mid]['children']) > 0) {
        $output['content'] .= '<li id="menu-'. $mid .'" class="menuparent '. $path_class .'">'. menu_item_link($mid);
        $output['content'] .= '<ul><!--[if lt IE 7]><iframe></iframe><![endif]-->';
        $tmp = theme('nice_menu_tree', $mid);
        $output['content'] .= $tmp['content'];
        $output['content'] .= '</ul>';
        $output['content'] .= '</li>';
      }
      else {
        $output['content'] .= '<li id="menu-'. $mid .'" class="'. $path_class .'">'. menu_item_link($mid) .'</li>';
      }
    }
  }
  return $output;
}
?>
add1sun’s picture

Status: Active » Closed (duplicate)

Oy, OK apparently there were a bunch of duplicate issues on this. They should have all gone in here as this was the oldest but apparently people didn't search or the title wasn't clear enough. Anyway, I'm marking this as a duplicate of http://drupal.org/node/171693 and I have cross-posted a link here from that issue. Please keep all further discussion in that one issue so we can consolidate the work. Also rolling a patch would make testing easier and make it more likely to get into the module.

codevoice’s picture

I'd like to point out a problem with this solution (the one by seppicus in comment #2, I didn't try the original one):

The "li" does indeed get tagged as "active" when you're on that page. However, it also gets tagged as active if the user is on one of the pages in the submenu below that item.

This might be by design, but it causes problems if you're doing rounded edges using the sliding doors technique (http://www.alistapart.com/articles/slidingdoors/) or similar, where you need both the "li" and the "a" to be "in sync" (either both marked active somehow, or neither).

I'm looking for a solution to this, if it happens to apply to your situation. If I find it I'll post!

murz’s picture

On drupal 6.x this isn't work.
$trail = _menu_get_active_trail(); must be changed to $trail = menu_get_active_trail(); but after that $is_active = array_search($mid, $trail); can't search the current items in $trail object. May anybody have the patch for Drupal 6.x?