Grow your CSS skills. Land your dream job.

jQuery SlideUp / SlideDown Navigation Menu Drop-Down

  • # July 17, 2013 at 2:11 pm

    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.

    # July 17, 2013 at 2:14 pm

    Hi, take a look at this:

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

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

    # July 17, 2013 at 3:23 pm

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

    # July 18, 2013 at 12:25 pm

    Anyone?

    # July 18, 2013 at 12:57 pm

    Have you checked the documentation?

    Jquery API

    # July 18, 2013 at 1:15 pm

    Yeah, with that code you only need to look at the documentation to easily work those things out.

    # July 18, 2013 at 2:18 pm

    I can’t find anything on easing on there…

    # July 18, 2013 at 2:35 pm

    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/

    # July 18, 2013 at 3:11 pm

    Question: Do these codepen things stay active indefinitely, or if I want the code from one I should copy it asap?

    # July 18, 2013 at 3:16 pm

    I clean mine out every so often.

    # July 18, 2013 at 3:17 pm

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

    # July 18, 2013 at 3:19 pm

    >I clean mine out every so often.

    ‘Tis cool, just created an account and forked the above. Cheers.

    # July 21, 2013 at 7:56 pm

    <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 9 months ago by  rpotterjr.
    # July 21, 2013 at 8:03 pm

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

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".