Hoy vamos a escribir un código muy sencillo para enseñar a hacer un menú desplegable muy fácil. Así tendreis una base para poder hacerlo todo lo bonito que querais. Lo primero que hay que decir es que nuestro menú lo vamos a hacer basandonos en HTML,CSS y Javascript.
Supongamos que tenemos un menú normal(vacío, sólo con las opciones) con el siguiente código:
<div id="menu-principal" align="center"> <div><a href="">Inicio</a></div> <div><a href="">Mi Cuenta</a></div> <div><a href="">Mis Pedidos</a></div> <div><a href="">Mi Carrito</a></div> </div>
Ahora debemos suponer que este menú se ve en nuestro navegador en linea, es decir, Inicio Mi Cuenta Mis Pedidos Mi Carrito
Ahora vamos a hacer que cuando pasemos por encima de cada uno de esas opciones se desplienguen una serie de opciones debajo de la seleccionada. Para ello, lo primero que debemos hacer es crear un div con las opciones que queremos mostrar, en nuestro caso lo haremos para la opcion Inicio y el bloque div con las opciones que le asociaremos será:
<div id="desp-inicio"> <ul> <li><a href="">Perfil</a></li> <li><a href="">Carro</a></li> <li><a href="">Modificar Perfil</a></li> <li><a href="">EstadoCompra</a></li> </ul> </div>
Ahora, el siguiente paso será aplicarle estilo para que ese bloque se muestre justo debajo de la pestaña Inicio.
CSS:
#desp-inicio{
position:absolute;
left:24em;
top:2.5em;
display:none;
width:8em;
}
En el código css anterior podemos ver que establecemos la posición a absoluta, esto es lo más importante del estilo ya que es lo que nos permite colocar el desplegable por encima de los otros bloques que pueda contener nuestra página. Lo siguiente es colocar el desplegable, en nuestro caso para que salga correctamente debajo de inicio lo hemos desplazado 24em desde la izda y 2.5em desde arriba. Por último lo hemos ocultado con display none y también le hemos dado un ancho acorde a la información que contiene. Las medidas de colocación debereis ajustarlas a vuestra página para cuadrarlo, nosotros hemos usado nuestro propio css que colocaba el menú principipal en la parte media superior de la pagina.
Ahora mismo tenemos el menú principal listo y su desplegable listo pero oculto. El siguiente paso será hacer que ese desplegable se muestre cuando pasamos el ratón sobre la pestaña de inicio, para ellos usaremos javascript.
Creamos dos funciones javascript para desplegar y replegar:
<script language="javascript">
function DesplegaMenu(id){
var obj=document.getElementById(id);
obj.style.display="block";
}
function ReplegaMenu(id){
var obj=document.getElementById(id);
obj.style.display="none";
}
</script>
Estas dos funciones lo único que hacen es obtener el bloque con el id que le pasamos como parámetro y modificar su display para que se muestre u oculte.
Por último debemos asociar los eventos de ratón para que se muestre o se esconda el desplegable cuando pasamos el ratón por encima de inicio. Para ello modificamos el bloque div anteior de la siguiente forma:
<div id="menu-principal">
<div onMouseOver="javascript:DesplegaMenu('desp-inicio')" onMouseOut="javascript:ReplegaMenu('desp-inicio')"><a href="">Inicio</a></div>
<div><a href="">Mi Cuenta</a></div>
<div><a href="">Mis Pedidos</a></div></div>
<div><a href="">Mi Carrito</a></div></div>
</div>
Y para que cuando pasemos el ratón por encima del desplegable se mantenga abierto modificamos el div del desplegable:
<div id="desp-inicio" onMouseOver="javascript:DesplegaMenu('desp-inicio')" onMOuseOut="javascript:ReplegaMenu('desp-inicio')">
<ul>
<li><a href="">Perfil</a></li>
<li><a href="">Carro</a></li>
<li><a href="">Modificar Perfil</a></li>
<li><a href="">EstadoCompra</a></li>
</ul>
</div>
Y listo.Así cada vez que paseis el ratón por encima de Inicio os desplegará otro submenú justo debajo de el con las opciones anteriores y al retirarlo se os cerrará.
Os dejo aquí el código completo:
<script language="javascript">
function DesplegaMenu(id){
var obj=document.getElementById(id);
obj.style.display="block";
}
function ReplegaMenu(id){
var obj=document.getElementById(id);
obj.style.display="none";
}
</script>
<div id="menu-principal">
<div onMouseOver="javascript:DesplegaMenu('desp-inicio')" onMouseOut="javascript:ReplegaMenu('desp-inicio')"><a href="">Inicio</a></div>
</div>
<div ><a href="">Mi Cuenta</a></div></div>
<div><a href="">Mis Pedidos</a></div></div>
<div><a href="">Mi Carrito</a></div></div>
</div>
<div id="desp-inicio" onMouseOver="javascript:DesplegaMenu('desp-inicio')" onMouseOut="javascript:ReplegaMenu('desp-inicio')">
<ul>
<li><a href="">Perfil</a></li>
<li><a href="">Carro</a></li>
<li><a href="">Modificar Perfil</a></li>
<li><a href="">EstadoCompra</a></li>
</ul>
</div>
Y el CSS:
#desp-inicio{
position:absolute;
left:15em;
top:2.5em;
display:none;
width:8em;
}
Espero que os sirva de ayuda. Cualquier pregunta o consulta poneros en contacto.