Cómo diseñar menús desplegables en Bootstrap 5
Un menú desplegable permite al usuario de un sitio web elegir una opción/acción específica de la lista dada de opciones/acciones. Tal menú es atendible y consta de enlaces organizados como elementos de lista. Estos enlaces envuelven una gran cantidad de contenido dentro de ellos, por lo tanto, haciendo el diseño de un limpiador de página web. Hacer un menú desplegable usando Bootstrap 5 se realiza a través del uso de varias clases asociadas con él. Aquí presentamos cómo puede crear un menú desplegable usando Bootstrap 5 y varias formas de peinarlo.
Cómo crear un menú desplegable usando Bootstrap 5
Con el fin de hacer un menú desplegable a través de Bootstrap 5, use el .desplegable clase. Aquí hemos demostrado cómo se crea un simple menú desplegable.
Html
Al contenedor div se asignó el .desplegable clase que representa un menú desplegable. Para que el usuario pueda abrir el menú desplegable, use un botón o un enlace y asigne el .clase desplegable y establecer data-bs-toggle = "desplegable" Para hacer que el menú se alinee. Después, cree una lista desordenada y asigne el .Clase de menú desplegable, Mientras que asigne el .clase desplegable a cada elemento de lista para proporcionar opciones al usuario en el menú.
Producción
Se creó un menú desplegable con éxito.
Cómo crear un divisor desplegable
Si desea separar los enlaces u opciones presentes en el menú con una línea horizontal, use el .divisor desplegable clase. Esto puede ser útil en escenarios en los que los enlaces presentes dentro del menú pertenecen a varias categorías.
Html
El resto del código es el mismo que el anterior con la única diferencia que para separar el último enlace del resto de los enlaces estamos utilizando el
elemento para crear una regla horizontal y asignarla el .divisor desplegable clase. Tenga en cuenta que este divisor se está anidando dentro de un elemento de la lista.
Producción
Así es como crear un divisor horizontal.
Cómo crear un encabezado desplegable
Si desea agregar un rumbo a varias categorías de enlaces dentro del menú, use el .receptor desplegable clase.
Html
En el código anterior, antes de cada categoría de enlaces estamos anidando un elemento dentro de un elemento y asignándolo el .receptor desplegable clase. De esta manera, se insertará un encabezado antes de cada categoría de opciones.
Producción
La salida muestra un menú desplegable con dos encabezados.
Cómo asignar estados activos y deshabilitados a los elementos en un menú desplegable
Para agregar estados activos y deshabilitados a enlaces específicos dentro del menú, simplemente use el .activo y .desactivado clases.
Html
En el código anterior, al primer enlace se le asigna un estado activo, mientras que el segundo enlace se le da el estado deshabilitado. Un enlace con un estado activo tiene color azul, mientras que un enlace con un estado discapacitado tiene un color gris claro.
Producción
El .activo y .Las clases para discapacitados funcionan correctamente.
Cómo asignar varias posiciones a los menús desplegables
Para peinar su menú desplegable, puede asignarle varias posiciones, como Fin, Start, Right o Up. Aquí se ha demostrado cada una de estas posiciones.
Cómo asignar una posición ascendente al menú desplegable
Para el fin de asignar una dirección ascendente al menú, use el .caer hasta clase.
Html
Algún texto.
Algún texto.
Algún texto.
Al div que representa el menú desplegable se ha asignado el .caer hasta clase que hará que el menú se abra en una dirección ascendente cuando se haga clic en el botón. Tenga en cuenta que hemos agregado algunos Producción La salida muestra un menú que se abre hacia arriba. Cómo asignar la posición final al menú desplegable Para abrir el menú al final del botón desplegable, use el .gotear clase junto con el .desplegable clase. Html El código anterior generará un menú desplegable que se abrirá al final del botón desplegable una vez que se haga clic en el botón. Producción Aquí hemos hecho con éxito el menú desplegable para abrir al final del botón. Cómo asignar la posición de inicio al menú desplegable Esta posición funcionará de manera opuesta a la posición discutida en el ejemplo anterior y esta posición se puede alcanzar utilizando el .chapotear clase. Html Para un menú desplegable con una posición de inicio, debe colocarse al final de una página web. Por lo tanto, estamos usando el .fin de texto clase junto con el .chapotear y .desplegable clases. Además, la flecha se insertará antes del texto dentro del botón automáticamente. Producción El .La clase DropStart funciona correctamente. Cómo asignar la posición correcta al menú desplegable Con el fin de alinear el menú desplegable al lado derecho, use el .final del menú clase. Html Si desea abrir su menú desplegable en el lado derecho en lugar de cubrir todo el espacio debajo del botón, asigne el .final del menú clase junto con el .clase desplegable. Tenga en cuenta que para demostrar correctamente el funcionamiento de esta clase hemos agregado un texto alargado dentro del botón. Producción El menú desplegable estaba alineado a la derecha con éxito. Cómo agregar texto sin formato a un menú desplegable En algunos escenarios, desea agregar texto sin formato dentro del menú desplegable, por lo tanto, use el .text-text-text clase. Html En el código anterior, se creó un menú desplegable simple, mientras que al final de los enlaces se creó otro elemento de la lista; Sin embargo, para agregar texto sin formato en lugar de usar la etiqueta de ancla se usó la etiqueta y se le asignó el .text-text-text clase. El texto se colocó dentro del etiqueta. Producción Así es como agrega texto sin formato dentro del menú desplegable. Cómo crear un menú desplegable con botones agrupados Otra cosa interesante que se puede hacer usando menús desplegables es agregar estos menús dentro de los botones agrupados. A continuación hemos demostrado cómo se puede hacer esto. Html El código anterior genera dos grupos de botones, cada uno consta de un solo botón y cada botón tiene un menú desplegable asociado con él. Cada uno de los menús desplegables se creó de manera similar como se demostró en los ejemplos anteriores. Producción El menú desplegable vinculado con el primer grupo de botones. El menú desplegable vinculado con el segundo grupo de botones. Conclusión Con el fin de crear un menú desplegable, asigne el .desplegable Menú a un contenedor Div que tendrá el menú desplegable dentro de él. Después, use un botón o un enlace para que el usuario pueda abrir el menú desplegable y asignarlo el .clase desplegable y Establecer data-bs-toggle = "desplegable" Para hacer que el menú se alinee. Después, cree una lista desordenada y asigne el .Clase de menú desplegable, Mientras que asigne el .clase desplegable a cada elemento de lista para proporcionar opciones al usuario en el menú. Esta publicación analiza cómo crear y diseñar un menú desplegable con gran detalle.