eric.dibari

Paul,

I came up with a css approach to the issue, as I wanted to have a sub-menu type navigation in the sidebar. I don’t know if it’s exactly what you’re searching for, but it’ll be a good start:

1. First, I call the menu function in the sidebar, and wrap it in a

<ul> with a new ID:
<ul id="sidebarSubMenu">
<?php wp_nav_menu(array( 'items_wrap' => '%3$s' )); ?>
</ul>

2. Next, I do some CSS styling. I just started this code yesterday, so it’s not polished to say the least. I should note that I’m using a language plugin (WPML?) that wraps all the menus in a ‘div’ tag right below that first ‘ul’. Essentially, I check to see if the ‘li’ or ‘ul’ has a class, or its ancestor has a class, of either current-menu-item, current-menu-parent, or current-menu-ancestor. I’m only using two levels deep, so you may need to re-work the code for deeper navigation sets.

ul#sidebarSubMenu {}
ul#sidebarSubMenu li {display: none; margin: 4px;}
ul#sidebarSubMenu a {text-decoration: none; font-size: 19px; letter-spacing: 1px; color: #333;}
ul#sidebarSubMenu a:hover {padding: 0 5px 0 10px; background-color: #d0d0d0; color: #000;}
ul#sidebarSubMenu .current-menu-item {font-weight: bold;}
ul#sidebarSubMenu .current-menu-item > ul {font-weight: normal;}
ul#sidebarSubMenu li.current-menu-parent, ul#sidebarSubMenu li.current-menu-ancestor {display: block;}
ul#sidebarSubMenu li.current-menu-ancestor *, ul#sidebarSubMenu li.current-menu-parent *, ul#sidebarSubMenu li.current-page-item * {display: block;}
ul#sidebarSubMenu > div > li > a {cursor: default; font-weight: bold; padding: 2px; font-size: 20px; text-transform: uppercase; width: 190px; border-bottom: 1px solid #ccc;}
ul#sidebarSubMenu > div > li > a:hover {padding: 2px; background-color: #fff; color: #333;}
ul#sidebarSubMenu ul.sub-menu ul.sub-menu {display: none;}
ul#sidebarSubMenu ul.sub-menu ul.sub-menu > li a {margin-right: 6px; font-size: 15px;}
ul#sidebarSubMenu li.current-page-ancestor > ul.sub-menu * {display: block;}
ul#sidebarSubMenu li.current-menu-item > ul.sub-menu {display: block;}
ul#sidebarSubMenu li.current-page-ancestor ul.sub-menu {display: block;}

Let me know if this approach works for you. If you clean up the css, I’d like to take a look at it.

-Eric