how to make transition drop down navigation menu in html and css: with animation

HTML By Builder

How to make css transition animated dropdown navigation menubar using html and css – by Learning Simplified.

Summary:
1) How to make drop down with smooth transition animation,
2) How to change background color and font color of the individual list items in second order unordered list.
3) Determining Cubic-bazier values using Lea Verou’s site (Thanks for her consent for citing her website as a reference in this tutorial)

In this tutorial, we have shown how to create an animated multi-level drop down menu coming down with smooth transitional effect with changing background and font colors for the
secondary list items.
If you are not familier with how to create a simple horizontal menu with pure css and html, this tutorial may help you in understanding that:

If you are unaware of creating the multilevel drop down navigation menu without animation, then you may have a look at the tutorial below:

In the above mentioned tutorial, we had shown the technique of coding the drop down menu bar up to tertiary unordered list, but in the present tutorial, we restricted the animation to secondary onordered one. Consider creating others as a homework.

In changing the background and font colors, we have used cubic-bezier as animation nature. It is practically harder part to determine the X1, X2 and Y1, Y2 points on x-axis and y-axis coordinates, but thanks to LEA VEROU, a PhD researcher from MIT and a dedicated web builder around the globe and her team for building up a site to assist in determining the values of these two points instantly, without any prior knowledge.

Another Big thanks to her for permitting us with a written consent to let her site be used in building up this tutorial. Feel free to visit the link for determining the values of Cubic-bezier anytime given below:

http://cubic-bezier.com/#.17,.67,.83,.67

======================================================
Questions of this tutorial:
1) What is the default value of animation nature if nothing is mentioned?
2) what will be the syntax for creating a tertiary sub-menu with the same smooth transition?
3) What will be the output view if no web hack code is used in declaring the transition syntax?
4) If the syntax overflow:hidden is not attributed, what significant effect will be observed in the display?
5) What will be the display if we use display:inline-table instead of display:block in first order unordered list?
6) In this tutorial, I haven’t used html5 declaration in index.html. What significant effect will be observed if you declare it as html5 document?
7) What will be display if we remove float:left condition from first order unordered list item?

======================================================

Stay tuned to our channel to learn more:
https://www.youtube.com/channel/UCNBuByD9iIgqElwmIIqoIiA

=====================================================
Watch for relevant blogs at :
http://learnsimple1987.blogspot.in/
=====================================================
Our G+ profile is at:
https://plus.google.com/u/0/b/108616648678138902856/108616648678138902856
=====================================================
Twit us at:
Tweets by learnmaniac1987
=====================================================
watch us at facebook :
https://www.facebook.com/learnmaniac1987/
======================================================

If you liked our tutorial, do not hesitate to hit that RED SUBSCRIBE button anytime.
Feel free to like, share and off course make comment on it. Your comments are valuable resource for developing forthcoming tutorials.

-~-~~-~~~-~~-~-
Please watch: “CSS Filter Property – How to Make Effects on images in web”