Making an Awesome (and Animated) menu with just CSS!

January 16, 2012 at 6:00 pm By
Download Demo

Transitions Ahoy!

I do like a good challenge, well, one that isn’t perhaps annoyingly challenging. So I set out today to make a little CSS menu idea that had been floating round in my head. The concept is pretty simple. Each menu would have a 6px border to the left in various colours and on hover the border would grow in size to cover the entire menu item as its background.

An easy way to do this would be to use the :after pseudo element and make a transition between this and the hovered over :after element. Unfortunately Firefox is the only browser that supports psuedo element animations with things like :after. So what we’re going to do instead is put a simple <span> inside the menu items. This will hold the border, if you will, and act like the :after element. Anyway, lets get down to business!

Just a regular old menu

With the exception that we’re adding spans in too! This will do the job that the :after pseudo element should’ve done. Que sera sera.


<ul id="menu">
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			HOME
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			ARTICLES
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			TUTORIALS
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			RESOURCES
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			SNIPPETS
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			WORDPRESS
		</a>
		<span></span>
	</li>
	<li>
		<a href="http://www.html5canvastutorials.com/blog/">
			INSPIRATION
		</a>
		<span></span>
	</li>
</ul>

Some CSS

Next we have to add some of the basic CSS behind this. You can read the comments on this bit if you need some extra help.

#menu, #menu ul {
	/* Remove bullet points and add fonts */
	list-style: none;
	font-family: Helvetica, Arial, sans-serif;
}
	
#menu li {
	/* Horizontal menu, not vertical. Then just a little extra positioning */
	float: left;
	position: relative;
	margin-right: 20px;
	height: 40px;	
}
	
#menu li a {
	/* Clear up the links and position them correctly */
	color: #000;
	padding: 0 15px;
	text-decoration: none;
	display: block;
	position: relative;
	height: 40px;
	padding: 10px 15px;
	font-weight: bold;
	/* Quick animations to animate the anchor */
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
}
	
	
#menu li span {
	/* Default width of the span (acts as border). Z-index so it appears behind the words. */
	width: 6px;
	z-index: -1;
	/* Position it absolutely so it goes where we want it to go */
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	/* Animation again, because both the span and the anchor will be animated */
	-webkit-transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-ms-transition: all 0.4s ease-in;
}

Next we’re going to want to colorize the individual members of the menu (as in, their borders). I decided to do this by using a the :nth-of-type() psuedo element, but there are a few ways you could do this. I found this to be the easiest.

#menu li:nth-of-type(1) span { background: #c04545; }
#menu li:nth-of-type(2) span { background: #c06b45; }	
#menu li:nth-of-type(3) span { background: #88c045; }
#menu li:nth-of-type(4) span { background: #48c045; }
#menu li:nth-of-type(5) span { background: #45c0aa; }	
#menu li:nth-of-type(6) span { background: #4576c0; }
#menu li:nth-of-type(7) span { background: #7945c0; }

And to finish up, 3 hover over classes! Pretty simple stuff. Just adding shadows and changing the width of the span to 100%. This will give the effect of a bar filling up. Pretty cool, right?

#amenu li:hover > span {
	/*Change the width of this span to 100% */
	min-width: 100%;
}

#menu li a:hover {
	color: #fff;
}
	
#menu li:hover {
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
}

And that’s it! That’s all you need to make this pretty simple menu. Hope you’ve enjoyed, click the Demo or Download link to see it in action. This can also work as a great vertical menu, if you’re feeling in the mood for that kind of thing. You could replace the animation with images.