Processing ...

Processing ...

single image sliding doors and rollover

Written by : Gerrit van Weele , 2013-04-18

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

live demo:

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 : Gerrit van Weele www.vision.to ,intital idea and CSS code.
Credits: Jasson M.Knight cutcodedown.com, rewritten CSS and bug fixes.
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" 
liWelcome/li
liProducts/li
liAbout/li
liTutorials/li
li class="current" a class="selected" href="#">Links/li
liDigital Art/li
/ul
Known Bugs:
This should work O.K.
Please report any bugs, thank you.

*All graphics used herein are created by Gerrit van Weele [www.vision.to] .