Abbiamo già avuto modo di parlare di elenchi a discesa, ma nella loro versione più semplice. Torniamo sull’argomento per aggiungere qualche ulteriore informazione. Ad esempio, è possibile realizzare un menu a discesa (dropdown menu) che simula una selectbox.
Si tratta di un’operazione semplice. Basta creare un gruppo di pulsanti con un pulsante e un elenco a discesa. Il pulsante che attiva quest’ultimo non deve avere una etichetta di testo: in questo modo, viene aggiunta semplicemente la freccina che segnala la presenza di un elenco a discesa.
Per far sì che il menu si apra sotto ad entrambi i pulsanti e non solo sotto al pulsante con la freccina, è importante assegnare l’attributo role="menu" all’elemento ul che genera l’elenco a discesa. Vediamo il codice:
<div class="btn-group">
<button type="button" class="btn btn-default">Pulsante</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
Il pulsante diviso può facilmente essere realizzato anche in verticale
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Pulsante</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
La direzione della freccia
Di norma la freccia dei pulsanti che attivano un elenco a discesa è rivolta verso il basso. Se si vuole, la si può rivolgere verso l’alto usando la classe dropup.
Il layout deve disporre di uno spazio perchè si possa aprire il menu "a risalita", altrimenti questo si nasconde. Questo avviene, ad esempio, se il menu si trova all’inizio della pagina: il menu espanso, in questo caso, si nasconderà oltre il bordo della finestra del browser!
Vediamo di seguito il markup per un bottone che espande un menu in risalita:
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Elenco a risalita</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
