Problems making lava lamp drop down menu dynamic using Wordpress

Question

After a lot of work and a whole bunch of searching and combining code, I finally got my lava lamp drop down menu navigation to work (Look here: http://lookseewatch.com/overflowexample/menu.html). Great.

Here's the problem: I cannot for the life of me get it work with Wordpress menus (wp_nav_menu). I have been unable to get wp_nav_menu to generate the same markup as my current hard code. I also need to have this <div id="box"><div class="head"></div></div> INSIDE of "<ul class="nav">." wp_nav_menu does not allow me to do this because it generates the containing ul class and so on.

So after a few hours of trying different things, I just can't get it. If you go here http://lookseewatch.com/independentinsurance/ you'll see two navigations space by about 300 pixels. The first, is the hard-coded version, the second is generate by wp_nav_menu. I've changed the css to work with the second navigation, so the top is a little funny, but you will notice that the "magic line" follows both version of the navigation, which I thought was interesting. I just don't know how to get it below the dynamic version. The second problem is, when you hover over "Insurance Services" on the second navigation, all is fine, you then hover over "Commercial Insurance" and 3 new drop downs appear, when you go to hover or click one of these options, they quickly disappear. I have no idea why.

Here's the code for my navigation.js

var speed = 400;//speed of lava lamp
var menuFadeIn = 0;//speed of menu fade in transition
var menuFadeOut = 0;//speed of menu fade in transition
var style = 'easeOutQuart';//style of lava lamp
var totalWidth = 0;//variable for calculating total width of menu according to how many li's there are
var reducedWidth = 4;
(function($) {  
$(document).ready(function(){

    if($.browser.opera){
        $(".nav ul").css("margin-top", "32px");//opera fix for margin top
        $(".nav ul ul").css("margin-top", "-20px");
    }
    if(!$.browser.msie){// ie fix
        $("ul.nav span").css("opacity", "0");
        $(".nav ul ul ul").css("margin-top", "-20px");
    }
    if($.browser.msie){
        $("ul.nav span").css({visibility:"hidden"});
    }
       //totalWidth = $(".nav li:last").offset().left -  $(".nav li:first").offset().left + $(".nav li:last").width();//width of menu
       //$(".nav").css({width:totalWidth});//setting total width of menu

       var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu
       var dWidth = $('.current-menu-item a').width();
       var dTop = $('.current-menu-item a').offset().top;

       //var origLeft = .data($dLeft.offset().left+14);
       //var origWidth = .data($dWidth.width());
       //var origTop = .data($dTop.offset().top);

        //Set the initial lava lamp position and width
        $('#box').css({left:dLeft});
        $('#box').css({top: dTop});
        $('#box').css({width: dWidth});



    $(".nav > li").hover(function(){
        var position = $(this).offset().left+15;//set width and position of lava lamp
        var width = $(this).width()-29; 
        if(!$.browser.msie){//hover effect of triangle (glow)
            $(this).find('span:first').stop().animate({opacity: 1}, 'slow');
        }
        else{
            $(this).find('span:first').css({visibility:"visible"}); 
        }
        $('#box').stop().animate({left:position, width:width},{duration:speed, easing: style});
        }, function() {
            $('#box').stop().animate({left:dLeft, width:dWidth},{duration:speed, easing: style});
        },

        function(){
        if(!$.browser.msie){
            $(this).find('span:first').stop().animate({opacity: 0}, 'slow');//hiding the glow on mouseout
        }

        if($.browser.msie){
            $(this).find('span:first').css({visibility:"hidden"});      
        }           
    });



    $(".nav li").hover(function(){//animating the fade in and fade out of submenus level 1
           $(this).find('li').fadeIn(menuFadeIn); 
            $('li li li').css({display:"none"});
            },
           function(){  
                $(this).find('li').fadeOut(menuFadeIn); 
           });  

             $(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2 
                $(this).find('li').fadeIn(menuFadeIn);  
                $('li li li li').css({display:"none"});

            },
            function(){  
                $(this).find('li').fadeOut(menuFadeOut); 

            }); 
             $(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus  level 3
            $(this).find('li').fadeIn(menuFadeIn);  
            },
            function(){  
                $(this).find('li').fadeOut(menuFadeOut); 


            }); 


});

})($);

I think the problem lies in this area with how I am targeting the second or third level.

         $(".submenu0 li").hover(function(){//animating the fade in and fade out of submenus level 2 
            $(this).find('li').fadeIn(menuFadeIn);  
            $('li li li li').css({display:"none"});

        },
        function(){  
            $(this).find('li').fadeOut(menuFadeOut); 

        }); 
         $(".submenu1 li").hover(function(){//animating the fade in and fade out of submenus  level 3
        $(this).find('li').fadeIn(menuFadeIn);  
        },
        function(){  
            $(this).find('li').fadeOut(menuFadeOut); 


        }); 

Anyways, I appreciate the help. I need to figure out a work around for this, so if you have any suggestion please feel free to speak them. Also, if I need to provide any code snippets, I happily will. Anything to solve this navigation.

Answer 1

Ok so what you need is found in the Wordpress Codex. In the array of defaults for the wp_nav_menu() function (found here) you can see there's an option called items_wrap. Using this we can add your divs to the end of the menu:

<?php wp_nav_menu( array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>' ) ); ?>

--- EDIT ---

Ok what seems to be the issue with your submenu hover is this line:

$('li li li').css({display:"none"});

I took the liberty of creating a jsFiddle with your issue here: http://jsfiddle.net/zAqct/ As you can see the line in question is commented out and the hover seems to be working again. Obviously this isn't quite 100% so I have produced a simpler test case.

--- 2nd EDIT ---

Ok so on a further look I think the main issue is your CSS and JS is proving to be a little over complicated. To illustrate a simpler method I've updated the jsFiddle here: http://jsfiddle.net/zAqct/2/

You should find this version works more the way you need it to.