Dropdowns
Menu contextual para mostrar lista de links.
Exemplos
Envolva o trigger e o menu do dropdown com um elemento que tenha a class .dropdown, então adicione o HTML do menu .
Setinhas dentro de dropdown
No Locaweb Style fizemos uma melhoria, então as setinhas são inseridas diretas :before do elemento, sendo assim não há a necessidade de ter o html
que vem do boostrap, senão ficará com 2 setinhas, conforme no exemplo abaixo:
Alignment options
.pull-right no .dropdown-menu alinha o mesmo a direita.
Headers
Uma li com a classe dropdown-header adiciona um header em um grupo de itens do dropdown-menu.
Itens desabilitados no menu
Uma li com a classe .disabled deixa o item com cara de desabilitado.
Você pode colocar o dropdown-menu em quase tudo, incluindo navbar, tabs e pills.
Dentro de navbar
Dentro de tabs
Modo de uso
Via atributos ou JavaScript, o plugin de dropdown mostra e esconde o conteúdo, alternando a classe .open. Quando aberto, o plugin também adiciona o .dropdown-backdrop para que o dropdown-menu seja fechado quando se clica fora dele.
Via atributo data
data-toggle="dropdown" em um link ou botão para fazer "toggle" no dropdown.
Para manter a URL intacta, use o atributo data-target ao invés do href="#".
Via JavaScript
Chame o dropdown via Javascript:
$('.dropdown-toggle').dropdown()
Métodos
$().dropdown('toggle')
Arterna o dropdown-menu de uma navegação de navbar ou tab.
Eventos
| Tipo de Evento | Descrição |
|---|---|
| show.bs.dropdown | Esse evento é disparado imediatamente quando o método show é chamado. |
| shown.bs.dropdown | Esse evento é disparado quando o dropdown está completamente visível para o usuário. (ele vai esperar a animação do CSS acabar). |
| hide.bs.dropdown | Esse evento é disparado imediatamente quando o método hide é chamado. |
| hidden.bs.dropdown | Esse evento é disparado quando o dropdown está completamente invisível para o usuário. (ele vai esperar a animação do CSS acabar). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})