Cómo crear un menú desplegable con CSS y JavaScript

Programación

En este tutorial, aprenderá a crear un menú desplegable simple con JavaScript, HTML y CSS. Recorreremos el código HTML, CSS y Javascript, pero prestando más atención a la programación, ya que este es un tutorial de JS. Usaremos JS y CSS simples, sin marcos ni preprocesadores. La única (tipo de) excepción será la importación del archivo CSS Font Awesome porque usaremos uno de sus iconos.

Esto está dirigido a desarrolladores que tienen un conocimiento medio de HTML, CSS y JS. Traté de hacerlo lo más limpio posible, pero no me enfocaré demasiado en los detalles aquí. Espero que todos disfruten.

Capturas de pantalla

Así es como se ve el resultado del código:

Pantalla inicial:

Menú desplegable abierto:

Menú desplegable con la opción seleccionada:

HTML:

En esta sección, discutiremos la implementación del código HTML para la página de demostración. Para empezar, veamos el código.

      Dropdown Example

Esto es básicamente un texto repetitivo de HTML, con la excepción de las linketiquetas que cargan las dos hojas de estilo CSS que usaremos en este tutorial: los estilos de Font Awesome y el styles.cssarchivo, donde definiremos los estilos de esta página.

Luego, está el resto del archivo HTML, el cuerpo:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...

Esta sección se puede dividir en 3 partes principales:

  • El .dropdowndiv, donde se definirá la estructura del elemento desplegable.
  • El #resultelemento, que contendrá la opción seleccionada por el usuario, del elemento desplegable.
  • El guión escrito en la etiqueta. Su implementación está oculta aquí, porque sus detalles se explicarán en la última sección de este tutorial.

El elemento desplegable es un divA que contiene titley menuelementos. El primero solo define qué texto se presentará en el elemento antes de que se seleccione cualquier opción y el segundo definirá las opciones que el elemento podrá seleccionar.

El resultelemento está ahí solo para mostrarle qué opción está seleccionada actualmente.

Estilos:

A continuación, puede consultar el código CSS completo. Como puede ver, hace uso de CSS3 transitiony transformconstruye.

Preste atención a las .dropdowndefiniciones de las clases. Estos se utilizan para definir el diseño del componente contenedor desplegable, así como sus elementos internos, como .titley sus .option.

body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }

JavaScript:

Ahora veremos cómo se implementa la parte de Javascript. Primero veremos las definiciones de las funciones y luego el código que llama a estas funciones para que sucedan las acciones desplegables.

Básicamente, hay 3 acciones que tienen lugar dependiendo de cuál sea la interacción del usuario, ya que sus oyentes se agregan a los elementos DOM:

  1. Haciendo clic en el elemento desplegable
  2. Seleccionar una de las opciones desplegables
  3. Cambiar la opción seleccionada actualmente

Me gustaría dejar en claro que estamos usando funciones de flecha ( () => {}) y la constpalabra clave, que son características de ES6. Probablemente sea bueno si está usando una versión reciente de su navegador, pero téngalo en cuenta.

1. Hacer clic en el elemento desplegable

function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }

Cuando se hace clic en el elemento desplegable, se abre (si está cerrado) o se cierra (si está abierto). Esto sucede al vincularse toggleMenuDisplayal detector de eventos de clic en el elemento desplegable. Esta función alterna la visualización de su menuelemento mediante el uso de las funciones toggleDisplayy toggleClass.

2. Seleccionar una de las opciones desplegables

function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }

3. Cambiar la opción seleccionada actualmente

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

La función handleTitleChangeestá vinculada al changeevento personalizado en el .titleelemento, para cambiar el #resultcontenido del elemento cada vez que cambia el elemento del título. La activación de este evento se realiza en la sección anterior.

Código principal

//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

En la sección principal hay solo un código simple para obtener el título del menú desplegable y los elementos de opciones para vincularlos con los eventos discutidos en la última sección.

Manifestación

El código completo y la demostración de esta aplicación se pueden encontrar aquí.

More Information

  • ES6 introduction
  • Arrow functions
  • Let and Const