menu drop-down Foundation
Fundação menu drop-down permite que o usuário selecione um valor na lista drop-down de predefinido de:
Exemplos
<A Href = "#" dados -dropdown = "id01" class = "button dropdown"> suspensa Botão </ a>
<! - O conteúdo suspensa ->
<Ul id = dados "ID01" -dropdown-content class = "f-suspenso">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
</ Ul>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
Exemplos de analítico
.dropdown classe como um botão de seta para baixo para adicionar o ícone do símbolo ".
Use os botões ou links data-dropdown=" id " atributo para abrir o menu drop-down.
id valor precisa corresponder o conteúdo (ID01) menu suspenso.
Em <div>, <NAV>, <ul> adicionar .f-dropdown classes e data-dropdown-content atributo para criar menu drop-down conteúdo.
Última Fundação inicialização JS.
Nota: Na tela pequena, toda a largura do menu drop-down é de 100%.
Tamanho menu drop-down
Use .tiny , .small , .medium , .large ou .mega para modificar a largura do menu drop-down.
Nota: Na tela pequena, toda a largura do menu drop-down é de 100%.
Exemplos
<ul id = dados "ID01" -dropdown-content class = "f-suspenso minúscula"> ..
<! - Pequeno suspensa: max- largura é 300px ->
<ul id = dados "id02" -dropdown-content class = "f-suspenso pequeno"> ..
<! - Dropdown Médio: max- largura é 500px ->
<Id = dados "id03" Ul -dropdown-content class = "meio f-suspenso">
<! - Grande suspensa: max- largura é 800px ->
<ul id = dados "id04" -dropdown-content class = "f-suspenso large"> ..
<- Mega suspensa :! 100% largura ->
<ul id = dados "id04" -dropdown-content class = "mega-f-suspenso"> ..
tente »
Margens menu drop-down
Você pode usar .content classe para adicionar preenchimento ao menu drop-down:
Exemplos
<ul id = dados "ID01" -dropdown-content class = "f-dropdown"> ..
<! - Dropdown com estofamento ->
<ul id = dados "id02" class = "conteúdo f-suspenso" -dropdown-content> ..
tente »
outros exemplos
<Div> menu drop-down para adicionar elementos multimídia:
Exemplos
<Div id = dados "ID01" -dropdown-content class = "content meio f-suspenso">
<H4> Paris Título </ h4 >
<P> Algum texto .. algum texto .. </ p>
<Img src = "paris.jpg" alt = "Paris" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
tente »
A direção do menu suspenso
Por padrão, o menu drop-down na parte inferior, você pode adicioná data-options="align:left|right|top" | direito | top" para mudar sua direção:
Exemplos
<A Href = "#" dados -dropdown = "id02" data-options = "align: top" class = "button dropdown"> Top </ a>
<A Href = "#" dados -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> inferior </ a>
<A Href = "#" dados -dropdown = "id04" data-options = "align: classe left" = "button dropdown"> Esquerda </ a>
tente »
menus pull-down desencadear condições
Por padrão, o menu drop-down é exibida no botão é clicado. Se você precisa mover o mouse para cima exibição, você pode usar o botão data-options="is_hover:true" " atributo:
Exemplos
<Ul id = dados "ID01" -dropdown-content class = "f-suspenso">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
</ Ul>
tente »
botão de divisão
Nós podemos adicionar o botão .split classe para definir um botão efeito de divisão vai gerar um botão para baixo ícone de direcção no <span> elemento de segmentação:
Exemplos
<Span data-suspenso = "ID01 "> </ span>
</ Button>
<Ul id = dados "ID01" -dropdown-content class = "f-suspenso">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> ligação 3 </ a> </ li>
</ Ul>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »