Animate Your Dropdown Navigation Menu with CSS3

Dropdown menus can almost be considered a web standard, and occur for example in many WordPress Themes. Now I’ve worked some times with Superfish plugin, which makes the transition between drop-down menu’s smoother, but it did not work optimal in all cases. Well, with CSS3, it is fairly easy to make a smoothly animated dropdown menu!

The good thing is, that we don’t need Javascript. The bad thing is, the animation will not work in older versions of IE. Well, I guess you would have expected that. Nevertheless, it saves a whole piece of Javascript and rewards users of normal browsers with supreme experience. This tutorial is based on the following basic menu structure, as often present in WordPress Themes

The Basic HTML Structure

For this tutorial, I assume a dropdown set-up which is similar as showed below:

Initial CSS set-up & CSS Transitions

The following CSS rules determine the basic styling of the dropdown menu. As you can see, it is just some comming css.

Why CSS Transitions will not work

Now I’ve written earlier about CSS3 transitions which can enhance the navigation experience in websites, by adding a transition time between different states (e.g. the transition from non-hover to hover takes 1 second to complete with an eased-out animation, allowing for example the smooth transition of color). Now the problem is that transition will not accept a transition between the css attributes display:none and display:block, so we can not use transition here. We might evade this by using the opacity attribute for example, but this gives problems with DropDown menus with more levels, as technically every child is present with an opacity value of zero, making it impossible to navigate through second-child level drop-down menu’s. So we have to use display: block;

Using CSS3 Animation

However, with CSS3 animation we can solve this problem! We just need to start a simple animates that animates opacity from 0 to 1 when we hover one of the menu-items. One small recap about CSS3 animations! This is the shorthand notation of CSS3 animation (excluding all the browser prefixes for now). W3schools give a terrible good explanation of animation, so if you are still unknown in this area, I will suggest to look there.

animation:
   <animation-name>
   <animation-duration>
   <animation-timing-function>
   <animation-delay>
   <animation-iteration-count>
   <animation-direction> 
   <animation-play-state>;

Now we still need to define an animation using keyframes. This is basically how it works:

@keyframes animation-name {
   from { property: value; } to { property: value; }
}

Now, using this knowledge, we can easily use this to animate our opacity within the Dropdown Menu! We first have to add some lines of code to what happens when we hover. Then, we just need to define our keyframes with the right name and values and we are done! As you can see we animate from opacity 0 to opacity 1, and we used display: block to display the menu again.

That’s it, using these animations the dropdown it’s opacity is animated. Of course the use of animation is much wider. It can be used to animate loading screens, flash like movement of website parts and so on. Of course there are a lot of other css properties to animate. Ever thought about position? Or transform scale? Or colors?  The possibilities are (almost) endless, as animate.css by Dan Eden proves.