<!DOCTYPE html>
<html>
<head>
<title>Interactive Fade Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
html, body {width:100%;height:100%;margin:0px;font-family:sans-serif;font-size:100%;color:#CECECE;background:#4E4E4E;}
a {text-decoration:none;color:#CECECE;outline:none;}
#men {width:100%;height:auto;margin:auto;padding:0px;position:absolute;top:44%;left:0px;display:inline-block;list-style:none;color:#CECECE;background:#000000;
filter:alpha(opacity=20);-khtml-opacity:0.2;-moz-opacity:0.2;opacity:0.2;}
#men li {margin:2px;padding:2px;border:1px solid #CECECE;}
#men li a:hover {border-left:240px solid #CECECE;}
//-->
</style>
<script type="text/javascript">
<!--
var opac=20, tim, lap;
function fade(dir){
var elm=document.getElementById("men");
if(elm.filters){elm.filters.alpha.Opacity=opac}
if(!elm.filters){elm.style.opacity=(opac/100)}
if(!elm.filters){elm.style.MozOpacity=(opac/100)}
if(!elm.filters){elm.style.KHTMLOpacity=(opac/100)}
if(dir==1 && opac<=80){opac=opac+2} else{clearTimeout(tim)}
if(dir==0 && opac>=20){opac=opac-2} else{clearTimeout(tim)}
tim=setTimeout("fade("+dir+")", 10);
}
function test(){
fade(1); clearTimeout(lap);
lap=setTimeout("fade(0)", 4000);
}
document.onmousemove=test;
document.onmousedown=test;
document.onkeydown=test;
//-->
</script>
<body>
<ul id="men">
<li><a href="#"> Menu 1 </a></li>
<li><a href="#"> Menu 2 </a></li>
<li><a href="#"> Menu 3 </a></li>
<li><a href="#"> Menu 4 </a></li>
</ul>
</body>
</html>
