Dropdown

Attiva/disattiva le sovrapposizioni contestuali per la visualizzazione di elenchi di collegamenti e altro con il plug-in a discesa Bootstrap.

Panoramica

I menu a discesa sono sovrapposizioni contestuali attivabili per visualizzare elenchi di collegamenti e altro. Sono resi interattivi con il plug-in JavaScript a discesa Bootstrap incluso. Vengono attivati facendo clic, non passando con il mouse; questa è una decisione progettuale intenzionale.

I menu a discesa sono basati su una libreria di terze parti, Popper.js , che fornisce posizionamento dinamico e rilevamento del viewport. Assicurati di includere popper.min.js prima di JavaScript di Bootstrap o usa bootstrap.bundle.min.js/ bootstrap.bundle.jsche contiene Popper.js. Popper.js non viene utilizzato per posizionare i menu a discesa nelle barre di navigazione, anche se non è richiesto il posizionamento dinamico.

Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .

Accessibilità

Lo standard WAI ARIA definisce un vero e proprio role="menu"widget , ma questo è specifico per i menu simili a applicazioni che attivano azioni o funzioni. I menu ARIA possono contenere solo voci di menu, voci di menu checkbox, voci di menu di pulsanti di opzione, gruppi di pulsanti di opzione e sottomenu.

I menu a discesa di Bootstrap, d'altra parte, sono progettati per essere generici e applicabili a una varietà di situazioni e strutture di markup. Ad esempio, è possibile creare menu a discesa che contengono input aggiuntivi e controlli dei moduli, come campi di ricerca o moduli di accesso. Per questo motivo, Bootstrap non si aspetta (né aggiunge automaticamente) nessuno degli attributi rolee richiesti per i veri menu ARIA . Gli autori dovranno includere essi stessi questi attributi più specifici.aria-

Tuttavia, Bootstrap aggiunge il supporto integrato per la maggior parte delle interazioni standard del menu della tastiera, come la possibilità di spostarsi tra i singoli .dropdown-itemelementi utilizzando i tasti cursore e chiudere il menu con il ESCtasto.

Esempi

Avvolgi l'interruttore del menu a discesa (il tuo pulsante o collegamento) e il menu a discesa all'interno di .dropdown, o un altro elemento che dichiara position: relative;. I menu a discesa possono essere attivati da <a>o <button>elementi per soddisfare meglio le tue potenziali esigenze.

Menu a discesa a pulsante singolo

Qualsiasi singolo .btnpuò essere trasformato in un interruttore a discesa con alcune modifiche al markup. Ecco come puoi metterli in funzione con entrambi <button>gli elementi:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

E con <a>elementi:

<div class="dropdown show">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

La parte migliore è che puoi farlo anche con qualsiasi variante di pulsante:

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Menu a discesa dei pulsanti di divisione

Allo stesso modo, crea menu a discesa dei pulsanti divisi con praticamente lo stesso markup dei menu a discesa dei pulsanti singoli, ma con l'aggiunta di .dropdown-toggle-splituna spaziatura adeguata attorno al cursore a discesa.

Usiamo questa classe extra per ridurre l'orizzontale paddingsu entrambi i lati del cursore del 25% e rimuovere margin-leftquello aggiunto per i normali menu a discesa dei pulsanti. Queste modifiche extra mantengono il cursore centrato nel pulsante di divisione e forniscono un'area di successo di dimensioni più appropriate accanto al pulsante principale.

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</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">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Dimensionamento

I menu a discesa dei pulsanti funzionano con pulsanti di tutte le dimensioni, inclusi i pulsanti a discesa predefiniti e divisi.

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

Variazione a caduta

Attiva i menu a discesa sopra gli elementi aggiungendoli .dropupall'elemento padre.

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Variazione Dropright

Attiva i menu a discesa a destra degli elementi aggiungendoli .droprightall'elemento padre.

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Variazione a sinistra

Attiva i menu a discesa a sinistra degli elementi aggiungendoli .dropleftall'elemento padre.

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

Storicamente i contenuti del menu a discesa dovevano essere collegamenti, ma non è più il caso della v4. Ora puoi opzionalmente utilizzare <button>elementi nei tuoi menu a discesa anziché solo <a>s.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Per impostazione predefinita, un menu a discesa viene posizionato automaticamente al 100% dall'alto e lungo il lato sinistro del suo genitore. Aggiungi .dropdown-menu-righta a .dropdown-menuper allineare a destra il menu a discesa.

Dritta! I menu a discesa sono posizionati grazie a Popper.js (tranne quando sono contenuti in una barra di navigazione).

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

Aggiungi un'intestazione per etichettare sezioni di azioni in qualsiasi menu a discesa.

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

Separare i gruppi di voci di menu correlate con un divisore.

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

