jQuery SlideUp / SlideDown Navigation Menu Drop-Down

[rpotterjr]

I need some help with making a slideDown / slideUp drop-down navigation menu…

What I have so far is here: http://rptest.idkcreative.com/

I am trying to make the drop-down in the navigation silde down on mouseover/mouseenter and slide back up on mouseout/mouseleave, or the hover event, but to knowledge the hover event isn’t compatible in all browsers…

The ‘Portfolio’ link is all I need it for right now. The drop-down is functional, but…

I have tried this a few different ways and it is not working at all… The closest I got it would slide down, but stayed in a constant loop of sliding up and down once I stopped hovering over the ‘Portfolio’ link.

[martyd777]

Hi, take a look at this:

http://codepen.io/Martin-Duran/pen/Jxgvk

I think this is exactly what you’re looking for.

[rpotterjr]

Is there a way to control the speed, delay, and animation effect?

[rpotterjr]

Anyone?

[Paulie_D]

Have you checked the documentation?

Jquery API

[rpotterjr]

I can’t find anything on easing on there…

[Paulie_D]

Look under animate.

http://api.jquery.com/animate/

You will need the JQuery UI plug-in to add extra options

http://api.jqueryui.com/easings/

[Paulie_D]

I clean mine out every so often.

[Kuzyo]

here I tried easing jQuery plugin for simple menu http://codepen.io/Kuzyo/pen/xuFgC

[rpotterjr]

<p>Ok, I believe that I did just about the same thing as Kuzyo, but it’s not working…
http://cdpn.io/xuFgC</p&gt;

• This reply was modified 10 years, 9 months ago by rpotterjr.

[rpotterjr]

<p>http://cdpn.io/fGLen</p&gt;

[rpotterjr]

<p>http://codepen.io/rpotterjr/pen/fGLen</p&gt;

[rpotterjr]

[http://codepen.io/rpotterjr/pen/fGLen](http://codepen.io/rpotterjr/pen/fGLen “”)

[Author]

Posts