Add CSS3 Transition effect To a Drop Down Menu

Ever since The World Wide Web Consortium (W3C) introduced CSS3 and HTML5, websites, content management systems and online web tools  took a ...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,69,Blogging tips,198,Bugs and Errors,34,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,305,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
SEO and SEM Guide For Bloggers: Add CSS3 Transition effect To a Drop Down Menu
Add CSS3 Transition effect To a Drop Down Menu
http://lh4.ggpht.com/-OVmRZ5KZUh0/T8kPWAAWMDI/AAAAAAAAGlQ/tcTLD5o1x58/image%25255B11%25255D.png?imgmax=800
http://lh4.ggpht.com/-OVmRZ5KZUh0/T8kPWAAWMDI/AAAAAAAAGlQ/tcTLD5o1x58/s72-c/image%25255B11%25255D.png?imgmax=800
SEO and SEM Guide For Bloggers
https://www.experiencelab.info/2012/06/add-css3-transition-effect-to-drop-down.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/06/add-css3-transition-effect-to-drop-down.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy