Had a go but couldn't get it perfect
tools.com.net.sc/test.php (on a free subdomain as it's a test site so cba to pay)
Here is the coding:
Code:
<html>
<head>
<title>Sliding Menu</title>
<meta http-equiv='Page-Enter' content='progid:DXImageTransform.Microsoft.Fade(Duration=1.5)' />
<meta http-equiv='Page-Exit' content='progid:DXImageTransform.Microsoft.Fade(Duration=1.5)' />
<style type='text/css'>
body {
background: #FFF;
color: #444444;
font-size: 12px;
font-family: Arial;
}
#main {
background: #FFFFFF;
height: 300px;
width: 50%;
margin: 0px;
}
.layer {
height: 100%;
width: 16%;
margin: 0px;
}
</style>
<script type='text/javascript'>
<!--
var i = 16;
function expand(id)
{
var layer = document.getElementById(id).style;
if(i != 40)
{
i += 1;
layer.width = i + "%";
}
if(id=="layer1"){time = setTimeout('expand("layer1")', 1)}
if(id=="layer2"){time = setTimeout('expand("layer2")', 1)}
if(id=="layer3"){time = setTimeout('expand("layer3")', 1)}
if(id=="layer4"){time = setTimeout('expand("layer4")', 1)}
if(id=="layer5"){time = setTimeout('expand("layer5")', 1)}
}
function stop(id)
{
document.getElementById(id).style.width = "16%";
i = 16;
clearTimeout(time);
}
//-->
</script>
</head>
<body>
<table id='main'>
<tr>
<td align='center' height='50px' width='100%' colspan='5'>
Javascript Box
</td>
</tr>
<tr>
<td id='layer1' class='layer' bgcolor='#111111' onMouseOver='expand("layer1")' onMouseOut='stop("layer1")'></td>
<td id='layer2' class='layer' bgcolor='#333333' onMouseOver='expand("layer2")' onMouseOut='stop("layer2")'></td>
<td id='layer3' class='layer' bgcolor='#555555' onMouseOver='expand("layer3")' onMouseOut='stop("layer3")'></td>
<td id='layer4' class='layer' bgcolor='#777777' onMouseOver='expand("layer4")' onMouseOut='stop("layer4")'></td>
<td id='layer5' class='layer' bgcolor='#999999' onMouseOver='expand("layer5")' onMouseOut='stop("layer5")'></td>
<!-- This layer was put in place to make layer5 work -->
<td id='layer6' class='layer' bgcolor='#FFFFFF'></td></tr>
</tr>
</table>
</body>
</html>