1

Im trying to create a hidden navigation bar that, when hovered over, grows in width, and when the cursor leaves the navigation bar it shrinks back down to its original width. I'm using jQuery and Parallax.js but no combination of mouseenter or mouseleave etc seems to work. As an example of what i am trying to do follow the link:

http://www.glamour.biz/

basically i want to do the same top navigation but on the left side of my page. This is my javascript:

$("#navigation").mouseenter(function(){
$("#navigation").animate({
    opacity: 1,
    width: "200px"
    },500,"swing"
);
$("#navigation ul").animate({
    opacity: 1,
    },500,"swing"
);
});

$("#navigation > ul").mouseleave(function(){
$("#navigation").animate({
    opacity: .75,
    width: "40px"
    },500,"swing"
);
$("#navigation ul").animate({
    opacity: 0,
    },500,"swing"
);  
});

The following is my HTML:

<div id="navigation">
        <ul>
            <li id="aboutb">Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
            <li>Resume</li>
        </ul>   
</div>

I basically run into the problem of the div running through the animation more than once, or it won't stay expanded while i am hovered over the div. I do have another page wide div behind this navigation bar div.

thanks for any help!

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
Alex Fromm
  • 11
  • 1

1 Answers1

0

I've set up an example here:

http://jsfiddle.net/fGnVd/

The problem you were facing was occurring because you didn't set the overflow of the div to hidden, this caused the menu to expand on entering the ul which was not visible, but was outside the div.

Please check if it is working in the example at the link.

Vishal
  • 2,030
  • 22
  • 27