TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare i menu a discesa Bootstrap 5?

3

Abbiamo già toccato il componente a discesa nel nostro precedente tutorial sui pulsanti Bootstrap. Il menu a discesa non è altro che un pulsante (o un collegamento) e mostra un elenco quando si fa clic su di esso. In questo tutorial esploriamo diversi tipi di menu a discesa Bootstrap 5 con esempi. Ricorda di includere bootstrap.bundled.min.js affinché il menu a discesa funzioni. Puoi fare riferimento al modello di partenza qui.

Tutorial sui menu a discesa Bootstrap 5

  1. Funzionalità di base dei menu a discesa
  2. Creazione del pulsante a discesa predefinito
  3. Aggiunta del divisore
  4. Disabilitazione del collegamento nel menu a discesa
  5. Menu a discesa con allineamento del menu a destra
  6. Pulsante a discesa con intestazione
  7. Dimensionamento del pulsante a discesa
  8. Pulsante a discesa Dividi
  9. Pulsante a discesa Dividi
  10. Punti da ricordare

1 Nozioni di base su Bootstrap 5 Menu a discesa

  • I menu a discesa sono elenchi attivabili di collegamenti o elementi pulsante visualizzati in alto o in basso.
  • Questo è generalmente utilizzato per voci di menu a discesa o a discesa e voci di navigazione della barra laterale.
  • Funziona in base allo script Popper.js.
  • Dovresti includere popper.min.js e poi bootstrap.min.js nella stessa sequenza. Usa tutti gli esempi in questo tutorial insieme al nostro modello di partenza.
  • Per impostazione predefinita, non verranno aggiunti attributi "role" o "aria-" all’elemento a discesa. È necessario inserire manualmente dove richiesto.
  • Gli elementi a discesa possono essere chiusi facendo clic sul pulsante o facendo clic all’esterno. Puoi anche usare il tasto "Esc" per chiudere gli elementi a discesa.

2 Creazione del pulsante a discesa predefinito

Di seguito è riportato il codice per la creazione di un menu a discesa predefinito in Bootstrap 5:

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Produrrà il seguente risultato sul browser:

Come creare i menu a discesa Bootstrap 5?

  • Fondamentalmente è necessario avvolgere il contenuto all’interno di un div utilizzando la classe ".dropdown". Questo identificherà il pulsante come un pulsante a discesa. Puoi anche usare il tag invece del pulsante.
  • Il pulsante (o collegamento) deve essere incluso nella classe ".dropdown-toggle". In questo esempio, abbiamo utilizzato la classe "btn-primary" per creare il pulsante con il colore primario. È possibile utilizzare qualsiasi classe di utilità del colore per avere un pulsante di colore diverso.
  • Dopo il pulsante crea un menu a discesa con gli elementi.

3 Aggiunta di divisori nel menu a discesa

Ora sai come creare il pulsante a discesa di base. Aggiungiamo alcuni elementi decorativi come l’aggiunta di un divisore tra le voci di menu e l’intestazione.

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h6 class="dropdown-header">Dropdown Header</h6> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Il menu a discesa sarà simile al seguente:

Come creare i menu a discesa Bootstrap 5?

4 Disabilitazione del collegamento nell’elemento a discesa

Puoi disabilitare l’elemento nel menu a discesa per evitare di fare clic su:

<div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown Two</a> <div class="dropdown-divider"></div> <a class="dropdown-item disabled" href="#">Dropdown Three</a> </div> </div>

Abbiamo usato il pulsante info e disabilitato il terzo link. Spostando il mouse sul collegamento disabilitato verrà visualizzato il simbolo del cursore di arresto e non sarà possibile fare clic su di esso.

Come creare i menu a discesa Bootstrap 5?

5 Menu a discesa con allineamento del menu a destra

Come hai notato negli esempi precedenti, il menu per impostazione predefinita verrà mostrato con l’allineamento a sinistra. Puoi cambiarlo in allineamento a destra aggiungendo la classe ".dropdown-menu-right" insieme alla classe ".dropdown-menu". Ricorda, questo sposterà la casella del menu completa a destra del contenitore. Dovresti utilizzare stili CSS aggiuntivi per posizionare correttamente il menu sotto l’elemento del pulsante a discesa.

<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button Alignment Right </button> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Le voci di menu allineate a destra appariranno come di seguito:

Come creare i menu a discesa Bootstrap 5?

6 Pulsante a discesa con intestazione

Puoi anche aggiungere un testo di intestazione all’interno delle voci di menu utilizzando la classe ".dropdown-header" con uno qualsiasi dei tag H1 – H6. Generalmente l’intestazione viene aggiunta in cima al menu e non è cliccabile.

<div class="dropdown"> <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <h5 class="dropdown-header" href="#">Dropdown Header</h5> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> </div> </div>

Il menu a discesa con intestazione produrrà il seguente risultato:

Come creare i menu a discesa Bootstrap 5?

7 Ridimensionamento del pulsante a discesa

Rendi il pulsante a discesa grande o piccolo usando le classi ".btn-lg" e ".btn-sm" come di seguito:

<div class="btn-group"> <button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div> <div class="btn-group"> <button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown Button </button> <div class="dropdown-menu" aria-labelledby="dropdownmenu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Nota, abbiamo usato due gruppi di pulsanti per mostrare due pulsanti in linea, se vuoi mostrare solo un pulsante (diciamo grande), puoi usare la classe ".dropdown" predefinita.

I pulsanti a discesa grande e piccolo sono mostrati di seguito:

Come creare i menu a discesa Bootstrap 5?

8 Pulsante a discesa Dividi

A partire da ora abbiamo visto diversi tipi di menu a discesa come un singolo pulsante. Il pulsante di divisione ha due pulsanti che fanno parte di esso, quindi dovresti usare il gruppo di pulsanti per mostrarli in linea senza spazi vuoti. La suddivisione di due pulsanti è abilitata utilizzando la classe css ".dropdown-toggle-split".

<div class="btn-group"> <button type="button" class="btn btn-secondary">Split Button</button> <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Il pulsante a discesa Dividi avrà il seguente aspetto:

Come creare i menu a discesa Bootstrap 5?

9 Pulsante Dropup diviso

Questo è semplicemente uno stile a discesa invece del menu a discesa predefinito che utilizza la classe ".dropup".

<div class="btn-group dropup"> <button type="button" class="btn btn-warning">Split Dropup Button</button> <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Dropdown Button Group</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Dropdown One</a> <a class="dropdown-item" href="#">Dropdown Two</a> <a class="dropdown-item" href="#">Dropdown Three</a> </div> </div>

Il pulsante di divisione del menu a discesa apparirà come di seguito:

Come creare i menu a discesa Bootstrap 5?

10 punti importanti da ricordare

Il menu a discesa verrà automaticamente mostrato in basso o in alto a seconda della finestra del browser. Ad esempio, quando sei alla fine della pagina, le voci del menu a discesa verranno mostrate sopra come menu a discesa.

L’elemento pulsante nel menu a discesa supporta tutte le classi di utilità del colore di sfondo simili al componente pulsante predefinito. Bootstrap 3 supporta solo i collegamenti per le voci di menu. Ma in Bootstrap 4 e 5 ogni voce di menu può essere un collegamento o un elemento pulsante.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More