Cómo crear un menú desplegable en HTML usando CSS?

Un menú desplegable es una forma de dejar que el usuario explore diferentes opciones disponibles para él/ella cuando use un sitio web. Estos son un widget algo necesario al diseñar un sitio web. CSS le permite crear menús desplegables de buen aspecto que aumenten la experiencia del usuario y embellecen el aspecto de su sitio web. Esta publicación está compuesta para proporcionar:

1. Creando un cuadro desplegable
2. Creando un menú desplegable

Vamos a empezar

Creando un cuadro desplegable

A menudo debe haber visto que cuando trae su cursor del mouse sobre un texto o un botón en un sitio web aparece un cuadro desplegable. Así es como se hace.

Ejemplo

Este ejemplo demuestra la creación de un cuadro desplegable.

Html

Trae mouse aquí

Haz click en mi

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.

CSS

.desplegable
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.

CSS

.Contente desplegable
Pantalla: ninguno;
Color de fondo: Whitesmoke;
Ancho: 100%;
relleno: 15px;

Al contenedor DIV que contiene el contenido desplegable se ha asignado la clase de "contenido desplegable". Hemos establecido la pantalla en ninguno, además, dado un ancho y relleno.

CSS

.desplegable: flotante .Contente desplegable
bloqueo de pantalla;

Además, para hacer que el menú desplegable 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.

botón
relleno: 5px;
Color de fondo: trigo;
Font-Family: Lucida Sans;

Producción

Se ha creado con éxito un cuadro desplegable. Ahora pasemos a crear un menú desplegable.

Creando un menú desplegable

Un menú desplegable consta de 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. Sigue el ejemplo a continuación.

Html

Menú

Contáctenos
Sobre nosotros
Otro

Aquí agregamos etiquetas de anclaje para proporcionar múltiples opciones en el menú desplegable.

CSS

.dropbtn
Color de fondo: salmón;
color blanco;
Ancho: 100px;
relleno: 18px;
borde: 0;
tamaño de fuente: 17px;

En primer lugar, damos a nuestro botón un poco de estilo usando varias propiedades CSS.

CSS

.desplegable
Posición: relativo;
Pantalla: bloque en línea;
Ancho: 160px;

Como ya se explicó anteriormente, hemos establecido la posición del DIV con la clase de "desplegable" en relativa para que cuando se abra el menú desplegable, se coloque justo debajo del botón.

CSS

.Contente desplegable
Pantalla: ninguno;
Color de fondo: Whitesmoke;
Ancho: 100%;

Aquí estamos utilizando algunas propiedades básicas de CSS para diseñar nuestro contenido desplegable.

CSS

.Contente desplegable A
bloqueo de pantalla;
de color negro;
relleno: 12px;
Decoración de texto: ninguna;

En el código CSS anterior, estamos diseñando los enlaces presentes dentro del menú desplegable. Hemos establecido su pantalla en bloque para que cada enlace aparezca en una nueva línea.

CSS

.desplegable: flotante .dropbtn
Color de fondo: Sandybrown;

.Contente desplegable A: Hover
Color de fondo: LightGrey;

.desplegable: flotante .Contente desplegable
bloqueo de pantalla;

Aquí estamos diseñando los efectos de desplazamiento para el botón de menú y el menú desplegable.

Producción

Así es como puede crear un menú desplegable con éxito.

Conclusión

Un menú desplegable proporciona a un usuario diferentes opciones disponibles para él/ella cuando use un sitio web. Puede crear estos menús desplegables utilizando diferentes propiedades de CSS. Con el fin de crear un cuadro desplegable básico, puede usar un contenedor Div y colocar el contenido desplegable dentro de él, además, utilizando propiedades CSS, puede darle algo de estilo. Una vez que haya aprendido a crear un cuadro desplegable básico, puede usar técnicas similares para crear un menú desplegable. Esta guía le enseña cómo crear un menú desplegable con la ayuda de un ejemplo apropiado.