Cómo diseñar el menú desplegable de selección en CSS
Un desplegable es una lista de opciones que solo aparece cuando el usuario hace clic o se cierne sobre una opción y selecciona una o más opciones de la lista dada. Hay muchas formas de diseñar una lista desplegable que utiliza diferentes propiedades de CSS, por ejemplo, color, desplazamiento, posición, margen y muchos más.
Estamos aquí para explicar cómo diseñar un menú desplegable usando CSS. Para este propósito, primero, explicaremos el proceso de creación de un menú desplegable en el que se puede hacer clic, y después de eso, peinaremos el menú desplegable de selección en CSS.
Cómo crear un menú desplegable en CSS?
Puede crear un menú desplegable en HTML usando y etiquetas. Para entender más claramente, pasemos a la sintaxis del menú desplegable.
Sintaxis
Aquí está la sintaxis del menú desplegable:
Expliquemos gradualmente las etiquetas HTML utilizadas en el bloque de código anterior:
- etiqueta: Se utiliza para especificar la opción abreviada en formulario de texto.
- seleccionar: Este elemento permite al usuario seleccionar un elemento de una lista.
- opción: Se utiliza para proporcionar opciones para el menú desplegable.
Aquí presentamos un ejemplo práctico para explicar el punto.
Ejemplo
En el ejemplo dado, crearemos un y agregaremos un menú desplegable dentro de él. Después de eso, etiquetaremos el menú usando el ""Etiqueta y asigne los valores de opción con el"" etiqueta. Hemos agregado los elementos dentro de la etiqueta para mostrar el menú en el centro de la pantalla:
Pista de Linux
Seleccionar nombre = "Seleccionar">
Después de ejecutar el código proporcionado, se mostrará el siguiente menú desplegable:
Como puede ver, el menú desplegable creado tiene una apariencia simple. Sin embargo, puede diseñarlo utilizando diferentes propiedades CSS.
Cómo diseñar el menú desplegable de selección en CSS?
En el CSS, peinaremos el menú desplegable de selección de la siguiente manera.
Paso 1: encabezado de estilo
Modificemos el color del encabezado usando el "color" propiedad:
H1
color verde;
Aquí, hemos asignado un "verde"Color para el encabezado.
Paso 2: Cambiar el tipo de cursor
Cambie el tipo de cursor usando el "cursor" propiedad. Como resultado, cuando el usuario se cierne sobre la lista de menú, la forma del cursor cambiará al puntero de mano:
#seleccionar
cursor: puntero;
Paso 3: Menú desplegable de estilo
Aquí, estableceremos los atributos del menú desplegable asignándole un color de fondo "luces", borde "1px de negro sólido", ancho "300px", Y altura"30px":
seleccionar
Antecedentes: Lightseagreen;
borde: 1px negro sólido;
Ancho: 300px;
Altura: 30px;
Después de completar todos estos pasos, ejecute el archivo HTML y mire el resultado:
La salida muestra que la aparición de nuestro menú desplegable ha sido diseñada.
Conclusión
CSS ofrece múltiples propiedades que se pueden usar para diseñar los menús desplegables. Por ejemplo, el borde, el color y las propiedades de fondo se utilizan para peinar el borde del menú, el color y el color de fondo. Este artículo explicó el método para diseñar el menú desplegable y cómo asignar diferentes atributos a él.