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

Menú arrastrando el ratón

Compatibilidad: Ms Internet Explorer, Netscape

Otra variación de la misma demo. En este caso, para ver el menú es necesario arrastrarlo con el ratón manteniendo pulsado el botón izquierdo del mismo. Con el mismo procedimiento, hacemos que vuelva 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{
cursor:hand;
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">')
</script>
<layer id="slidemenubar">
<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
}
var dragapproved=false
var x1,x2
if (document.layers)
themenu.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

function move(e){
if (document.all&&event.button==1&&dragapproved){
if(temp1+event.clientX-x1>leftboundary)
themenu.pixelLeft=Math.min(rightboundary,temp1+event.clientX-x1)
else
themenu.pixelLeft=Math.max(leftboundary,temp1+event.clientX-x1)
}

else if (document.layers){
if(themenu.left+e.x-x2>leftboundary)
themenu.left=Math.min(rightboundary+2,themenu.left+e.x-x2)
else
themenu.left=Math.max(leftboundary-2,themenu.left+e.x-x2)
}
}

function drags(e){
if (document.all){
dragapproved=true
temp1=themenu.pixelLeft
x1=event.clientX
document.onmousemove=move
}
else{
themenu.captureEvents(Event.MOUSEMOVE)
x2=e.x
}
}

function stopit(){
if (document.all){
dragapproved=false
}
if (document.layers)
themenu.releaseEvents(Event.MOUSEMOVE)
}

if (document.all){
document.all.slidemenubar2.onmousedown=drags
document.all.slidemenubar2.onmouseup=new Function("dragapproved=false")
document.onselectstart=new Function("return false")
}
else if (document.layers){
themenu.onmousedown=drags
themenu.onmousemove=move
themenu.onmouseup=stopit
}

</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]