Este ejemplo muestra como construir un sencillo menú en el que mediante enlaces podremos acceder a los documentos que deseemos. Se hace uso de estilos y bloques div, consiguiendo los efectos mediante eventos y codigo en javascript. Existen muchos programas que construyen menús de este tipo mucho más complejos y vistosos que este que se muestra en el ejemplo, pero no está de más conocer como se contruyen por si quisieramos realizar alguna modificación en alguno.
Este texto perseguirá al ratónEstilos utilizados
ul
{
background-color: transparent;
color: #000099;
font-size: 12px;
font-weight: bold;
line-height: 120%;
list-style-type: none;
}
.menu {
position: absolute;
width: 130px;
font-weight: bold;
border: 2px ridge;
background-color: #99BBEE;
}
.boton1 {
background-color: #AACCFF;
color: #000077;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
font-size: 14px;
cursor: pointer;
vertical-align: middle;
line-height: 150%;
border: 2px ridge;
}
.Cabecera {
background-color: #000077;
color: #ccccDD;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
top: 0px;
border: 1px ridge;
line-height: 150%;
}
Código JavaScript
function Vacio()
{
for (i=1; i<=3; i++)
window.document.getElementById('id'+i).style.display='none';
}
function SubMenu(obj,id,evt)
{
if (window.document.getElementById(id).style.display=='')
window.document.getElementById(id).style.display='none'
else
{
Vacio();
window.document.getElementById(id).style.display=''
//window.document.getElementById(id).style.top=evt.y; //Funciona con IE, pero no con Mozilla
window.document.getElementById(id).style.top=obj.offsetTop; //Funciona con todos
window.document.getElementById(id).style.left=window.document.getElementById("tabla").width;
}
obj.style.background='#88AADD'; // Resalta el fondo de la opcion activa
}
<table id="tabla" width="120" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" onmouseout="Vacio();">
<tr><th class="Cabecera" title="Menú Principal" onmouseover="Vacio();">Menú Principal</th></tr>
<tr><td class="boton1" onmouseover="SubMenu(this,'id1',event);" title="Accede al Submenu 1">SubMenu 1</td></tr>
<tr><td class="boton1" onmouseover="SubMenu(this,'id2',event);" title="Accede al Submenu 2">SubMenu 2</td></tr>
<tr><td class="boton1" onmouseover="Vacio();" title="Esto hace las veces de separador"></td></tr>
<tr><td class="boton1" onmouseover="SubMenu(this,'id3',event);" title="Accede al Submenu 3">SubMenu 3</td></tr>
</table>
<div class="menu" id="id1" style="display: none; z-index: 1; float: left;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<p class="Cabecera">SubMenu 1
<ul>
<li><a href="javascript:alert('Elemento 1');">Elemento 1</a></li>
<li><a href="javascript:alert('Elemento 2');">Elemento 2</a></li>
<li><a href="javascript:alert('Elemento 3');">Elemento 3</a></li>
<li><a href="javascript:alert('Elemento 4');">Elemento 4</a></li>
<li><a href="javascript:history.back();">Atras</a></li>
</ul>
</div>
<div class="menu" id="id2" style="display: none; z-index: 1; float: left;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<p class="Cabecera">SubMenu 2
<ul>
<li><a href="http://www.jagar.es" target="_blank">jagar.es</a></li>
<li><a href="http://sudoku.jagar.es" target="Terra">Sudoku</a></li>
<li><a href="http://www.jagar.es/Primitiva" target="_blank">Primitiva</a></li>
</ul>
</div>
<div class="menu" id="id3" style="display: none; z-index: 1; float: left;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">
<p class="Cabecera">SubMenu 3
<ul>
<li><a href="javascript:alert('Elemento 1');">Elemento 1</a></li>
<li><a href="javascript:alert('Elemento 2');">Elemento 2</a></li>
<li><a href="javascript:alert('Elemento 3');">Elemento 3</a></li>
<li><a href="javascript:alert('Elemento 4');">Elemento 4</a></li>
<li><a href="javascript:window.close();">Cerrar Ventana</a></li>
</ul>
</div>