menu rozwijane Fundacja
menu rozwijane Fundacja pozwala użytkownikowi wybrać wartość z listy rozwijanej predefiniowane na:
Przykłady
<A Href = "#" danych -dropdown = "id01" class = "button dropdown"> rozwijane Przycisk </ a>
<! - Zawartość rozwijane ->
<Ul id = "Dane" id01 -dropdown-content class = "f-rozwijana">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> link 3 </ a> </ li>
</ Ul>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Przykłady analityczne
.dropdown klasy jako przycisk strzałka w dół, aby dodać ikonę symbol ".
Za pomocą przycisków lub łącza data-dropdown=" id " atrybut, aby otworzyć menu rozwijane.
Wartość identyfikatora musi dopasować zawartość (id01) menu rozwijanego.
W <div>, <NAV>, <ul> dodaj .f-dropdown klas i data-dropdown-content atrybut stworzyć rozwijane menu zawartości.
Ostatni inicjalizacji Fundacja JS.
Uwaga: Na małym ekranie, wszystkie szerokości menu rozwijanego wynosi 100%.
Rozmiar menu rozwijanego
Użyj .tiny , .small , .medium , .large lub .mega zmodyfikować szerokość menu rozwijanego.
Uwaga: Na małym ekranie, wszystkie szerokości menu rozwijanego wynosi 100%.
Przykłady
<ul id = "Dane" id01 -dropdown-content class = "f-rozwijana malutki"> ..
<! - Mały rozwijane: max- szerokość 300px ->
<ul id = "Dane" id02 -dropdown-content class = "f-rozwijana małe"> ..
<! - Średni rozwijane: max- szerokość 500px ->
<Ul id = "Dane" id03 -dropdown-content class = "f-rozwijana średni">
<! - Duży rozwijane: max- szerokość 800px ->
<ul id = "Dane" id04 -dropdown-content class = "f-rozwijana duża"> ..
<- Mega rozwijanej :! 100% szerokości ->
<ul id = "Dane" id04 -dropdown-content class = "f-rozwijana mega"> ..
Spróbuj »
Rozwijane menu Marginesy
Można użyć .content klasę dodać dopełnienie do menu rozwijanego:
Przykłady
<ul id = "id01" Dane -dropdown-content class = "f"> rozwijane ..
<! - Rozwijane z wyściółką ->
<ul id = "id02" Dane -dropdown-content class = "content-f rozwijana"> ..
Spróbuj »
Inne przykłady
<Div> menu rozwijane, aby dodać elementy multimedialne:
Przykłady
<Div id = "Dane" id01 -dropdown-content class = "f-rozwijana średniej zawartości">
<H4> Paryż tytuł </ h4 >
<P> Jakiś tekst jakiś tekst .. .. </ p>
<Img src = "paris.jpg" alt = "Paris" width = "400" height = "300">
<P> Zakochany Paryż. </ P>
</ Div>
Spróbuj »
Kierunek menu rozwijanego
Domyślnie menu rozwijane na dole, można dodać data-options="align:left|right|top" | right | top" , aby zmienić jego kierunek:
Przykłady
<A Href = "#" danych -dropdown = "id02" data-options = "align: top" class = "button dropdown"> Top </ a>
<A Href = "#" danych -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> dolna </ a>
<A Href = "#" danych -dropdown = "id04" data-options = "align: left" class = "button dropdown"> Lewy </ a>
Spróbuj »
menu rozwijanego wywołać warunki
Domyślnie wyświetlane jest menu rozwijane po kliknięciu przycisku. Jeśli trzeba przenieść wyświetlacz myszy w górę, można użyć przycisku data-options="is_hover:true" " atrybutu:
Przykłady
<Ul id = "Dane" id01 -dropdown-content class = "f-rozwijana">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> link 3 </ a> </ li>
</ Ul>
Spróbuj »
przycisk Splicie
Możemy dodać przycisk .split klasę ustawić przycisk efekt split wygeneruje spadkową ikona przycisku kierunku na <span> element segmentacji:
Przykłady
<Span danych rozwijana = "id01 "> </ span>
</ Button>
<Ul id = "Dane" id01 -dropdown-content class = "f-rozwijana">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> link 3 </ a> </ li>
</ Ul>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »