Add custom markup to Wordpress menu

I've been search for a long time now for a solution to this problem but found nothing so you guys will be my last hope!

I'm trying to build a new CSS3 menu on a Wordpress 3 site that I'm working on. I would need to extend the default menu mark-up but not sure how.

This is the tag I'm using in the theme to output the menu at the moment:

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

At the moment my default menu mark-up looks like this:

<div class="menu-header">
 <ul id="menu-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <ul class="sub-menu">
    <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
    <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
   </ul>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

I need to add 2 div's around each <ul class="sub-menu">...</ul> So I would need the mark-up to look like this:

<div class="menu-header">
 <ul id="men开发者_开发技巧u-main-menu" class="menu">
  <li id="menu-item-62" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-43 current_page_item menu-item-62"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-70"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-71" class="menu-item menu-item-type-taxonomy menu-item-71"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-220" class="menu-item menu-item-type-post_type menu-item-220"><a href="#">Top Level Menu Item</a></li>
  <li id="menu-item-129" class="menu-item menu-item-type-post_type menu-item-129"><a href="#">Top Level Menu Item</a>
   <div class="sub-menu-container">
    <div class="submenu">
     <ul class="sub-menu">
      <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-206"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-207"><a href="#">Sub Level Menu Item</a></li>
      <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-200"><a href="#">Sub Level Menu Item</a></li>
     </ul>
    </div>
   </div>
  </li>
  <li id="menu-item-243" class="menu-item menu-item-type-post_type menu-item-243"><a href="#">Top Level Menu Item</a></li>
 </ul>
</div>

Does anyone know how to do this please?

According the Wordpress documentation http://codex.wordpress.org/Function_Reference/wp_nav_menu#Example, just add a Walker to the menu:

<?php wp_nav_menu( array(
    'container_class'=>'menu-header',
    'theme_location'=>'primary',
    'walker'=>new my_Walker_Menu_List() //This is the trick!
)); ?>

And then in your theme's functions.php file add the following code:

class my_Walker_MegaMenu extends Walker_Nav_Menu{
    /**
     * @see Walker::start_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "\n$indent<ul class=\"sub-menu\">\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "\n$indent<div class=\"sub-menu-container\"><div class=\"submenu\"><ul class=\"sub-menu\">\n";
    }

    /**
     * @see Walker::end_lvl()
     * @since 3.0.0
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @param int $depth Depth of page. Used for padding.
     */
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        //$output .= "$indent</ul>\n"; //this is default output;

        //if( $depth==0 ) //'0'==>1st-sub-level; '1'=2nd-sub-level; ....
        $output .= "$indent</ul></div></div>\n";
    }
}

Conditionally, we can check the value of $depth to output custom markup only for desired sub-level(s);

For more information, you can see: http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

The menu markup is generated in wp-includes/classes.php with Walker class, specifically class Walker_Page extends Walker {

If you look through the functions in the class you can see where the actual markup is generated.

http://codex.wordpress.org/Function_Reference/Walker_Class

This may help:

Combine wp_nav_menu() with a custom walker class

http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output

Combine wp_get_nav_menu_items() with the clean_custom_menus() function

http://digwp.com/2011/11/html-formatting-custom-menus/

You could just use a jQuery .wrap function, like

$('div.submenu').wrap('<div class="sub-menu-container" />');

Don't forget to add the proper jQuery .js to your header.

You should probably use a .ready() function also.

Not exactly sure what you are needing, but here is some reference on creating a custom WP menu.

In the database look in the wp_posts table. Here is where the navigational menu items are located.

For custom CSS you can use the CSS Editor. It can be found under Edit CSS in the Presentation tab of your dashboard. It consists of a blank area for typing and two buttons. You can make live changes and see the result instantly.

To use a Custom Navigation Menu in place of your theme’s default menu, support for this feature must be registered in the theme's functions.php file.

See: http://codex.wordpress.org/Navigation_Menus AND http://codex.wordpress.org/Function_Reference/register_nav_menus