Create CSS3 Animation Menus

In today’s tutorial we’ll create menu item hover effects that are very easy to customize by editing the css file, no images are required. We’ll animate the background buttons in vertical and horizontal positions. I hope these css3 menu examples will come in handy for you if not maybe for inspiration and create your own navigation menu.

If you want to express your option regarding this tutorial please write a comment. I’ll appreciate if you share the tutorial among your friends, that will make me create other useful resources for you. Let’s get started with this css3 menu tutorial!

You may also like the following tutorial articles:

• How to Create CSS3 Gradient Buttons
• CSS3 Pricing Table UI Element
• Create a Ribbon DropDown Menu with CSS3 and jQuery

HTML CODE

The menu structure is pretty simple. We’ll use an unordered list for the items. The menu font is “Oswald” and you can use it from the Google Fonts Library. Also you can browse the library and choose other font that suits your overall design.

 <ul class="demo1">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

CSS CODE

In the following examples I will show you the styles applied for each menu.

Example 1

For the first example we’ll animate the background width for each menu item. The width value will be 0 for an element in normal state and give a value of 50% in hover state. You can change this value according to your needs.

.demo1 li {
	background-color: rgba(238, 238, 238, 1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	padding-left:1%;
	height: 50px;
	min-height: 50px;
	width: 0;
	font-family:"Oswald";
	font-size:20px;
}

The padding-left attribute let you modify the width of the vertical line.

.demo1 li:hover {
	background-color: rgba(238, 238, 238, 1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	width:50%;
}

Example 2

The second example is pretty identical with the first. The only changing is the overall background. All you have to the is giving a background color to the unordered list. The width is optional.

.demo2 {
	background-color: rgba(179, 234, 255, 1);
	width:50%;
}

Example 3

In this example will animate the height attribute. This kind of menu is best used in the top of the browser’s page. To create a colorful menu, you can give for each menu item a different color. To do that you have to create individual colors and trasitions for each one.

.demo3 li {
	float:left;
	background-color: rgba(90, 183, 60, 1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	height:0;
	font-family:"Oswald";
	font-size:20px;
	padding:5px 0px 0px 0px;
}

.demo3 li:hover {
	background-color: rgba(90, 183, 60, 1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	height:80px;
}

Example 4

The structure for this example is a little bit different because we’ll use a div mask for the animation.

 <ul class="demo4">
               <li><div class="link"><a href="#">Home</a></div><div class="mask"></div></li>
               <li><div class="link"><a href="#">Services</a></div><div class="mask"></div></li>
               <li><div class="link"><a href="#">Gallery</a></div><div class="mask"></div></li>
             
                <div class="column-clear"></div>
        </ul>

The important attribute in the css structure is the overflow set to hidden so the mask will appear in the element dimensions.

.demo4 li {overflow: hidden;
	float:left;
	margin-left:20px;
	font-family:"Oswald";
	font-size:20px;
	text-align:center;
	background-color: rgba(255, 57, 57, 1);
	width:120px;
	height:60px;
	position:relative;
		color:#ffffff;
}

The mask will have the same dimensions and we’ll animate it on the Y scale. Also is important to make the opacity mask to 0 when the element is in the normal state.

.demo4 li .mask {
	width:120px;
	height:60px;
	position: absolute;

	top: -60px;
	left: 0;
	background-color: rgba(170, 0, 0, 1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	-moz-transition: all 0.3s ease-in-out 0s;
	-o-transition: all 0.3s ease-in-out 0s;
	-ms-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	z-index:1;

}
.demo4 li:hover .mask {
 
	top:0px;
	 -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=1)";
   filter: alpha(opacity=1);
   opacity: 1;
}

CONCLUSION

Thank you for reading this tutorial and we hope that you find it useful. The possibilies for animated menus are endless but for now please enjoy this tutorial.