Grow your CSS skills. Land your dream job.

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.

    http://codepen.io/JeremyEnglert/pen/rtFbA

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

    # July 22, 2012 at 1:26 am

    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

    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.

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