WordPress.org

Ready to get started?Download WordPress

Forums

wp-nav-menu inside bounding box (4 posts)

  1. Flanna
    Member
    Posted 3 years 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?

  2. jeFFF
    Member
    Posted 3 years 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

  3. Flanna
    Member
    Posted 3 years 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?

  4. jeFFF
    Member
    Posted 3 years 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

Topic Closed

This topic has been closed to new replies.

About this Topic