Das beste Stiftung Drop-Down-Menü-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Größe Dropdown-Menü,Die Margen im Dropdown-Menü,andere Beispiele,Die Richtung des Pull-down-Menü,Pull-Down-Menüs auslösen Bedingungen,Split-Taste, lernen
Stiftung Drop-Down-Menü
Stiftung Drop-Down-Menü ermöglicht dem Benutzer einen Wert aus der Dropdown-Liste vordefinierter ist zu wählen:
Beispiele
<! - Lösen Sie die Dropdown ->
<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
<! - Tiny Dropdown: Max- Breite 200px ->
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down - tiny"> de
<! - Kleine Dropdown: Max- Breite 300px ->
<Ul id = "ID02" Daten -dropdown-Gehalt class = "f-Drop - Down - small"> de
<! - 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"> de
<- Mega Dropdown :! 100% Breite ->
<Ul id = "id04" Daten -dropdown-Gehalt class = "f-Drop - Down - mega"> de
Versuchen »
Die Margen im Dropdown-Menü
Sie können mit .content
Klasse Polsterung an den Drop-down - Menü hinzugefügt werden :
Beispiele
<! - Standard Dropdown ->
<Ul id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down"> de
<! - Dropdown mit Polsterung ->
<Ul id = "ID02" Daten -dropdown-Gehalt class = "f-Drop - Down - content"> de
Versuchen »
andere Beispiele
<Div> Dropdown-Menü Multimedia-Elemente hinzuzufügen:
Beispiele
<A Href = "#" Daten -dropdown = "id01" class = "button dropdown"> Dropdown Button </ a>
<Div id = "ID01" Daten -dropdown-Gehalt class = "f-Drop - Down - Medium content">
<H4> Paris Titel </ h4 >
<P> Ein Text de einige Text de </ 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 = "id01" data-options = "align: right" class = "button dropdown"> Rechts </ a>
<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
<A Href = "#" Daten -dropdown = "id01" data-options = "is_hover: true" class = "button dropdown"> Hover über mich </ a>
<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
<Taste class = "Taste split" > Split - Taste
<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 »