Add CSS3 Transition effect To a Drop Down Menu

Add CSS3 Transition effect To a Drop Down Menu

CSS3 TRANSITION EASE-IN-OUTEver since The World Wide Web Consortium (W3C) introduced CSS3 and HTML5, websites, content management systems and online web tools  took a whole new shape. Classic and traditional layouts created using tables no more exists and today we play with well developed style properties to better control the positioning of objects. In our previous post we learnt how to add a drop down menu list to a horizontal menu and in earlier posts you learnt in detail how to create menus but today we will play with the structure we created and will add cool ease-in-out effects. Ease-in-out effect is an interesting property that lets you control the display using a timer. This along with some other attributes made animation in CSS3 possible. With ease-in-out we can add soft mouse hover effect to the navigation menus. Whether you may be a Blogger user or Wordpress, todays' post will give a new look and easing touch to your menu.

DEMO: For demo please roll over your cursor at this blog's Menu at the top.

You will observe a smooth slow motion mouse hover effect and along with a fading touch. Normally menus only change background color on mouse over but today's tutorial and coming posts will help you creating flipping, opaque and swinging effects too.


Navigation Menu Tutorials
1. How To Create a Drop Down Menu?
2. Convert any Horizontal Menu into a Drop Down Menu
3. Add CSS3 Transitions To a Drop Down Menu
4. Create Animated Drop Down Menu With CSS3 Transitions - Coming Soon..
5. Add Jquery Slide Toggle Effect To a Drop Down Menu - Coming Soon..
6. Surprise...
CSS3 Transitions using Ease-in-out

Please read the earlier two parts especially Part#2 if you have not in order to understand the ongoing parts.

The CSS3 transition has the following syntax:

    -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;

To ensure the transition works equally alike in all major browsers we have included syntax for Chrome, Mozilla, Microsoft Internet Explorer and Opera. The ease-in-out has been timed to 0.2s which you can increase or decrease.

We want to add it to the part of the menu which controls the style of the menu when a visitor roll overs the cursor on the link tabs. This part of the menu has the following similar class syntax:

    #navigation li a:hover {

    .........

    .........

    }

    

    #navigation li li a{

    .............

    ............

    ............

    

    }

The first class with the name navigation li a:hover  controls the roll over style for the main menu tabs and the second one are for the drop down list.

Note that the class name .navigation will be different in your case.  We talked about this in Part#2. The dotted lines indicate random styles that you may find in your menu, for simiplicity we are using dots to focus on main portion. Identify the above two classes inside the code for your menu and then add the following styles to them as follows:



    #navigation 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;

    }

    #navigation li li a{

    .............

    ............

    ............

    -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;

    box-shadow: #333 0px 1px 3px;

    }





Save your menu and visit your website to see a soft mouse over effect on the menus giving a delightful touch to the navigation.

You can control the time for which the menu background may fade in and fade out. For default look we have kept it 0.2 seconds.
What's Next?

A navigation menu gives if well understood will give you great command on how to create excellent designed pages, align objects, understand properties like padding, margin, positioning, link styling, list style and mouse hover operations. In our next tutorial we will discuss the Jquery Slide Toggle effect. Its responsibly for controlling the speed with which the menu drops. Till then do practice and apply this code to your menus. Please do not hesitate to ask questions, we love responding!

We redesigned the Footer of the blog and we will change the header design soon. Please let me know if it needs further improvement. Peace and blessings pals. :)