Add CSS3 Transition Effect To Drop Down Menu in blogger.

 
hello guys and welcome back In this 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.

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.

all is done .if you having any trouble with this post . contact me by email
sudershankhattri26@gmail.com..

happy blogging?????? 

• Tweet
• Share
• Share
• Share
• Share

About sudarshan khatri

Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.

Related Post