The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Dropdown Navigation Transition

  • # July 21, 2012 at 9:37 pm

    I was able to use an Ease Transition for the hover-over effect, but I can’t seem to get the same effect to work on the drop down portion of the navigation. I would like to either have it ease into place, or even better, gradually ease downward.

    Anyone have any tips? Here’s the code on CodePen.

    P.S. Thanks to Josh who helped me figure out some stuff with this nav before!

    # July 22, 2012 at 1:26 am

    This reply has been reported for inappropriate content.

    Figured it out.

    # July 28, 2012 at 6:25 pm

    Hey man, nice menu, really elegant.

    Just wondering why you went with adding class values to each li instead of an id? (I’m a beginner, trying to work out if class has some benefits over id in this case)

    – Paul

    # July 29, 2012 at 6:05 am

    This reply has been reported for inappropriate content.

    Thanks man : )

    My way may not have been the best, in fact, it probably wasn’t. The navigation was designed to be used on a WordPress site – so I had to add specific classes for each menu item because they have different colors when you hover over them.

    But the reason I used a class instead of an ID is because WordPress automatically assigns those classes to menu items. I was trying to keep the menu as dynamic as possible.

    Hope this helps! But maybe someone else can chime in with more details.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed