Per creare menu contestuali con liste di link attivabili con Javascript, si sfrutta il componente Dropdown.
<div class="dropdown"> <!-- Link o pulsante per l'attivazione del dropdown --> <a data-toggle="dropdown" href="#" class="btn btn-primary">Attiva il dropdown</a> <!-- Menu dropdown --> <ul class="dropdown-menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div>
Il componente si basa su tre elementi fondamentali. Nell'ordine:
.dropdown;.dropdown-menu che costituisce il menu vero e proprio, con le varie voci rappresentate da un link racchiuso in un li.La struttura di base del menu dropdown può essere completata con altri elementi opzionali, ovvero uno o più intestazioni e divisori. Questa struttura si presta bene per menu suddivisi in sezioni.
<div class="dropdown"> <a data-toggle="dropdown" href="#" class="btn btn-primary">Attiva il dropdown</a> <ul class="dropdown-menu"> <li class="dropdown-header">Sezione 1</li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li class="divider"></li> <li class="dropdown-header">Sezione 2</li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li class="divider"></li> <li class="dropdown-header">Sezione 3</li> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div>
L'intestazione si imposta con un li con classe .dropdown-header. Il divisore con un li con classe .divider.
Se un'applicazione richiede la presenza di link disabilitati nel menu dropdown, si aggiunge la classe .disabled al li da disabilitare.
<div class="dropdown"> <a data-toggle="dropdown" href="#" class="btn btn-primary">Attiva il dropdown</a> <ul class="dropdown-menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li class="disabled"><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </div>
Per personalizzare l'aspetto del box principale del menu dropdown si interviene su questa regola:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
}
I valori del posizionamento andrebbero lasciati intatti, mentre si potrà agire sulle altre regole per impostare a piacere il padding, il colore di sfondo, il bordo, l'ombreggiatura.
Si può modificare anche l'aspetto dei link del menu agendo su queste regole:
/* Link del menu */
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: nowrap;
}
/* Colori del link sull'hover e sul focus */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #428bca;
}
/* Colori del link nello stato active */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
background-color: #428bca;
outline: 0;
}
Per personalizzare il divisore questa è la regola:
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
Non manca la possibilità di modificare a piacere lo stile delle intestazioni e dei link disabilitati:
/* Divisore */
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #999999;
}
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
/* Intestazione */
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.428571429;
color: #999999;
}