Inserisci un modulo all'interno di un menu a discesa o trasformalo in un menu a discesa e utilizza le utilità di margine o riempimento per dargli lo spazio negativo necessario.

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck">
      <label class="form-check-label" for="dropdownCheck">
        Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="dropdownCheck2">
    <label class="form-check-label" for="dropdownCheck2">
      Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Aggiungi .activeagli elementi nel menu a discesa per impostarli come attivi .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Aggiungi .disabledagli elementi nel menu a discesa per impostarli come disabilitati .

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

Utilizzo

Tramite attributi di dati o JavaScript, il plug-in a discesa attiva o disattiva il contenuto nascosto (menu a discesa) attivando la .showclasse sull'elemento dell'elenco padre. L' data-toggle="dropdown"attributo viene utilizzato per la chiusura dei menu a discesa a livello di applicazione, quindi è una buona idea utilizzarlo sempre.

Sui dispositivi abilitati al tocco, l'apertura di un menu a discesa aggiunge gestori vuoti ( $.noop) mouseoverai figli immediati <body>dell'elemento. Questo hack certamente brutto è necessario per aggirare una stranezza nella delega dell'evento di iOS , che altrimenti impedirebbe a un tocco in qualsiasi punto al di fuori del menu a discesa di attivare il codice che chiude il menu a discesa. Una volta chiuso il menu a discesa, questi mouseovergestori vuoti aggiuntivi vengono rimossi.

Tramite attributi di dati

Aggiungi data-toggle="dropdown"a un link o un pulsante per attivare un menu a discesa.

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

Tramite JavaScript

Chiama i menu a discesa tramite JavaScript:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`ancora richiesto

Indipendentemente dal fatto che chiami il menu a discesa tramite JavaScript o utilizzi invece data-api, data-toggle="dropdown"è sempre necessario essere presente sull'elemento trigger del menu a discesa.

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

Nome	Tipo	Predefinito	Descrizione
compensare	numero \| stringa \| funzione	0	Offset del menu a discesa rispetto al suo target. Per ulteriori informazioni, fare riferimento ai documenti di offset di Popper.js .
Flip	booleano	VERO	Consenti a Dropdown di capovolgersi in caso di sovrapposizione sull'elemento di riferimento. Per ulteriori informazioni, fare riferimento ai documenti flip di Popper.js .
confine	stringa \| elemento	'scorri Genitore'	Limite del vincolo di overflow del menu a discesa. Accetta i valori di `'viewport'`, `'window'`, `'scrollParent'`o un riferimento HTMLElement (solo JavaScript). Per ulteriori informazioni, fare riferimento ai documenti preventOverflow di Popper.js .

Nota quando boundaryè impostato su un valore diverso da 'scrollParent', lo stile position: staticviene applicato al .dropdowncontenitore.

Metodi

Metodo	Descrizione
`$().dropdown('toggle')`	Attiva o disattiva il menu a discesa di una determinata barra di navigazione o la navigazione a schede.
`$().dropdown('update')`	Aggiorna la posizione del menu a discesa di un elemento.
`$().dropdown('dispose')`	Distrugge il menu a discesa di un elemento.

Eventi

Tutti gli eventi a discesa vengono attivati .dropdown-menusull'elemento padre di ' e hanno una relatedTargetproprietà, il cui valore è l'elemento di ancoraggio commutante.

Evento	Descrizione
`show.bs.dropdown`	Questo evento viene attivato immediatamente quando viene chiamato il metodo show instance.
`shown.bs.dropdown`	Questo evento viene attivato quando il menu a discesa è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
`hide.bs.dropdown`	Questo evento viene generato immediatamente quando viene chiamato il metodo dell'istanza hide.
`hidden.bs.dropdown`	Questo evento viene attivato quando il menu a discesa ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Dropdown

Panoramica

Accessibilità

Esempi

Menu a discesa a pulsante singolo

Menu a discesa dei pulsanti di divisione

Dimensionamento

Variazione a caduta

Variazione Dropright

Variazione a sinistra

Voci del menu

Allineamento menu

Intestazioni di menu

Divisori di menu

Moduli menu

Voci di menu attive

Voci di menu disabilitate

Utilizzo

Tramite attributi di dati

Tramite JavaScript

`data-toggle="dropdown"`ancora richiesto

Opzioni

Metodi

Eventi

Dropdown

Panoramica

Accessibilità

Esempi

Menu a discesa a pulsante singolo

Menu a discesa dei pulsanti di divisione

Dimensionamento

Variazione a caduta

Variazione Dropright

Variazione a sinistra

Voci del menu

Allineamento menu

Intestazioni di menu

Intestazione a discesa

Divisori di menu

Moduli menu

Voci di menu attive

Voci di menu disabilitate

Utilizzo

Tramite attributi di dati

Tramite JavaScript

data-toggle="dropdown"ancora richiesto

Opzioni

Metodi

Eventi

`data-toggle="dropdown"`ancora richiesto