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
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. :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

24 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Nice one I am using this transition effect on my blog.
    Tips and Tricks

    ReplyDelete
  2. nice post...but not interested as old ones.. sorry i am just kidding..:D
    3 Killer Tricks to earn 3 Digit Earning

    ReplyDelete
  3. Do You mind if I re-post this on my blog?

    ReplyDelete
  4. good post yaar. this css3 transition effect is good. this provides a good navigation. i like mybloggertips. your articles are awesome. thank you for this post.

    @Programming Tips & Logical Thinking Tips

    ReplyDelete
  5. Muhammad bro, i sent an email to you 1 week ago including some doubts, please reply brother, i am waiting.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Have a problem with broken links, the broken link checker shows me 30 broken links of this format :http://www.indiacoupons4all.com/2011/11/&target=email and their source is this : <a class='goog-inline-block share-button sb-email' href='&target=email' target='_blank' title='Email This'> Can you take a look at indiacoupons4all.com and advise me how to remove these repeated broken links. It has something to do with the html code i suppose. Please guide.

    ReplyDelete
  8. Thanks for ur tips, am a new fan of ur blog, am a new blogger also, i want my blog to look good, but am unexperience pls can you help this my blog http://chibenze-alltopic.blogspot.com pls check my blog and also contact me ebenezer_62@yahoo.com. Thanks cos i known you are always ready to help

    ReplyDelete
  9. Dear Mohammad, Your work is really getting more and more terrific. Awesome contribution for a starter like me. So many things to learn.

    I blog @ Manidipa's Kitchen, a blog about recipes from my kitchen, life and experiences

    ReplyDelete
  10. Thanks for ur tips, am a new fan of ur blog, am a new blogger also, i want my blog to look good, but am unexperience pls can you help this my blog http://ourblogtricks.blogspot.com and please send me the cute box template in abhishek_luck19@hotmail.com

    ReplyDelete
  11. Super site
    I like all the contents
    http://achusoft.blogspot.com

    ReplyDelete
  12. Hei Brow... I need your help: how to make some table with color for the background

    ReplyDelete
  13. wonderful awesome thanks a lot for the trick.


    periodic table with charges

    ReplyDelete
  14. http://andr0idz0ne.blogspot.com
    For Free Andr0id Stuff Visit plzz

    ReplyDelete
  15. @harsh

    Brother this markup is not correct: <a class='goog-inline-block share-button sb-email' href='&target=email' target='_blank' title='Email This'>

    Change it to this:

    <a class='goog-inline-block share-button sb-email' href='PUT LINK HERE' target='_blank' title='Email This'></a>

    I have closed the a tag and have instructed to put a correct URL inside href.

    ReplyDelete
  16. Your contents give me more creational ideas that I can possibly use on my web page too.
    Web Development

    ReplyDelete