Ask your WordPress questions! Pay money and get answers fast!

How do I create a multi-tiered wp_nav_menu? WordPress

SOLVED

I'm in the middle of making my own theme, but I have run into some trouble. I'm using the new wp_nav_menu function, and I'm running WP 3.0.1.

As you might already know, wp_nav_menu is nesting the sub-menus into the parent ul. This seems to be the main problem. If I could find out how to write a custom walker that would output ONLY the active menu's sub-menu (if any), and output it below the parent menu, I could get this to work.

Here's how I want it to look:
http://www.alekstef.com/rot/Skjermbilde%202010-09-18%20kl.%2015.53.55.png

The menu you can see in the screenshot is achieved with alot of dirty CSS tweaking. As you can see, the page title is not affected by the sub-menu due to the position, which is set to absolute. That's the only way I get it to look the way I want. However, this does not work satisfactory in IE, and, like I mentioned, other items don't move according to it.

SO - to summarise: I need someone to (help me) write a custom wp_nav_menu walker that removes the nesting, puts every sub menu in its own div below the main menu, and shows only the active page's subpages in the menu.

I think that was all.. Be sure to ask if something is unclear, or if you have a question. Thanks in advance!

Best regards,
Aleksander Steffensen

2010-09-18 by Aleksander Steffensen

Answers (10)

2010-09-18

Khanh Cao answers:

Not sure how are you going to deal with the CSS and jQuery but here is a quick and dirty walker to use with a 2-level menu:

class My_Walker extends Walker_Nav_Menu { function walk( $elements, $max_depth) { $tops = array(); // top level menu items $subs = array(); // sub menu items foreach ($elements as $element) { if (0 == $element->menu_item_parent) $tops[] = $element; else $subs[] = $element; } // group sub items by their parents $real_subs = array(); foreach ($subs as $item) { $real_subs[$item->menu_item_parent][] = $item; } // show top level elements $s = '<ul id="tops">'; foreach ($tops as $item) { $classes = join(' ', $item->classes); $s .= "<li id='menu-{$item->db_id}' class='$classes'>{$item->title}</li>"; } $s .= "</ul>"; // show sub menu items foreach ($real_subs as $k => $items) { $s .= "<ul class='hidden menu-$k'>"; foreach ($items as $item) { $classes = join(' ', $item->classes); $s .= "<li id='menu-{$item->db_id}' class='$classes'>{$item->title}</li>"; } $s .= '</ul>'; } return $s; } }

The output is:
<ul id="tops"> <li id="menu-527" class=" menu-item menu-item-type-">Parent 1</li> <li id="menu-741" class=" menu-item menu-item-type-post_type">Parent 2</li> <li id="menu-742" class=" menu-item menu-item-type-post_type">Parent 3</li> <li id="menu-743" class=" menu-item menu-item-type-post_type">Parent 4</li> </ul> <ul class="hidden menu-527"> <li id="menu-738" class=" menu-item menu-item-type-post_type">Child 1-1</li> <li id="menu-739" class=" menu-item menu-item-type-post_type">Child 1-2</li> <li id="menu-740" class=" menu-item menu-item-type-post_type">Child 1-3</li> </ul> <ul class="hidden menu-741"> <li id="menu-786" class=" menu-item menu-item-type-post_type">Child 2-1</li> <li id="menu-791" class=" menu-item menu-item-type-post_type">Child 2-2</li> <li id="menu-793" class=" menu-item menu-item-type-post_type">Child 2-3</li> </ul>

This gets the sub menu items of a top level item:
var menu_id = $('#top li:first-child').id(); // first item's id var sub = $('.hidden').hasClass(id);

But it's up to you to arrange the menu items, this only shows how create a simple walker.