Tutorial menu drop-down Yayasan Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
menu ukuran drop-down,Margin menu drop-down,contoh lain,Arah dari menu pull-down,menu pull-down memicu kondisi,tombol perpecahan,
menu drop-down Yayasan
Yayasan menu drop-down memungkinkan pengguna untuk memilih nilai dari daftar drop-down dari yang telah ditetapkan ini:
contoh
<! - Memicu Dropdown yang ->
<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
<! - Kecil Dropdown: max- lebar 200px ->
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown kecil"> id
<! - Dropdown Kecil: max- lebar 300px ->
<Ul id = "id02" Data -dropdown-konten class = "f-dropdown kecil"> id
<! - 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"> id
<- Mega 100% Dropdown :! lebar ->
<Ul id = "id04" Data -dropdown-konten class = "f-dropdown mega"> id
Coba »
Margin menu drop-down
Anda dapat menggunakan .content
kelas untuk menambahkan padding untuk menu drop-down:
contoh
<! - Default Dropdown ->
<Ul id = "ID01" Data -dropdown-konten class = "f-dropdown"> id
<! - Dropdown dengan bantalan ->
<Ul id = "id02" Data -dropdown-konten class = "content f-dropdown"> id
Coba »
contoh lain
<Div> menu tarik-turun untuk menambahkan elemen multimedia:
contoh
<A Href = "#" Data -dropdown = "id01" class = "button dropdown"> Dropdown Tombol </ a>
<Div id = data "ID01" -dropdown-konten class = "f-dropdown konten media">
<H4> Paris Judul </ h4 >
<P> Beberapa teks id beberapa teks id </ 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 = "id01" data-options = "align: kelas right" = "button dropdown"> kanan </ a>
<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
<A Href = "#" Data -dropdown = "id01" data-options = "is_hover: true" class = "button dropdown"> Arahkan me </ a>
<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
<Tombol class = "tombol split" > Tombol Berpisah
<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 »