menu a discesa Fondazione
Fondazione menu a tendina permette all'utente di selezionare un valore dall'elenco a discesa dei predefiniti di:
Esempi
<A Href = "#" dati -dropdown = "id01" class = "button dropdown"> discesa pulsante </ a>
<! - Contenuto discesa ->
<Ul id = dati "ID01" -dropdown-content class = "F-discesa">
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Esempi di analitica
.dropdown classe come un pulsante con la freccia verso il basso per aggiungere il simbolo ".
Utilizzare i pulsanti o collegamenti data-dropdown=" id " attributo per aprire il menu a discesa.
valore id deve corrispondere il contenuto (ID01) menu a discesa.
In <div>, <NAV>, <ul> aggiungere .f-dropdown classi e data-dropdown-content attributo per creare menu a discesa contenuti.
Ultima inizializzazione Fondazione JS.
Nota: Sul piccolo schermo, tutta la larghezza del menu a discesa è al 100%.
Dimensioni menu a discesa
Utilizzare .tiny , .small , .medium , .large o .mega di modificare la larghezza del menu a discesa.
Nota: Sul piccolo schermo, tutta la larghezza del menu a discesa è al 100%.
Esempi
<id = dati UL "ID01" -content -dropdown class = "F-discesa piccolo"> ..
<! - Piccolo discesa: MAX larghezza è 300px ->
<id = dati UL "id02" -content -dropdown class = "F-discesa piccolo"> ..
<! - Discesa Media: MAX larghezza è 500px ->
<Ul id = dati "ID03" -dropdown-content class = "medio f-discesa">
<! - Grande discesa: MAX larghezza è 800px ->
<id = dati UL "id04" -content -dropdown class = "F-discesa di grandi dimensioni"> ..
<- Mega discesa :! 100% di larghezza ->
<ul id = "dati" id04 -dropdown-content class = "mega-f discesa"> ..
Prova »
Margini menu a discesa
È possibile utilizzare .content classe per aggiungere imbottitura per il menu a discesa:
Esempi
<id = dati UL "ID01" -content -dropdown class = "F-discesa"> ..
<! - Discesa con imbottitura ->
<ul id = dati "id02" -content -dropdown class = "content f-discesa"> ..
Prova »
Altri esempi
<Div> menu a discesa per aggiungere elementi multimediali:
Esempi
<Div id = dati "ID01" -dropdown-content class = "contenuto medio f-discesa">
<H4> Parigi Titolo </ h4 >
<P> Alcuni testo .. un testo .. </ p>
<Img src = "paris.jpg" alt = "Parigi" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
Prova »
La direzione del menu a discesa
Per impostazione predefinita, il menu a tendina in basso, è possibile aggiungere data-options="align:left|right|top" | right | top" per cambiare la sua direzione:
Esempi
<A Href = "#" dati -dropdown = "id02" data-options = "align: class = top" "button dropdown"> Top </ a>
<A Href = "#" dati -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> inferiore </ a>
<A Href = "#" dati -dropdown = "id04" data-options = "align: class = left" "button dropdown"> Sinistra </ a>
Prova »
menu a tendina innescano condizioni
Per impostazione predefinita, viene visualizzato il menu a discesa sul pulsante viene premuto. Se è necessario spostare il display del mouse, è possibile utilizzare il pulsante data-options="is_hover:true" " l'attributo:
Esempi
<Ul id = dati "ID01" -dropdown-content class = "F-discesa">
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
Prova »
pulsante Dividi
Siamo in grado di aggiungere il pulsante .split classe per impostare un pulsante effetto di divisione genererà un pulsante verso il basso in direzione icona sulla <span> elemento di segmentazione:
Esempi
<Span data-discesa = "ID01 "> </ span>
</ Button>
<Ul id = dati "ID01" -dropdown-content class = "F-discesa">
<Li> <a href = "#"> collegamento 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »