Working with CSS drop-down menus and Animate.css

Creating a dropdown menu is the most easy way to provide a hierarchal index of different menu items on the website. We could use jQuery scripts to make advanced dropown menu items with animations. But here we are going to make a complete CSS only dropdown menu with animations powered by Animate.css.  Lets start by the basic HTML frame for a dropdown menu.

HTML

<nav class="menu-1">
	<ul class="wtf-menu">
		<li> <a href="#">Home</a> </li>
		<li> <a href="#">Blog</a> </li>
		<li> <a href="#">About</a> </li>
		<li class="parent"> <a href="#">Categories</a> 
			<ul class="submenu">
				<li> <a href="#">Aciform</a> </li>
				<li> <a href="#">Asmodeus</a> </li>
				<li> <a href="#">Pencillin</a> </li>
				<li> <a href="#">Zanex</a> </li>
			</ul>
		</li>
		<li> <a href="#">Contact</a> </li>
		<li class="parent"> <a href="#">Parent page</a> 
			<ul class="submenu">
				<li> <a href="#">Child page 1</a> </li>
				<li> <a href="#">Child page 2</a> </li>
				<li class="parent"> <a href="#">Child page 3</a> 
					 <ul class="submenu">
						 	<li> <a href="#">Grandchild page 1</a> </li>
						 	<li> <a href="#">Grandchild page 2</a> </li>
						 	<li> <a href="#">Grandchild page 3</a> </li>
					 </ul>	
				</li>
				<li> <a href="#">Child page 4</a> </li>
			</ul>
		</li>
		<li> <a href="#">Feed</a> </li>
	</ul>
</nav>


The output

menutut1

This is a 3 level deep menu structure built with basic nested unordered list items. We are wrapping the whole menu in <nav> element as that is the HTML5 standard. You can see that we have nested <ul> items within the <li> items. We give a class of  ‘submenu’ to these nested <ul>  items. These are the sub menu items. The parent <li> item that holds the sub menu item is given the ‘parent’ class name. Lets apply some CSS to this.

CSS


ul.wtf-menu{
 margin: 100px auto 0px;
 padding: 0px 10px;
 width: 960px;
 background: #fff;
 height: 50px;
 border-radius: 3px;
 font-size: 14px;

 /* Dropdown shadow */
 -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
 box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
}

ul.wtf-menu li{
 list-style: none;
 float: left;
 padding: 0px 0px;
 margin: 0px 0px;
 line-height: 50px;
 display: block;
 position: relative;
 text-transform: uppercase;
}

ul.wtf-menu li a{
 color: #777;
 padding: 0px 15px;
 margin: 0px 0px;
 display: block;
}

ul.wtf-menu li a:hover{
 color:#06BA6D;
}

In the CSS  we give the menu a width of 960px and a height of 50px . Each list item is floated left and given a position relative property. Positioning the list items with relative positioning is the key in displaying dropdown submenu items later. We also apply some background color and link colors to the menu items.

The result is

menutut2

 

Next we go into styling the dropdown items. Remember we already gave a class name of ‘submenu’ to the nested ul items.

.wtf-menu ul.submenu{
	width: 180px;
	padding: 0px 0px;
	margin: 0px;
	background: #fff;
	position: absolute;
	top:50px;
	left:0px;
	display:none;

	/* 	Dropdown shadow */
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.3);
}

Here we assign a specific width to the dropdown item. Then we position it absolute. We give it a top spacing equal to the height of the main menu item ( 50px here ) and a left spacing of 0px. This will position the dropdown items directly below the parent menu item. Next we add display:none to hide the entire dropdown unit, because we need this to appear only when we hover on the parent menu item.

We need to adjust the placement of next level of submenus, so that they do not overlap with the parent submenu. For that we grab them and give them a left spacing that is equal to the width of the parent submenu. In our case it is 180px. This will place the child submenus on the right side of the parent submenus.

.wtf-menu ul.submenu ul{
	left: 180px;
	top:0px;
}

.wtf-menu ul.submenu li{
	padding: 0px;
	margin: 0px;
	display: block;
	float: none;
	border-bottom: 1px solid #eee;
	line-height: 40px;
	text-transform: none;
}

.wtf-menu ul.submenu li:last-child{
	border: none;
}

Next step will be to add the CSS to reveal the dropdown menu on hovering the parent items. For this we add a display block property to the ul items when the parent elements are on hover state.

.wtf-menu li:hover > ul{
	display:block;
}

.wtf-menu ul li:hover > ul{
	display:block;
}

menudd1
 

Animating the dropdown items

Now we have a functional dropdown menu, but the purpose of this tutorial was to figure out how to effectively integrate the Animate.css goodness with the menu we have created. Go to animate.css website and download the CSS file. Link the CSS file to the HTML file. Now we are ready to utilise the CSS animation features.

The animate.css library provides a bunch of animation effects, but all of them may not be ideal to use for menu animation. We will see 5 different animation effects here.

1. FadeInUpDEMO


.wtf-menu li:hover > ul{
	display:block;
	-moz-animation: fadeInUp .3s ease-in  ;
    -webkit-animation: fadeInUp .3s ease-in ;
    animation:fadeInUp .3s ease-in ;
}

.wtf-menu ul li:hover > ul{
	display:block;
	-moz-animation: fadeInRight .3s ease-in ;
    -webkit-animation: fadeInRight .3s ease-in ;
    animation:fadeInRight .3s ease-in ;
}

Here we will use the FadeInUp animation for the first level submenu and the deeper level will Fadein from right.

2. FadeInDownDEMO

.wtf-menu li:hover > ul{
	display:block;
	-moz-animation: fadeInDown .3s ease-in ;
    -webkit-animation: fadeInDown .3s ease-in ;
    animation:fadeInDown .3s ease-in ;
}

.wtf-menu ul li:hover > ul{
	display:block;
	-moz-animation: fadeInLeft .3s ease-in ;
    -webkit-animation: fadeInLeft .3s ease-in ;
    animation:fadeInLeft .3s ease-in ;
}

Here the dropdown items will fadein down and the deep level submenu items will fadein from right.

FadeInDEMO


.wtf-menu li:hover > ul{
	display:block;
	-moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation:fadeIn  .3s ease-in ;

}

.wtf-menu ul li:hover > ul{
	display:block;
	-moz-animation: fadeIn .3s ease-in ;
    -webkit-animation: fadeIn .3s ease-in ;
    animation: fadeIn .3s ease-in;
}

Here we have the submenu items just fade in. Nothing too fancy.

Zoom inDEMO

.wtf-menu li:hover > ul{
	display: block;
	-moz-animation: zoomIn .3s ease-in;
    -webkit-animation: zoomIn .3s ease-in ;
    animation: zoomIn .3s ease-in;

}

.wtf-menu ul li:hover > ul{
	display:block;
	-moz-animation: zoomIn .3s ease-in ;
    -webkit-animation: zoomIn .3s ease-in ;
    animation: zoomIn .3s ease-in;
}

Here we have the submenu items Zoomin to the view. It is a cool effect.

FlipDEMO

.wtf-menu li:hover > ul{
	display: block;
	-moz-animation: flipInX .3s ease-in;
    -webkit-animation: flipInX .3s ease-in ;
    animation: flipInX .3s ease-in;

}

.wtf-menu ul li:hover > ul{
	display:block;
	-moz-animation: flipInY .3s ease-in ;
    -webkit-animation: flipInY .3s ease-in ;
    animation: flipInY .3s ease-in;
}

This is a 3D effect. The first level submenu will flip down on x axis and the next levels will flip on Y axis.

I hope this tutorial was useful for you and might come in handy when you work on your next project. Please check the Demo page and you can also download the demo files. It will be awesome if you hit back with some new dropdown animation effects based on the download files.

Demo

Download