menu drop-down Yayasan
Yayasan menu drop-down memungkinkan pengguna untuk memilih nilai dari daftar drop-down dari yang telah ditetapkan ini:
contoh
<A Href = "#" Data -dropdown = "id01" class = "button dropdown"> Dropdown Tombol </ a>
<! - Konten Dropdown ->
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Contoh analisis
.dropdown kelas sebagai tombol panah ke bawah untuk menambahkan simbol "ikon.
Gunakan tombol atau link data-dropdown=" id " atribut untuk membuka menu drop-down.
nilai id harus sesuai dengan isi (ID01) menu pull-down.
Dalam <div>, <NAV>, <ul> add .f-dropdown kelas dan data-dropdown-content atribut untuk membuat menu drop-down konten.
inisialisasi Yayasan terakhir JS.
Catatan: Pada layar kecil, semua lebar menu drop-down adalah 100%.
menu ukuran drop-down
Gunakan .tiny , .small , .medium , .large atau .mega untuk memodifikasi lebar menu drop-down.
Catatan: Pada layar kecil, semua lebar menu drop-down adalah 100%.
contoh
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown kecil"> ..
<! - Dropdown Kecil: max- lebar 300px ->
<Ul id = "id02" Data -dropdown-konten class = "f-dropdown kecil"> ..
<! - Dropdown Medium: max- lebar 500px ->
<Ul id = "id03" Data -dropdown-konten class = "f-dropdown menengah">
<! - Dropdown Besar: max- lebar 800px ->
<Ul id = "id04" Data -dropdown-konten class = "f-dropdown besar"> ..
<- Mega 100% Dropdown :! lebar ->
<Ul id = "id04" Data -dropdown-konten class = "f-dropdown mega"> ..
Coba »
Margin menu drop-down
Anda dapat menggunakan .content kelas untuk menambahkan padding untuk menu drop-down:
contoh
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown"> ..
<! - Dropdown dengan bantalan ->
<Ul id = "id02" Data -dropdown-konten class = "content f-dropdown"> ..
Coba »
contoh lain
<Div> menu tarik-turun untuk menambahkan elemen multimedia:
contoh
<Div id = data "ID01" -dropdown-konten class = "f-dropdown konten media">
<H4> Paris Judul </ h4 >
<P> Beberapa teks .. beberapa teks .. </ p>
<Img src = "paris.jpg" alt = "Paris" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
Coba »
Arah dari menu pull-down
Secara default, menu drop-down di bagian bawah, Anda dapat menambahkan data-options="align:left|right|top" | kanan | atas" untuk mengubah arah:
contoh
<A Href = "#" Data -dropdown = "id02" data-options = "align: top" class = "button dropdown"> Top </ a>
<A Href = "#" Data -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> Bawah </ a>
<A Href = "#" Data -dropdown = "id04" data-options = "align: kelas left" = "button dropdown"> Kiri </ a>
Coba »
menu pull-down memicu kondisi
Secara default, menu drop-down ditampilkan pada tombol diklik. Jika Anda perlu untuk memindahkan mouse up display, Anda dapat menggunakan tombol data-options="is_hover:true" " atribut:
contoh
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
Coba »
tombol perpecahan
Kita bisa menambahkan tombol .split kelas untuk menetapkan tombol efek perpecahan akan menghasilkan bawah ikon arah tombol di <span> unsur segmentasi:
contoh
<Span Data-dropdown = "ID01 "> </ span>
</ Tombol>
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »