Hace poco un compañero de hispamp3 me preguntó como podía meterle mejoras a su web. Le dí la idea de crear menús desplegables para las diferentes categorías, que no es más que una “evolución” de esto. Os dejo el código de ejemplo por si os sirve:
Lo del menú se hace con listas, y consta de tres archivos:
El primero donde quieras meter el menú, que sería algo asi:
<div class="cat"><a href="javascript:desplegar('nosotros');">Sobre Nosotros</a></div>
<ul class="ocultar_menu" id="nosotros">
<li><a href="mapa.asp">Mapa Situación</a></li>
<li><a href="contacto.asp">Nosotros</a><br /></li>
</ul>
De manera que al hacer click en “Sobre Nosotros” se despliega y muestra: “Mapa de situación” y “Contacto”.
Si te fijas se llama a una función en JavaScript que es la siguiente:
function desplegar(categoria){
var menu = document.getElementById(categoria);
if(menu.className == "ver_menu"){
menu.className = "ocultar_menu";
}
else{
menu.className = "ver_menu";
}
}
La función simplemente cambia la clase de nuestra lista por la que nosotros queramos haciendo uso de la función className.
Esta función puedes incluirla en un archivo externo con extensión .js y importarlo en la web donde va el menú metiendo dentro de la etiqueta head este código:
<script src="ruta relativa al archivo.js" type="text/javascript"></script>
O bien metiendo la función dentro de la misma web donde va el menú de esta manera:
<script type="text/JavaScript">
<!--
CODIGO DE LA FUNCION
// -->
</script>
Ademas de estos códigos, en la hoja de estilo de la página tienes que incluir estos estilos:
.ver_menu {
display:block;
}
.ocultar_menu {
display:none;
}
Que, como puedes ver, son los encargados de hacer ver (display:block), o no (display:none), el elemento del menú.
Para cualquier duda dejad un comentario.
Aviso: si notáis que la parte donde está insertado el código en este post está cortada, es porque estáis usando un navegador que no cumple los estándares del w3c. Si es vuestro caso, la solución es muy sencilla.
Comentarios recientes