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.
