Drupal primary menus used for top navigation dropdowns and sidebar local navigation

On a site I am working on, the theme is Acquia Prosper. The Primary Menu for the top navigation uses Superfish dropdowns if you turn them on. If you want a menu item to have a dropdown, you need to make sure that menu item is set to Expanded.

However, in many situations, you will also use the Primary menu for local navigation, so users can easily see what section of the site they are in, what page they are on and what other menu items are in that section.

The problem? Because the menu items are set to Expanded, instead of just seeing the sub-items for the section you are in, you see the sub-sections for every part of the site.

I played around with the code to create a fix for this, and I thought I would share it:

#block-menu-primary-links ul.menu li.expanded ul
{
display:none;
}
#block-menu-primary-links ul.menu li.expanded {
    list-style-image: url("/misc/menu-collapsed.png");
}

#block-menu-primary-links ul.menu li.active-trail ul
{
display:block;
}
#block-menu-primary-links ul.menu li.active-trail
{
    list-style-image: url("/misc/menu-expanded.png");
}
#block-menu-primary-links ul.menu li.active-trail.leaf
{
    list-style-image: none;
    list-style: disc;
}

This will ensure that only menus in the active trail will be expanded in the primary links in the sidebar.

You may need to use slightly different code for your theme, but hopefully this serves as a useful starting point.

Just for the record, I believe this is a very common way to use the Primary menu, and more intelligent defaults are necessary to handle this sort of situation.

Archives