Demo Dynamic HTML - Menú que se oculta cuando pasa el ratón

Menú que se oculta del ratón

Compatibilidad: Ms Internet Explorer, Netscape

Otro excelente ejemplo de menú que se oculta en DHTML. Al inicio el menú puede verse sólo parcialmente en la parte lateral izquierda del documento, pero en cuanto el cursor del ratón lo roza se nos muestra por completo. Tan pronto como el ratón sale del área del menú, éste vuelve a su posición original.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<style>
<!--

#slidemenubar, #slidemenubar2{
position:absolute;
left:-155px;
width:160px;
top:110px;
border:1.5px solid green;
background-color:lightyellow;
layer-background-color:lightyellow;
font:bold 12px Verdana;
line-height:20px;
}
-->
</style>
</HEAD>

if (document.all)
document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
<script language="JavaScript1.2">
var sitems=new Array()
var sitemlinks=new Array()

//extend or shorten this list
sitems[0]="Home"
sitems[1]="350 Javascript"
sitems[2]="200 Applet Java"
sitems[3]="Xml"
sitems[4]="ASP"
sitems[5]="Css"
sitems[6]="Font"
sitems[7]="Grafica"
sitems[8]="Controlli"
sitems[9]="Mailing list"
sitems[10]="Articoli"
sitems[11]="Gif animate"
sitems[12]="Sfondi"

//These are the links pertaining to the above text.
sitemlinks[0]="http://www.htmlpoint.com"
sitemlinks[1]=".."
sitemlinks[2]="http://www.htmlpoint.com"
sitemlinks[3]="http://www.htmlpoint.com"
sitemlinks[4]="http://www.htmlpoint.com"
sitemlinks[5]="http://www.htmlpoint.com"
sitemlinks[6]="http://www.htmlpoint.com"
sitemlinks[7]="http://www.htmlpoint.com"
sitemlinks[8]="http://www.htmlpoint.com"
sitemlinks[9]="http://www.htmlpoint.com"
sitemlinks[10]="http://www.htmlpoint.com"
sitemlinks[11]="http://www.htmlpoint.com"
sitemlinks[12]="http://www.htmlpoint.com"

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+'>'+sitems[i]+'</a><br>')
</script>
</layer>
<script language="JavaScript1.2">
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (document.all){
document.write('</div>')
themenu=document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",50)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",50)
}
function pullengine(){
if (document.all&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if(document.layers&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (document.all&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if(document.layers&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]