DevGrow.com Tutorial

Back to Tutorial »

Simple Animated Menu Using CSS3

This is a very simple method of creating the traditional horizontal menu that utilizes CSS3 tranisition effects. It should work on the latest versions of Firefox, Chrome, Opera and Safari but will degrade nicely for browsers that do not support CSS3 (I'm looking at you IE!).

Example 1





Example 2





Example 1 Code


.nav { list-style: none; }
.nav li { float: left; }
.nav a {
	position: relative;
	display: block;
	padding: 4px 8px;
	border-bottom: 2px solid #ccc;
	background: #f4f4f4;
	color: #999;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	}
.nav a:hover {
	color: #000;
	background: #fff;
	border-color: #000;
	padding: 8px;
	top: -4px;
	}
.nav .selected a, .nav .selected a:hover {
	background: #444;
	color: #fff;
	border-color: #000;
	}
	

Example 2 Code


.nav2 { list-style: none; }
.nav2 li { float: left; position: relative; }
.nav2 a {
	display: block;
	float: left;
	border: none;
	position: relative;
	height: 22px;
	overflow: hidden;
	}
.nav2 a strong, .nav2 a em {
	cursor: pointer;
	padding: 4px 8px;
	font-weight: bold;
	font-style: normal;
	display: block;
	-webkit-transition: all 200ms ease-out;
	-moz-transition: all 200ms ease-out;
	-o-transition: all 200ms ease-out;
	transition: all 200ms ease-out;
	}
.nav2 a strong {
	position: relative;
	top: 0;
	left: 0;
	color: #000;
	background: #fff;
	}
.nav2 em {
	position: absolute;
	top: 100%;
	background: #000;
	color: #fff;
	}
.nav2 a:hover strong {
	top: -100%;
	}
.nav2 a:hover em {
	top: 0;
	}