Un menú desplegable es una lista de opciones que se revela solo cuando un usuario interactúa con el menú, ya sea haciendo clic en él o flotando sobre él con su cursor. Las opciones de menú luego descienden verticalmente y desaparecen nuevamente una vez que el usuario se desactiva del menú.
Dado que los menús desplegables le permiten colocar más contenido y enlaces en una página sin abarrotarlo, se usan comúnmente en sitios web y aplicaciones web para ocultar elementos que los usuarios podrían no necesitar después de la carga inicial de la página, pero aún así es posible que desee usar .
- Enumerar acciones adicionales y menos comunes que un usuario puede tomar dentro de una aplicación; aquí hay un ejemplo de la herramienta de blog Hubspot:
Los menús desplegables contienen varias piezas móviles que todos necesitan trabajar juntas para una experiencia de usuario perfecta. Si su menú desplegable no funciona como se esperaba, los usuarios pueden molestarse fácilmente. Por eso es tan importante implementarlos correctamente en HTML.
Para comprender cómo funcionan los menús desplegables en HTML, necesitará saber tres elementos: etiqueta, selección y opción. Veamos cada uno de estos con más detalle.
Cuando A
El elemento
¿Cómo agregar menú desplegable en HTML?
Para hacer un cuadro desplegable, en primer lugar, hicimos un contenedor Div para colocar el contenido del cuadro desplegable dentro de él, además, para abrir el cuadro desplegable Hemos usado un elemento
Posición: relativo;
Pantalla: bloque en línea;
}
La clase de «desplegable» se ha asignado al primer contenedor Div que anesta todo el contenido. Hemos establecido su posición en relativo para que cuando se abra el menú desplegable, se coloque justo debajo del botón.
Pantalla: ninguno;
Color de fondo: Whitesmoke;
Ancho: 100%;
relleno: 15px;
Al contenedor DIV que contiene el contenido desplegable se le ha asignado la clase de «Contente desplegable». Hemos establecido la pantalla en ninguno, además, dado un ancho y acolchado.
bloqueo de pantalla;
Además, para hacer que el menú desplegable sea asignado, lo asignamos: el estado de ajuste y configurar su pantalla en bloque para que aparezca debajo del botón.
Y, por último, hemos diseñado nuestro botón también de acuerdo con nuestro deseo.
relleno: 5px;
Color de fondo: trigo;
Font-Family: Lucida Sans;
Se ha creado con éxito un cuadro desplegable. Ahora pasemos a crear un menú desplegable.
Un menú desplegable consiste en una lista de opciones y solo se abre cuando un usuario trae el cursor del mouse sobre él. Puede crear un menú desplegable en su sitio web con CSS. Siga el ejemplo a continuación.
Aquí agregamos etiquetas de anclaje para proporcionar múltiples opciones en el menú desplegable.
¿Cómo crear un menú desplegable con HTML CSS y JS?
En este tutorial, aprenderá cómo crear un menú desplegable simple con Vanilla JavaScript, HTML y CSS. Caminaremos por el código HTML, CSS y JavaScript, pero prestando más atención a la programación, ya que este es un tutorial JS. Usaremos JS y CSS simples, sin marcos ni preprocesadores. La única (especie de) excepción será importar el archivo CSS de Font Awesome porque usaremos uno de sus iconos.
Esto está dirigido a los desarrolladores que tienen una comprensión promedio de HTML, CSS y JS. Traté de hacerlo lo más limpio posible, pero no me concentraré demasiado en los detalles aquí. Espero que todos disfruten.
En esta sección, discutiremos la implementación del código HTML para la página de demostración. Para comenzar, veamos el código
Básicamente, esta es una fuente de caldera HTML, con la excepción de las etiquetas de enlace que carga las dos hojas de estilo CSS que usaremos en este tutorial: los estilos impresionantes de la fuente y el archivo styles.css, donde definiremos los estilos de esta página.
- El .dropdown Div, donde se definirá la estructura del elemento desplegable.
- El elemento #result, que contendrá la opción seleccionada por el usuario, desde el elemento desplegable.
- El script escrito en la etiqueta
