Add CSS3 Transition Effect To Drop Down Menu

In today tutorial, we will be playing with the structure of drop down/custom menu by adding ease-in-out effect to the menu. Ease-in-out is a great property that allow you to take the total control of your widget by including a timer.
This effect allow smooth soft mouse hover effect along navigation menu with fading touch, in which the effect of the scrolling depends on the time set for the rollover between the menu.

Navigation Menu Tutorials

Add Awesome CSS3 Drop Down Menu To Blogger Blog

Add CSS3 Drop Down Menu To Blogger

Create Simple Drop Down Menu In Blogger Blog

How To Add Drop Down Menu In New Blogger Template

Add CSS3 Transition Effect To Drop Down Menu

DEMO: For you to have a better understanding of this tutorial, simply roll your mouse between the navigation menu of this site and see the awesome effect.

How To Add Transition effect

It is advisable that you read the previous posts listed above for more clarification of the tutorial. The code for the transition effect is shown below.

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

The ease-in-out effect is timed 0.2 second for perfect mouse hover effect between the navigation menu.
Now look into your navigation CSS menu, you will have a similar menu class that control the menu hover effect as shown in the example below.

#nav ul li a:hover,
--------
--------
--------
--------
}

Now add the transition effect code to your navigation menu CSS code as shown below.

#nav ul li a:hover,
--------
--------
--------
--------
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -ms-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;

} 

The class of your navigation menu class may not start with #nav, it may be different in your case, but your menu CSS code will have a tag similar to the example illustrated above containing li a:hover class. This part control the hover effect of navigation menu, that is why we are applying the transition code below it.

Now save your changes and you are done.
If you need any further help, don't hesitate to ask, and we like to hear your feedback

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz