Question

I am trying to create a side menu using jQuery in which the div sideBarMinified will be hidden and hover and will display the sideBar. On mouseout, sideBar will be hidden and sideBarMinified will be displayed.

Here’s what I have :

HTML :

<div class="sideBarMinified">
    <div class="topClear">&nbsp;</div>
    <img src="images/miniLogo.png">
</div>
<div class="sideBar">
    <div class="topClearBig">&nbsp;</div>
    <img src="images/logo.png">
  <div class="menuClear"></div>
        <a href="#">Sample</a>
</div>

JS :

$(document).ready(function() {
    $(".sideBar").hide();
    $.backstretch(["images/cover.jpg"],{fade:2000});
    $(".sideBarMinified").mouseover(function(){
        $(".sideBar").show();
        $(".sideBarMinified").animate({left: "-=60px"}, 0 );
        $(".sideBar").animate({left: "+=272px"}, 500 );
    });
    $(".sideBar").mouseout(function() {
        $(".sideBar").animate({left: "-=272px"}, 500 );
        $(".sideBarMinified").animate({left: "+=60px"}, 700 );
    });
});

CSS :

div.sideBarMinified {
    position:absolute;
    left:0px;
    width:20px;
    height:100%;
    background-color:rgba(208,198,168,0.9);
    border-right:1px solid #333333;
    padding:0 15px 0 15px;
    z-index:999;
}
div.sideBar {
    position:absolute;
    left:-272px;
    width:272px;
    height:100%;
    background-color:rgba(208,198,168,0.9);
    padding:0 2px 0 45px;
    z-index:500;
}

The issue is when I hover on the <a> tag, the div sideBar is hidden and the div sideBarMinified is moving to the left. What is wrong with my code?

Answer 1

I think this code should work for you.

$(document).ready(function() {
$(".sideBar").hide();
$.backstretch(["images/cover.jpg"], {
    fade: 2000
});
$(".sideBarMinified").mouseover(function() {
    $(".sideBar").show();
    $(".sideBarMinified").animate({
        left: "-=60px"
    }, 0);
    $(".sideBar").animate({
        left: "+=272px"
    }, 500);


});
$(".sideBar").mouseleave(function() {

    $(".sideBar").animate({
        left: "-=272px"
    }, 500);
    $(".sideBarMinified").animate({
        left: "+=60px"
    }, 700);
}); });​