Graphical CSS Rollover Menu

Posted under » CSS on 23 April 2010

Use a single image sprite to run the menu. You can include all four states of the navigation bar into a single image and then transition between them when a user hovers, clicks or views a section.

The CSS : 

/* NAVIGATION BUTTONS
Setup */

ul.cssmenu {
	list-style: none;
	padding: 0px;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

ul.cssmenu li {
	float: left;
	}

ul.cssmenu li a {
	display: block;
	width: 150px;
	height: 44px;
	background: url('sprite.gif');
	}

/* Normal Links */

ul.cssmenu li.home a {
	background-position: 0 0;
	}

ul.cssmenu li.blog a {
	background-position: -150px 0;
	}

ul.cssmenu li.contact a {
	background-position: -300px 0;
	}

/* Hover Links */

ul.cssmenu li.home a:hover {
	background-position: 0 -44px;
	}

ul.cssmenu li.blog a:hover {
	background-position: -150px -44px;
	}

ul.cssmenu li.contact a:hover {
	background-position: -300px -44px;
	}

/* Clicked Links */

ul.cssmenu li.home a:active {
	background-position: 0 -88px;
	}

ul.cssmenu li.blog a:active {
	background-position: -150px -88px;
	}

ul.cssmenu li.contact a:active {
	background-position: -300px -88px;
	}

/* Selected/Active Links  */

ul.cssmenu li.home a.selected {
	background-position: 0 -132px;
	}

ul.cssmenu li.blog a.selected {
	background-position: -150px -132px;
	}

ul.cssmenu li.contact a.selected {
	background-position: -300px -132px;
	}

/* END OF NAVIGATION */

The HTML

Take note that