Stiftung Drop-Down-Menü
Stiftung Drop-Down-Menü ermöglicht dem Benutzer einen Wert aus der Dropdown-Liste vordefinierter ist zu wählen:
Beispiele
<A Href = "#" Daten -dropdown = "id01" class = "button dropdown"> Dropdown Button </ a>
<! - Dropdown Inhalt ->
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Beispiele für analytische
.dropdown Klasse als Pfeil nach unten , um das Symbol "Symbol hinzuzufügen.
Verwenden Sie die Schaltflächen oder Links data-dropdown=" id " - data-dropdown=" id " Attribut das Dropdown-Menü zu öffnen.
id - Wert muss den Inhalt (ID01) Pull-Down - Menü ein.
In <die div>, <NAV>, <ul> hinzufügen .f-dropdown - data-dropdown-content .f-dropdown - Klassen und data-dropdown-content - data-dropdown-content - Attribut zu erstellen Inhalt Dropdown-Menü.
Letzte Initialisierung Foundation JS.
Hinweis: Auf dem Bildschirm wird der gesamte Breite des Drop-Down - Menü 100%.
Größe Dropdown-Menü
Verwenden Sie .tiny , .small , .medium , .large oder .mega die Breite des Drop-Down - Menü zu ändern.
Hinweis: Auf dem Bildschirm wird der gesamte Breite des Drop-Down - Menü 100%.
Beispiele
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down - tiny"> ..
<! - Kleine Dropdown: Max- Breite 300px ->
<Ul id = "ID02" Daten -dropdown-Gehalt class = "f-Drop - Down - small"> ..
<! - Medium Dropdown: Max- Breite 500px ->
<Ul id = "ID03" Daten -dropdown-Gehalt class = "f-Drop - Down - Medium">
<! - Große Dropdown: Max- Breite 800px ->
<Ul id = "id04" Daten -dropdown-Gehalt class = "f-Drop - Down - large"> ..
<- Mega Dropdown :! 100% Breite ->
<Ul id = "id04" Daten -dropdown-Gehalt class = "f-Drop - Down - mega"> ..
Versuchen »
Die Margen im Dropdown-Menü
Sie können mit .content Klasse Polsterung an den Drop-down - Menü hinzugefügt werden :
Beispiele
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down"> ..
<! - Dropdown mit Polsterung ->
<Ul id = "ID02" Daten -dropdown-Gehalt class = "f-Drop - Down - content"> ..
Versuchen »
andere Beispiele
<Div> Dropdown-Menü Multimedia-Elemente hinzuzufügen:
Beispiele
<Div id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down - Medium content">
<H4> Paris Titel </ h4 >
<P> Ein Text .. einige Text .. </ p>
<Img src = "paris.jpg" alt = "Paris" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
Versuchen »
Die Richtung des Pull-down-Menü
Standardmäßig ist der Drop-down - Menü am unteren Rand, können Sie hinzufügen , data-options="align:left|right|top" | right | top" seine Richtung zu ändern:
Beispiele
<A Href = "#" Daten -dropdown = "id02" data-options = "align: top" class = "button dropdown"> Top </ a>
<A Href = "#" Daten -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> Bottom </ a>
<A Href = "#" Daten -dropdown = "id04" data-options = "align: left" class = "button dropdown"> Links </ a>
Versuchen »
Pull-Down-Menüs auslösen Bedingungen
Standardmäßig wird das Dropdown-Menü angezeigt auf die Schaltfläche geklickt wird. Wenn Sie die Maus nach oben Anzeige bewegen müssen, können Sie über die Schaltfläche data-options="is_hover:true" " Attribut:
Beispiele
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
Versuchen »
Split-Taste
Wir können auf die Schaltfläche hinzufügen .split Klasse eine Split - Effekt - Taste zur Einstellung wird eine nach unten gerichtete Richtung Symbol - Taste auf der <span> Element der Segmentierung erzeugen:
Beispiele
<Span Daten-Drop - Down = "ID01 "> </ span>
</ Button>
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down">
<Li> <a href = "#"> Verbindung 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »