[jQuery] Help with LavaLamp
Hi
I keep having problems integrating a JQuery Lavalamp with Submenus. Take a look at <a href="http://karen.2kmegs.com">http://karen.2kmegs.com</a> the lavaLamp feature only works when hovering on the submenu items. I would like it to move when hovering on the root item like for example Products.
My Javascript code is
<script type="text/javascript">
function fademenu() {
$('.fade').hover(
function () {
$(this).animate({backgroundColor:'#4fb4f7', color:'White'}, {queue:false,duration:900});
}, function () {
$(this).animate({backgroundColor:'Transparent', color:'#727272'}, {queue:false,duration:900});
});
}
$(document).ready(function(){
fademenu();
slider();
});
function slider() {
closetimer = 0;
if($("#nav")) {
$("#nav b").mouseover(function() {
clearTimeout(closetimer);
if(this.className.indexOf("clicked") != -1) {
$(this).parent().next().slideUp(700);
$(this).removeClass("clicked");
}
else {
$("#nav b").removeClass();
$(this).addClass("clicked");
$("#nav ul:visible").slideUp(700);
$(this).parent().next().slideDown(700);
}
return false;
});
$("#nav").mouseover(function() {
clearTimeout(closetimer);
});
$("#nav").mouseout(function() {
closetimer = window.setTimeout(function(){
$("#nav ul:visible").slideUp(700);
$("#nav b").removeClass("clicked");
}, 900);
});
}
}
$(function() {
$("#nav").lavaLamp({
fx: "linear",
speed: 500
});
});
and my css is
#nav, #nav ul {padding:0; margin:0 auto; list-style:none; background:#fff;}
#nav {position:relative; z-index:50;}
#nav ul {display:none;}
#nav li {position:relative;}
#nav li a {text-decoration:none; font-family:Verdana, Geneva, sans-serif, serif; font-size:12px; font-weight:bold; white-space:nowrap}
#nav li b {display:block; padding:0 20px 0 20px; text-align:center; cursor:pointer; height:30px; line-height:42px; font-weight:normal; color:#FFFFFF;}
#nav li a b.clicked {color:blue;}
#nav li ul {position:absolute; left:0; top:38px; height:auto; float:left; background:white url(images/HoverSub.png) no-repeat top; padding:2px; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px solid #cccccc;}
#nav li ul.w1 {width:180px;}
#nav li ul li {float:none;}
#nav li ul li a {display:block; height:25px; line-height:22px; padding:0 10px; color:#727272; font-size:10px; font-weight:normal; background:white;}
#nav li ul li a:hover {background:white; color:#fff;}
.lavaLamp {
position: relative;
padding: 0px 0px 0px 6px;
z-index:999;
top:9px;
}
.lavaLamp li {
float: left;
list-style: none;
}
#nav li.back {
background:#cccccc;
height: 38px;
width:12px;
z-index: -1;
position: absolute;
padding-right: 0px;
}
#nav li.back .left {
background:#cccccc;
height: 38px;
margin-right: 12px;
}
.lavaLamp li a {
z-index: 10;
}
.menuBg{
background:#4fb4f7;
height:47px;
z-index:999;
}
I would glady appreciate if anyone can help me on this issue.
Thanks a lot
Karen Morales