jQuery dropdown menu animation

Question

I have the typical submenu structure:

<ul>
  <li>
    <a href="#">Parent link</a>
    <ul>
      <li><a href="#">Submenu link</a></li>
    </ul>
  </li>
</ul>

and in design/html mockups, I would use CSS3 transitions to animate the submenus but since pointer-events: none isn't a practical alternative for display: none, this method isn't great for live sites.

I figure jQuery would be the only way to create the cross-browser animation I want. When the parent <li> is hovered, I want the submenu to go from 0 opacity to 100, but also rise up with a margin change.

I know it sounds confusing, but here's a basic version of what I'm looking for: http://jsfiddle.net/jwq5R/ (only works correctly in browsers that support pointer-events and CSS3 transitions) but only with the animation done with jQuery.

I researched and I just can't get anything to work so far to get the effect I want.

Any help would be appreciated. Thanks in advanced.

Andy · Accepted Answer · 2011-10-09 06:30:34Z

4

Try this:

http://jsfiddle.net/jwq5R/1/

$(function(){
    $('#nav>li').hover(function() {
        $(this).closest('li').find('>ul').css({
            'opacity': 0,
            'margin-top': 15
        }).show().animate({
            'margin-top': 0,
            'opacity': 1
        }, 300);
    }, function() {
        $(this).closest('li').find('>ul').fadeOut(200, function() {
            $(this).hide();
        });
    });
});

edited Oct 9, 2011 at 6:30

answered Oct 8, 2011 at 14:04

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

scferg5 Over a year ago

Your jsfiddle is brilliant, except I can't even get it to work... I copied/pasted all of your code exactly and still nothing. I'm not seeing the issue. This is what I have: scferg.com/menutest.html

thirtydot Over a year ago

@user984008: You need <html>/</html> and more importantly a doctype as the very first line, such as <!DOCTYPE html>. You also need to use .ready().

Andy Over a year ago

@user984008 updated my code. you forgot the jquery .ready() as thirtydot said

Collectives™ on Stack Overflow

jQuery dropdown menu animation

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related