Fully CSS Animated DropDown Menu
In this tutorial, am going to show you how to create fully css animated dropdown menu without using JQuery and Javascript This menu will be creating sub categories that appear once the parent menu is activated by hover. See it in action here. Demo THE HTML STRUCTURE
1 2 3 4 5 6 7 8 | <nav> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Frameworks">Frameworks</a></li> <li><a href="#" title="Bootstrap">Bootstrap</a></li> <li><a href="#" title="Technology">Technology</a></li> </ul> </nav> |
First of all, we have to create HTML <nav> element to house the navigation menu bar, then add the parent menu items in an unordered list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <nav> <ul> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="Frameworks">Frameworks</a> <ul> <li><a href="#" title="Wordpress">Wordpress</a></li> <li><a href="#" title="Yii">Yii</a></li> <li><a href="#" title="Laravel">Laravel</a></li> </ul> </li> <li><a href="#" title="Bootstrap">Bootstrap</a></li> <li><a href="#" title="Technology">Technology</a> <ul> <li><a href="#" title="HTML">HTML</a></li> <li><a href="#" title="CSS">CSS</a></li> <li><a href="#" title="JQuery">JQuery</a></li> <li><a href="#" title="Javascript">Javascript</a></li> </ul> </li> </ul> </nav> |
The sub menu links can be added under the “Frameworks” and “Technology” links, with each link is…read more