Nav Menu Display

Question

Hi I'm wanting to create a custom navigation menu that will require creating 2 div containers to hold the SUB-MENU set. In other words I want to do this:

<div id="access">
   <div class="menu">

      <ul class="parent">
         <li>
            <div class="children-outer">
               <div class="children-inner">
                  <ul class="child">
                     <li></li>
                     <li></li>
                  </ul>
               </div>
            </div>
          </li>
       </ul>

   </div> <!--menu-->
 </div> <!--access-->

I'm doing this because I'm using about 3 different background images.

How would I go about adding this into the wp_nav_menu function? Do I add a filter in functions.php, or do I create a separate PHP file to do this?

Any helpful suggestions would be greatly appreciated.

Answer 1

Register your menus in functions.php like so:

if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
            'my_main_menu' => 'Main Menu: description',
            'my_sub_menu' => 'Sub Menu: description',
            'my_footer_menu' => 'Footer Menu: description'
        )
    );
}

Add the menu to the template like so:

<?php wp_nav_menu( array( 
    'sort_column' => 'menu_order', 
    'theme_location' => 'my_main_menu', 
    'container_class' => 'main-menu' 
    ) 
); ?>

The function adds a container class, so you might want to consider trimming some of that markup.