Dropdown Bootstrap
Menu a discesa di base
Un menu a discesa è un menu attivabile che consente all'utente di scegliere un valore da un elenco predefinito:
Esempio
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Esempio spiegato
La .dropdownclasse indica un menu a tendina.
Per aprire il menu a discesa, utilizzare un pulsante o un collegamento con una classe di .dropdown-togglee l'
data-toggle="dropdown"attributo.
La .caretclasse crea un'icona a forma di freccia con accento circonflesso (), che indica che il pulsante è un menu a discesa.
Aggiungi la .dropdown-menuclasse a un <ul>elemento per creare effettivamente il menu a discesa.
Divisore a discesa
La .dividerclasse viene utilizzata per separare i collegamenti all'interno del menu a discesa con un sottile bordo orizzontale:
Esempio
<li class="divider"></li>
Intestazione a discesa
La .dropdown-headerclasse viene utilizzata per aggiungere intestazioni all'interno del menu a discesa:
Esempio
<li class="dropdown-header">Dropdown header 1</li>
Disattiva e attiva gli elementi
Evidenzia un elemento a discesa specifico con la classe .active (aggiunge un colore di sfondo blu).
Per disabilitare un elemento nel menu a tendina, usa la .disabledclasse (ottiene un colore del testo grigio chiaro e un'icona "divieto di parcheggio" al passaggio del mouse):
Esempio
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Posizione a discesa
Per allineare a destra il menu a discesa, aggiungi la .dropdown-menu-rightclasse all'elemento con .menu a discesa:
Esempio
<ul class="dropdown-menu dropdown-menu-right">
Ritiro
Se vuoi che il menu a discesa si espanda verso l'alto invece che verso il basso, cambia l'elemento <div> con class="dropdown" in "dropup":
Esempio
<div class="dropup">
Accessibilità a discesa
Per aiutare a migliorare l'accessibilità per le persone che utilizzano lettori di schermo, è necessario includere quanto segue rolee gli aria-*attributi durante la creazione di un menu a discesa:
Esempio
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
Riferimento completo a discesa Bootstrap
Per un riferimento completo di tutte le opzioni, i metodi e gli eventi a discesa, vai al nostro Riferimento a discesa Bootstrap JS .