Come progettare menu a discesa in bootstrap 5
Un menu a discesa consente all'utente di un sito Web di scegliere un'opzione/azione specifica dall'elenco di opzioni/azioni indicata. Tale menu è attivabile ed è costituito da collegamenti disposti come elementi dell'elenco. Questi collegamenti avvolgono un'enorme quantità di contenuti al loro interno, rendendo così il layout di una pagina web pulita. Fare un menu a discesa utilizzando Bootstrap 5 viene eseguito attraverso l'uso di varie classi associate ad esso. Qui presentiamo come è possibile creare un menu a discesa utilizzando Bootstrap 5 e vari modi per modellarlo.
Come creare un menu a discesa utilizzando Bootstrap 5
Allo scopo di effettuare un menu a discesa tramite Bootstrap 5 Utilizzare il .cadere in picchiata classe. Qui abbiamo mostrato come viene creato un semplice menu a discesa.
Html
Il contenitore Div è stato assegnato il .cadere in picchiata classe che rappresenta un menu a discesa. Per consentire all'utente di aprire il menu a discesa utilizzare un pulsante o un collegamento e assegnarlo il .Classe a discesa e impostare data-bs-toggle = "discesa" Per rendere il menu attivabile. Successivamente, creare un elenco non ordinato e assegnarlo il .Classe a discesa-menu, Considerando che Assegna il .Classe a discesa-Item a ciascun elemento dell'elenco per fornire opzioni all'utente nel menu.
Produzione
Un menu a discesa è stato creato correttamente.
Come creare un divisore a discesa
Se si desidera separare i collegamenti o le opzioni presenti nel menu con una linea orizzontale, usa il .DropDown-Divider classe. Questo può essere utile negli scenari in cui i collegamenti presenti all'interno del menu appartengono a varie categorie.
Html
Il resto del codice è uguale a quello sopra con l'unica differenza che per separare l'ultimo collegamento dal resto dei collegamenti stiamo usando il
elemento per creare una regola orizzontale e assegnarla il .DropDown-Divider classe. Si noti che questo divisore viene nidificato all'interno di un elemento dell'elenco.
Produzione
Ecco come creare un divisore orizzontale.
Come creare un'intestazione a discesa
Se si desidera aggiungere un'intestazione a più categorie di collegamenti all'interno del menu, usa il .rilievo a discesa classe.
Html
Nel codice sopra, prima di ogni categoria di collegamenti stiamo nidificando un elemento all'interno di un elemento e assegnandolo il .rilievo a discesa classe. In questo modo verrà inserita un'intestazione prima di ogni categoria di opzioni.
Produzione
L'output visualizza un menu a discesa con due intestazioni.
Come assegnare gli stati attivi e disabiliti agli elementi in un menu a discesa
Per aggiungere stati attivi e disabiliti a collegamenti specifici all'interno del menu, utilizzare semplicemente il .attivo e .Disabilitato classi.
Html
Nel codice sopra, al primo link viene assegnato uno stato attivo, mentre il secondo collegamento viene assegnato allo stato disabilitato. Nel frattempo un collegamento con uno stato attivo ha un colore blu, un collegamento con uno stato disabilitato ha un colore grigio chiaro.
Produzione
IL .attivo e .Le classi disabili funzionano correttamente.
Come assegnare varie posizioni ai menu a discesa
Per modellare il tuo menu a discesa puoi assegnarlo varie posizioni come end, start, a destra o su. Qui sono state dimostrate ciascuna di queste posizioni.
Come assegnare la posizione verso l'alto al menu a discesa
Allo scopo di assegnare una direzione verso l'alto al menu, utilizzare il .caduta classe.
Html
Un po 'di testo.
Un po 'di testo.
Un po 'di testo.
Il div che rappresenta il menu a discesa è stato assegnato il .caduta Classe che farà aprire il menu in direzione verso l'alto quando si fa clic sul pulsante. Nota che ne abbiamo aggiunti alcuni Produzione L'output mostra un menu che si apre verso l'alto. Come assegnare la posizione finale al menu a discesa Per aprire il menu alla fine del pulsante a discesa, utilizzare il .dropend classe insieme al .cadere in picchiata classe. Html Il codice sopra genererà un menu a discesa che si aprirà alla fine del pulsante a discesa una volta fatto clic sul pulsante. Produzione Qui abbiamo fatto con successo il menu a discesa per aprire alla fine del pulsante. Come assegnare la posizione iniziale al menu a discesa Questa posizione funzionerà in modo opposto alla posizione discussa nell'esempio precedente e questa posizione può essere raggiunta usando il .drop part classe. Html Per un menu a discesa con una posizione iniziale deve essere posizionato alla fine di una pagina web. Pertanto, stiamo usando il .end di testo classe insieme al .drop part E .cadere in picchiata classi. Inoltre, la freccia verrà inserita prima del testo all'interno del pulsante. Produzione IL .La classe Dropstart funziona correttamente. Come assegnare la posizione giusta al menu a discesa Allo scopo di allineare il menu a discesa sul lato destro, utilizzare il .end-end a discesa classe. Html Se desideri aprire il menu a discesa sul lato destro invece di coprire l'intero spazio sotto il pulsante, assegna il .end-end a discesa classe insieme al .classe a discesa. Si noti che per dimostrare correttamente il funzionamento di questa classe abbiamo aggiunto un testo allungato all'interno del pulsante. Produzione Il menu a discesa è stato allineato a destra con successo. Come aggiungere un testo semplice a un menu a discesa In alcuni scenari vorresti aggiungere un testo semplice nel menu a discesa, quindi usa il .Dropdown-Item-text classe. Html Nel codice sopra, è stato creato un semplice menu a discesa, mentre alla fine dei collegamenti è stato creato un altro elemento dell'elenco; Tuttavia, per aggiungere testo semplice invece di usare il tag di ancoraggio Il tag è stato utilizzato ed è stato assegnato il .Dropdown-Item-text classe. Il testo è stato posto all'interno del etichetta. Produzione Ecco come aggiungi un testo semplice nel menu a discesa. Come creare un menu a discesa con pulsanti raggruppati Un'altra cosa interessante che può essere fatta usando i menu a discesa è aggiungere questi menu all'interno di pulsanti raggruppati. Di seguito abbiamo dimostrato come questo può essere fatto. Html Il codice sopra genera i gruppi di due pulsanti ciascuno è costituito da un singolo pulsante e ogni pulsante ha un menu a discesa ad esso associato. Ciascuno dei menu a discesa è stato creato in modo simile come dimostrato negli esempi precedenti. Produzione Il menu a discesa collegato al primo gruppo di pulsanti. Il menu a discesa collegato con il secondo gruppo di pulsanti. Conclusione Ai fini della creazione di un menu a discesa, assegnare il .cadere in picchiata menu a un contenitore div che avrà il menu a discesa al suo interno. Successivamente, utilizzare un pulsante o un collegamento per consentire all'utente di aprire il menu a discesa e assegnarlo il .Classe a discesa E Imposta Data-BS-Toggle = "Dropdown" Per rendere il menu attivabile. Successivamente, creare un elenco non ordinato e assegnarlo il .Classe a discesa-menu, Considerando che Assegna il .Classe a discesa-Item a ciascun elemento dell'elenco per fornire opzioni all'utente nel menu. Questo post discute come creare e modellare un menu a discesa in dettaglio.