Updates

Single Image Sliding Doors and Rollover

In progress ... My initial CSS code was rewritten.
Below is rewritten version by "deathshadow".
This version should work on all modern browsers.
My original top menu version was also replaced with this version.
Credits:Jason M. Knight, aka deathshadow cutcodedown.com

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>

Known Bugs:
This should work O.K.
Please report any bugs, thank you.

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

*Copyright: You may not copy, republish, sell, distribute this content, however you may link to this page.
Our goal is to provide a unique content for our website users, thank you.

Start of page