Menú desplegable.
Xabier
26 de Abril del 2005
Bues mi pregunta es esa.
¿Cómo puedo hacer un menú desplegable en html?
Esto es, quiero que cuando pase el ratón por encima de una opción me aparezcan 3 subopciones sobre las que puedo pinchar,
Gracias.
¿Cómo puedo hacer un menú desplegable en html?
Esto es, quiero que cuando pase el ratón por encima de una opción me aparezcan 3 subopciones sobre las que puedo pinchar,
Gracias.
tamy
26 de Abril del 2005
espero q este sea el q tu quieres jejej : pruebalo!
<html><head>
<style>
.itMenu{position: absolute; clip: rect( ); background:#2D6CAA; visibility: hidden}
.cabMenu{position: absolute; clip: rect( ); color:white; background:#003266}
a{color:#D3E533;font-family:verdana;text-decoration:underline}
a:hover{color:white;font-family:verdana;font-weight:bold;text-decoration:underline}</style>
<script language="JavaScript">
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var itemOrig;
function despMenu(nombre,sn)
{
obj = document.all[nombre];
if (sn>0)
obj.style.visibility = "visible";
else
obj.style.visibility = "hidden";
}
function destacar(obj, val)
{
if (val==1)
{
itemOrig = obj.style.backgroundColor;
obj.style.backgroundColor="#3D6C9A";
}
else
obj.style.backgroundColor= itemOrig;
}
</script>
</HEAD>
<body bgcolor="#FFFFFF">
<font size="2" face="verdana">
<div id="Menu1" onMouseOver="despMenu(\'itMenu1\',1)" onMouseout="despMenu(\'itMenu1\',1)" style="width:115;height:20;z-index:2; left: 0px; top: 0px" class="cabMenu">
<center><b>Texto del menú</b>
</center>
</div>
<div id="itMenu1" style="width:115;height:50;z-index:1;
left:115px;top:0" class="itMenu" onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)">
<center><a target="Frame3" href="Dirección 1" >Dirección 1</a>
</div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
<div id="Menu2" onMouseOver="despMenu(\'itMenu2\',1)" onMouseout="despMenu(\'itMenu2\',0)" style="width:115;height:20;z-index:2; left: 0px; top: 60px" class="cabMenu">
<center><b>Otro menú</b>
</center>
</div>
<div id="itMenu2" style="width:115;height:50;z-index:1;
left:115px;top:60" class="itMenu" onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)">
<center><a target="Frame3" href="Dirección 1" > Otra Dirección 1</a>
</div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
</body>
</html>
<html><head>
<style>
.itMenu{position: absolute; clip: rect( ); background:#2D6CAA; visibility: hidden}
.cabMenu{position: absolute; clip: rect( ); color:white; background:#003266}
a{color:#D3E533;font-family:verdana;text-decoration:underline}
a:hover{color:white;font-family:verdana;font-weight:bold;text-decoration:underline}</style>
<script language="JavaScript">
var mie =(navigator.appName.indexOf("Microsoft")>=0)
var itemOrig;
function despMenu(nombre,sn)
{
obj = document.all[nombre];
if (sn>0)
obj.style.visibility = "visible";
else
obj.style.visibility = "hidden";
}
function destacar(obj, val)
{
if (val==1)
{
itemOrig = obj.style.backgroundColor;
obj.style.backgroundColor="#3D6C9A";
}
else
obj.style.backgroundColor= itemOrig;
}
</script>
</HEAD>
<body bgcolor="#FFFFFF">
<font size="2" face="verdana">
<div id="Menu1" onMouseOver="despMenu(\'itMenu1\',1)" onMouseout="despMenu(\'itMenu1\',1)" style="width:115;height:20;z-index:2; left: 0px; top: 0px" class="cabMenu">
<center><b>Texto del menú</b>
</center>
</div>
<div id="itMenu1" style="width:115;height:50;z-index:1;
left:115px;top:0" class="itMenu" onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)">
<center><a target="Frame3" href="Dirección 1" >Dirección 1</a>
</div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
<div id="Menu2" onMouseOver="despMenu(\'itMenu2\',1)" onMouseout="despMenu(\'itMenu2\',0)" style="width:115;height:20;z-index:2; left: 0px; top: 60px" class="cabMenu">
<center><b>Otro menú</b>
</center>
</div>
<div id="itMenu2" style="width:115;height:50;z-index:1;
left:115px;top:60" class="itMenu" onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">
<div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)">
<center><a target="Frame3" href="Dirección 1" > Otra Dirección 1</a>
</div>
<div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 2">Dirección 2</a>
</div>
<div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >
<center><a href="Dirección 3">Dirección 3</a>
</div>
</div>
</body>
</html>