Fully CSS Animated DropDown Menu

Posted by in CSS

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

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.

The sub menu links can be added under the “Frameworks” and “Technology” links, with each link is inserted with complete unordered list under the parent menu item.

The CSS Styling

We should hide all the sub menus with the use of opacity:0 . In order to make sub menus reappear on hovering, give opacity:1 in li:hover. Adding positon: absolute will allow us to adjust the position of sub menu for sliding effect. With the use of top:50px, we can position the sub menu on top and on hover top: 79px, when you hovering on parent menu, it will appear like a slide down jquery effect with the help of transition css. The > child selector makes sure only the child UL of parent LI is being targeted, rather than others should appear.

Avoid default bullet list on menu list by adding list-style : none and display: inline-block will make element display in a block container. The transition property in nav>ul>li>a will give fade in out effect while moue hovering on menu items.

You can change the background and text color while hovering on parent menu.

The final step is to style the sub menu list and hover style. + operator is used to select all elements placed immediately after nav>ul>li. Now the fully CSS animated dropdown menu without JQuery and Javascript is ready to launch. See it in action here.

Demo

Share your comments

comments