Javascript

Ejercicio JavaScript: Crear un menú desplegable y plegable

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.

Deja un comentario