I'm trying to change the background color of the deepest level ul.menu. This way visitors can easily see in which 'section' of the menu/site they are. See attached screenshots of the menu on our current (non-Drupal) website. This is what I'm trying to recreate using Zen.

I haven't been able to do this using the active-trail class as that simply colors the background of the entire active-trail and not just the deepest level. I was unsuccessful targeting specific levels in the active-trail.

Does anyone know how to do this?

CommentFileSizeAuthor
active_menu_css2.png12.21 KBRedTop
active_menu_css.png8.18 KBRedTop

Comments

silurius’s picture

silurius commented

Have you looked at Menu Attributes yet? I have no idea if it will do what you need, but it's worth checking out as a possible alternative. You may be able to assign the appropriate class(es) there and get the same effect.

RedTop’s picture

RedTop commented

Thanks for that suggestion. :)

It looks as if that module allows me to target specific (static) menu items but it doesn't allow me to target something dynamic such as the deepest level ul.menu (sometimes a ul.menu is the deepest level and sometimes it isn't. The background-color should change accordingly).

hedley’s picture

hedley commented

Maybe try the Menu Trails module? http://drupal.org/project/menutrails

Or you may be looking at writing a theme function to add a class class to the current active menu or the deepest level of menu active.

akalata’s picture

akalata commented

This is probably a bit of a hack, since I'm a newb at modifying the menu structure. But, you could approach it by creating a theme function to apply a class to the first <ul> that's created by theme_menu_tree(), since the tree is built from the inside-out. Then you can use CSS to target that class within the active-trail.

<?php

function mytheme_menu_tree($tree) {
	if (strstr($tree,'deepest')) {
		// if there's already a "deepest" menu
		return '<ul class="menu">'. $tree .'</ul>';
	} else {
		return '<ul class="menu deepest">'. $tree .'</ul>';
	}
}

?>

should generate HTML like:

<ul class="menu">
	<li class="leaf first menu-mlid-1492"><a title="News" href="/news-list">News</a></li>
	<li class="expanded menu-mlid-396 active-trail"><a class="active-trail" title="[Subnav Item 1A]" href="/node/5">[Subnav Item 1A]</a>
    	<ul class="menu deepest">
        	<li class="leaf first last menu-mlid-507 active active-trail"><a class="active-trail active" title="[Subnav Item 1Ai]" href="/node/25">[Subnav Item 1Ai]</a></li>
		</ul>
    </li>
	<li class="expanded last menu-mlid-397"><a title="[Subnav Item 1B]" href="/node/6">[Subnav Item 1B]</a>
    	<ul class="menu deepest">
        	<li class="leaf first last menu-mlid-508"><a title="[Very Long Subnav Item Name 1Bi]" href="/node/26">[Very Long Subnav Item Name 1Bi]</a></li>
		</ul>
    </li>
</ul>

and you can target the deepest active <ul> using li.active-trail ul.deepest {}

RedTop’s picture

RedTop commented
Title: css for active ul.menu (not just active link) » css for active ul.menu (not just active link) - includes solution
Category: support » feature
Status: Active » Needs review

Marry me. :P

Not only did you hand me an excellent solution, you handed it on a silver platter as well!

+1 for adding this functionality to the Zen Theme!

spgd01’s picture

spgd01 commented
Component: CSS/HTML Markup » layout.css

Any one know how to adapt #4 for a multi level menu? 

<ul class="menu level1">
    <li>...</li>
    <li>...</li>
    <li> ..
      <ul class="menu level2">
        <li> ...
          <ul class="menu level3">
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </li>
    <li>...</li>
  </ul>
johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Needs review » Closed (won't fix)

The 6.x-2.x branch is in bug-fix only mode.