En el post que voy a dejar hoy, voy a realizar un pequeño menú como ejercicio JavaScript que resulta muy práctico y vistoso para nuestros proyectos. Se trata de un menú desplegable y plegable con un efecto muy suave que le dará a nuestra web un efecto más profesional.
Evidentemente, este código es solo una muestra, con un poco de paciencia y entendiendo lo que en el se hace, podemos complicar nuestro menú lo que gustemos. En el ejemplo que aquí voy a publicar, cada opción del menú solo tiene un nivel, los cuales haremos con listas.
El JavaScript que hará el efecto en nuestro menú, lo realizaremos mediante getElementById, style.height y scrollHeight. Para darle un poco más de vistosidad al ejercicio, añado un archivo CSS en el que se hará un poco menos soso el ejemplo.
Durante el código, creo que queda bastante claro para que se utiliza cada cosa. Si quieres ver un ejemplo de lo que se conseguirá con el código que aquí publico, puedes echar un vistazo en este enlace.
Una vez explicado el asunto del ejercicio, vamos al turrón del asunto …
Ejercicio JavaScript: Menú desplegable
El archivo dónde se guarda el html y el código del Ejercicio JavaScript se llama menu.html:
<html>
<head>
<title>Menu Desplegable</title>
<meta name="generator" content="phpStorm">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="styleSheet" type="text/css" href="menu.css">
<script language="JavaScript" text="text/JavaScript">
/*
* Efecto de mover el menu (tanto de desplegar como de replegar).
* nos devuelve 0px
*/
function moverMenu(){
var o = document.getElementById("opcion"+menu.nCual);
menu.nDesde += menu.nPaso ;
o.style.height = menu.nDesde + "px";
if ( menu.nDesde == menu.nHasta ) {
clearInterval ( menu.intervalo);
menu.intervalo = 0;
}
}
/*
* Lanzamos el efecto. No usamos variables globales. Usamos propiedades
* dinámicas ( menu.nHasta, menu.nPaso)
* document.getElementById ("opcion..").style.height
* nos devuelve 0px
*/
function menu(nCual){
var o = document.getElementById("opcion"+ nCual);
if ( !menu.intervalo ) {
if ( o.style.height=="0px" ) {
menu.nDesde = 0;
menu.nHasta = o.scrollHeight;
menu.nPaso = 1;
} else {
menu.nDesde = o.scrollHeight;
menu.nHasta = 0;
menu.nPaso = -1;
}
menu.nCual = nCual
menu.intervalo = setInterval ( moverMenu, 5);
}
return false;
}
/*
* Ocultamos el menú, asignandole una altura de 0px.
* Tiene un efecto raro en el navegador.
* Además, tiene la ventaja de que ahora document.getElementById ("opcion..").style.height
* nos devuelve 0px
*/
function ocultarSubMenus(){
var i, oElem;
for ( i=1; oElem = document.getElementById("opcion"+i); i++ ){
oElem.style.height = "0px";
}
}
window.onload= function(){ ocultarSubMenus();}
</script>
</head>
<body >
<div id="pagina">
<dl>
<ul id="menu">
<li><a href="#opcion1" onclick="return menu(1)">*Menú principal</a>
<ul id="opcion1" class="submenu">
<li>Inicio</li>
<li>Cosas legales</li>
<li>Cosas de comer</li>
<li>Cosas de beber</li>
</ul></li>
<li><a href="#opcion2" onclick="return menu(2)">*Enlaces</a>
<ul id="opcion2" class="submenu">
<li><a href="http://entreunosyceros.hol.es" title="entreunosyceros" target="_blank">entreunosyceros</a></li>
<li><a href="http://sapobuskedas.hol.es" title="SapoBuskedas" target="_blank">SapoBuskedas</a></li>
<li><a href="http://about.me/sapoclay" title="About SapoClay" target="_blank">AboutSapoClay</a></li>
<li><a href="http://dawfiles.hol.es" title="DawFiles" target="_blank">DawFiles</a></li>
<li><a href="http://pastedaw.hol.es" title="PasteDaw" target="_blank">PasteDaw</a></li>
<li><a href="http://twitter.com/sapoclay" title="Twitter SapoClay" target="_blank">TwitterSapoClay</a></li>
<li><a href="http://sapoimagenes.hol.es" title="SapoImagenes" target="_blank">SapoImagenes</a></li>
<li><a href="http://notasentrecerosyunos.blogspot.com.es" title="NotasEntreunosyceros" target="_blank">Notas</a></li>
</ul></li>
<li><a href="#opcion3" onclick="return menu(3)">*Otras cosas</a>
<ul id="opcion3" class="submenu">
<li><a href="http://www.google.com" target="_blank">gOOgle</a></li>
<li><a href="http://www.nasa.com" target="_blank">Nasa</a></li>
<li><a href="http://www.herbalistgrow.es/shop/" target="_blank">Herbalist</a></li>
<li><a href="http://www.joomla.org/" target="_blank">Joomla</a></li>
</ul></li>
</ul>
</dl>
</div>
</body>
</html>Y las CSS se guardan en un archivo menu.css:
ul {
margin: 0;
padding: 0;
width: 160px;
overflow: hidden;
}
#menu li {
list-style: none;
margin: 0;
padding: 0;
background-color: #c6c6c6;
}
#menu li a{
padding: 2px 10px;
text-decoration: none;
}
#menu ul.submenu li{
list-style:none;
background-color: #f2f2f2;
border-top: 1px solid #666;
margin: 0;
font-size: 16px;
height: 20px;
padding: 2px 10px;
}El código que se muestra en este ejercicio es fácilmente modificable por todo aquel que quiera para adaptarlo en sus páginas web o en sus ejercicios. En caso de que alguien lo modifique sería de agradecer que compartiese su código para poder seguir aprendiendo y poder hacer cosas mucho más chulas, ya que compartir es aprender.