Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Add CSS3 Transition Effect To Drop Down Menu

by Durodola Ridwan | Saturday, October 27, 2012 | 10 Comments

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 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!".

10 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. That's very informative. Drop down menus are great at saving space on our blog but then we should also consider those using mobile phones. Good work.

    ReplyDelete
    Replies
    1. tượng, sau đó kia một cổ kinh khủng hấp lực đánh về phía kia Nghiệt Xỉ Ma Hổ! Kia Nghiệt Xỉ Ma Hổ tựa hồ cũng là cảm giác được nguy hiểm, tâm tình càng thêm không an phận đứng lên. Một tiếng thanh bén nhọn hơn nữa điên cuồng tiếng gầm gừ tại đây phương thiên địa vang lên.

      Mà lúc này, này giao thủ vòng tròn dặm, cảm giác được này một cổ kinh khủng hấp lực, kia mọi người đều là sắc mặt biến đổi lớn lên.

      "Này đây là Tiêu Viêm cảo đi ra động tĩnh?" Lâm Kỳ mục trừng khẩu ngốc nói rằng, sau đó, tựa hồ là phát hiện này một vấn dongtam
      game mu
      http://nhatroso.net/
      http://nhatroso.com/
      nhạc sàn
      tư vấn luật
      dịch vụ thành lập công ty trọn gói
      công ty luật
      tổng đài tư vấn pháp luật
      thành lập công ty
      http://we-cooking.com/
      chém gió
      trung tâm ngoại ngữđề có chút ngu ngốc, thế nhưng, chính nhịn không được hung hăng địa nuốt khẩu nước bọt.

      Kia nguyên bản cùng Tiêu Viêm giao thủ Sử Hạ Kiện, nguyên bản còn không chịu phục, thế nhưng, khi hắn thấy Tiêu Viêm sử xuất này một cái cường hãn đấu kỹ, lập tức cũng là có ta may mắn đứng lên, nếu như buổi chiều Tiêu Viêm sử xuất này nhất chiêu chuyện, phỏng chừng tự mình không chết cũng muốn trọng thương!

      Delete
  2. Cool tutorials,,and brilliant idea,now here is some of the easy way on how to add Recommended Post Slide Out Widget With Social Share Buttons For Blogger!
    God Bless!

    ReplyDelete
  3. Dear sir,
    i have some problem with my site, www.tallyssolution.blogspot.com

    Will you help me ?

    ReplyDelete
    Replies
    1. Hi Sumit,
      That's what we do hear, ''help other bloggers out.'' What's the problem?

      Delete
  4. Hi :)
    thanks for your tips sir... :D
    i have do it, and success!
    one more thanks again (y)

    ReplyDelete
    Replies
    1. Hello Yan
      You are always welcome. Glad that you find it usefull :)

      Delete
  5. Thank you very much, very useful article for me

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger