I'm currently developing a jQuery function to implement the "lavalamp" effect on my navigation bar.
Everything seems to be working smoothly, except for one issue. If you hover over an item (e.g., Community Service) and then move your mouse away from the navigation bar, the #movingBox div resets to the Home item as expected. However, only the #movingBox .left div is visible while the other two disappear.
I need to fix this glitch before I can use it in a production environment.
HTML
<div id="navArea">
<div id="navBar" class="noscript">
<ul class="parent">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">After Care</a></li>
<li><a href="#">Repair</a></li>
<li><a href="#">Store</a>
<ul class="sub">
<li><a href="#">Cat 1</a></li>
<li><a href="#">Cat 2</a></li>
<li><a href="#">Cat 3</a></li>
<li><a href="#">Cat 4</a></li>
</ul></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community Service</a></li>
</ul>
<div id="movingBox">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
</div>
<div id="mainContent">
</div>
CSS
#navArea{
height: 48px;
width: 100%;
background-image: url(../img/navBG.png);
background-repeat: repeat-x;
font-size: 15px;
font-family: 'BPreplayBold', Helvetica, Arial, sans-serif;
}
#navBar {
margin-right: auto;
margin-left: auto;
position: relative;
width: 636px;
}
#navBar ul{
padding: 0;
margin: 0;
z-index: 20;
position: absolute;
}
#navBar ul li{
float: left;
list-style: none;
}
#navBar ul li a{
padding-left: 15px;
padding-right: 15px;
height: 45px;
display: block;
text-decoration: none;
text-align:center;
line-height: 45px;
color: #EBEBEB;
}
#navBar ul li ul li{
width: 222px;
float: none;
}
#navBar ul li ul li a{
padding: 0px 15px;
display:block;
height:25px;
line-height:25px;
background: url('../img/navBG.png');
background-repeat: repeat-x;
}
#navBar ul li ul li a:hover{
background: #2abcf2;
}
#navBar #movingBox {
height: 46px;
width: 70px;
left: 0;
top: 0;
z-index: 19;
position: absolute;
}
#navBar #movingBox .left {
background-image: url(../img/hBoxL.png);
float: left;
width: 7px;
height: 46px;
}
#navBar #movingBox .right {
float: left;
height: 46px;
width: 7px;
background-image: url(../img/hBoxR.png);
}
#navBar #movingBox .middle {
background-image: url(../img/hBoxM.png);
background-repeat: repeat-x;
height: 46px;
float: left;
width: 56px;
}
jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#navBar").removeClass("noscript");
$("#navBar ul.sub").hide();
$("#navBar li").hover(function(){
$(this).find('ul.sub').slideToggle(150);
});
$("#navBar li").mouseover(function(){
hoverItemLeft = Math.round($(this).offset().left - $("#navBar").offset().left);
hoverItemWidth = $(this).width();
$("#movingBox").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth}, 350, 'easeOutBack');
$("#movingBox .middle").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth-17}, 350, 'easeOutBack');
});
$("#navBar").mouseleave(function(){
activeItemLeft = Math.round($("#navBar li.active").offset().left - $("#navBar").offset().left);
activeItemWidth = $("#navBar li.active").width();
$("#movingBox").stop().animate({"left": activeItemLeft, "width": activeItemWidth}, 350, 'easeOutBack');
$("#movingBox .middle").stop().animate({"left": hoverItemLeft, "width": hoverItemWidth-17}, 350, 'easeOutBack');
});
});
</script>
Thank you for your assistance!
EDIT: Made a silly mistake on my end. In my last animate call, I unintentionally used the hoverItem variables. Feel free to use my code if you're looking for similar functionality, but remember to correct it.