Single Image Sliding Doors and Rollover

live demo:

• Welcome
• Products
• About
• Tutorials
• Links
• Digital Art

The single image:

The CSS code that make this happen:

<style type="text/css">
/* =========================================================================
For any free or commercial usage please keep this credits text intact.
Author : Femi Hasani www.vision.to ,intital idea and CSS code.
Credits: Jasson M.Knight cutcodedown.com, rewritten CSS and bug fixes.
The original version of this stylesheet and the associated (x)html
is available at http://www.vision.to/single-image-sliding-doors-and-rollover.php
A link to www.vision.to would be apperciated but not mandatory. 
=============================================================================== */
#menuDemo {
	overflow:hidden; /* wrap floats */
	height:45px; /* trips haslayout, wrap floats IE */
	list-style:none;
	background:url(images/articles/menu.png) 0 0 repeat-x;
	font:bold 16px/45px sans-serif;
}

#menuDemo li {
	display:inline;
}

#menuDemo a {
	float:left;
	position:relative;
	padding-left:10px;
	margin-right:10px;
	text-decoration:none;
	color:#EEE;
	background:#F84 url(images/articles/menu.png) 0 -45px no-repeat;
}

#menuDemo a span {
	position:absolute;
	top:0;
	left:100%;
	width:10px;
	height:45px;
	background:url(images/articles/menu.png) -502px -45px no-repeat;
}

#menuDemo .current a {
	color:#000;
	background-position:0 -135px;
	background-color:#CCC;
}

#menuDemo .current a span {
	background-position:-502px -135px;
}

#menuDemo a:active,
#menuDemo a:focus,
#menuDemo a:hover {
	color:#800;
	background-position:0 -90px;
	background-color:#FF0;
}

#menuDemo a:active span,
#menuDemo a:focus span,
#menuDemo a:hover span {
	background-position:-502px -90px;
}
</style>

The X-HTML markup:

<ul id="menuDemo" >
<li><a  href="#">Welcome<span></span></a></li>
<li><a  href="#">Products<span></span></a></li>
<li><a  href="#">About<span></span></a></li>
<li><a  href="#">Tutorials<span></span></a></li>
<li class="current" ><a  class="selected"  href="#">Links<span></span></a></li>
<li><a  href="#">Digital Art<span></span></a></li>
</ul>

*All graphics used herein are created by Femi Hasani [www.vision.to] .

Related Pages