wp-nav-menu inside bounding box

  • Flanna

    (@flanna)


    13 years, 3 months ago

    How can I put an extra (DIV) bounding box around menus and sub-menus?
    Here is the structure that I would like to have:

    <div class='box'>
  <div class='container'>
   <ul class='menu-main-menu'>
    <li class='menu-item'>
     <a>link</a>
    </li>
    <li class='menu-item'>
// Begin sub menu
     <div class='box2'> // NEW DIV
      <div class='container2'> // NEW DIV
       <ul class='sub-menu'>
        <li class='menu-item'>
         <a>link</a>
        </li>
        <li class='menu-item'>
         <a>link</a>
        </li>
       </ul>
      </div> // end div 'box2'
     </div> // end div 'container2'
// End sub menu
    </li>
    <li class='menu-item'>
     <a>link</a>
    </li>
   </ul>
  </div>
 </div>

    Can anyone help with a function that I could put in functions.php and then use in place of the standard wp-nav-menu?

Viewing 3 replies - 1 through 3 (of 3 total)
  • jeFFF

    (@jefff)

    13 years, 3 months ago

    Hello,

    Did you try to do it using only jQuery ?
    This does the trick and suits your needs :

    <script type="text/javascript">
	jQuery(document).ready( function() {
		jQuery('.menu-main-menu').wrap('<div class="box"><div class="container"/></div>');
		jQuery('.sub-menu').wrap('<div class="box2"><div class="container2"/></div>');
	} );
</script>

    The other way is to extends the Menu Walker but it takes more time.

    Hope this is useful
    Cheers,
    jeFFF

    Thread Starter Flanna

    (@flanna)

    13 years, 3 months ago

    Thanks jeFF. I don’t think I can use this though as I want to use another JavaScript library to manage the menus (not jQuery). I don’t think it is possible to call one library from a function of another library.
    Where does the markup for the menu get generated? How could I extend Menu Walker?

    jeFFF

    (@jefff)

    13 years, 3 months ago

    Hello,

    Ok I don’t know if using another Javascript library is the best option as jQuery is by default implemented in WP but that’s another debate 😉

    You’ll find on my blog a way to extends the menu walker here :
    Fixing the menu part 1

    In my tutorial I take care only of the “li” structure, in your case, you have to implement 2 more functions which construct the “ul”.

    You can do that with adding this function :

    function start_lvl(&$output, $depth) {
		$indent = str_repeat("\t", $depth);
		$output .= "\n$indent<div class=\"'box2\"><div class=\"'container2 \"><ul class=\"sub-menu\">\n";
	}

    and that one :

    function end_lvl(&$output, $depth) {
		$indent = str_repeat("\t", $depth);
		$output .= "$indent</ul></div></div>\n";
	}

    This is just what you want.

    Hope this is helpful,
    cheers
    jeFFF

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘wp-nav-menu inside bounding box’ is closed to new replies.