Inicio Apuntes FPApuntes DAW Ejercicio JavaScript: Crear un menú desplegable y plegable
Javascript

Ejercicio JavaScript: Crear un menú desplegable y plegable

por entreunosyceros
Publicado el: Última actualización:
AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

JavascriptEn 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:

Y las CSS se guardan en un archivo menu.css:

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.


También te puede interesar ...

Deja tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.