Yayasan navigasi atas bar
Atas bar navigasi di kepala halaman:
contoh
<Class Ul = "title-area ">
<Class Li = "nama">
<! - Jika Anda tidak perlu judul atau ikon untuk menghapusnya ->
<H1> <a href = "#"> WebSiteName </ a> </ h1>
</ Li>
<- Tombol Fold di layar kecil :! Hapus .menu-ikon jenis, Anda dapat menghapus ikon.
Jika Anda perlu untuk hanya menampilkan gambar, Anda dapat menghapus "Menu" Text ->
<Li class = "beralih-topbar menu-icon"> <a href = "#"> <span> Menu </ span> </ a> </ li>
</ Ul>
<Bagian class = "top-bar -bagian">
<Class Ul = "left">
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Li> <a href = "#"> Halaman 1 </ a> </ li>
<Li> <a href = "#"> Halaman 2 </ a> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
</ Ul>
</ Bagian>
</ Nav>
<! - Inisialisasi Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
Contoh analisis
Gunakan <nav class="top-bar" data-topbar> " Data-topbar> Buat toolbar standar. .title-area kelas mendefinisikan area situs logo (harus dicegah li.name dalam). Setelah layar yang lebih kecil Anda bisa melihat tombol "menu". Yayasan menu sesuai dengan ukuran layar secara otomatis diperpanjang minuman lipat:
Pada layar kecil, karena ukuran dari banyak pilihan akan disembunyikan. li.toggle-topbar menu.icon kelas menciptakan tombol menu, klik untuk menampilkan opsi tersembunyi.
? Tip: Atur jendela browser Anda untuk melihat efek.
.top-bar-section mendefinisikan navigasi link bagian. .left kelas menentukan link selaras kiri. .active kelas digunakan untuk menampilkan item yang dipilih, latar belakang biru.
Tip: Jika Anda ingin benar-menyelaraskan link navigasi dapat .left memodifikasi .right :
Anda juga dapat mengatur alignment kiri sejajar dengan hak:
contoh
<Class Ul = "left">
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Li> <a href = "#"> Halaman 1 </ a> </ li>
<Li> <a href = "#"> Halaman 2 </ a> </ li>
</ Ul>
<Class Ul = "right">
<Li> <a href = "#"> Mendaftar </ a> </ li>
<Li> <a href = "#"> Masuk </ a> </ li>
</ Ul>
</ Bagian>
Coba »
Navigasi dengan .divider untuk menambahkan garis kelas pemisah (garis vertikal di layar lebar, layar kecil adalah garis horizontal):
contoh
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Halaman 1 </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Halaman 2 </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Page 3 </ a> </ li>
<Li class = "pembagi"> </ li>
</ Ul>
Coba »
Drop-down menu navigasi bar
Anda dapat mengatur bar navigasi di bagian atas menu drop-down.
Dengan <li> elemen ditambahkan .has-dropdown kelas untuk mengatur menu drop-down:
contoh
<Class Ul = "left">
<Li class = "aktif"> <a href = "#"> Depan </ a> </ li>
<Class Li = "memiliki-dropdown ">
<A Href = "#"> Dropdown </ a>
<Class Ul = "dropdown">
<Li> <a href = "#"> Link Pertama di dropdown </ a> </ li>
<Li> <a href = "#"> Link Kedua di dropdown </ a> </ li>
<Li class = "aktif"> <a href = "#"> Link Aktif di dropdown </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Bagian>
Coba »
garis pemisah
Gunakan .divider kelas untuk mengatur garis pemisah menu drop-down:
contoh
<Li> <a href = "#"> Apel </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> Jeruk </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Bayam </ a> </ li>
</ Ul>
Pull-down label menu
Dalam <li> dalam add <label> elemen untuk mengatur label (judul) menu pull-down:
contoh
<Li> <label> Buah < / label> </ li>
<Li> <a href = "#"> Apel </ a> </ li>
<Li> <a href = "#"> Banana </ a> </ li>
<Li> <a href = "#"> Jeruk </ a> </ li>
<Li class = "pembagi"> </ li>
<Li> <label> Sayuran < / label> </ li>
<Li> <a href = "#"> Kale </ a> </ li>
<Li> <a href = "#"> Bayam </ a> </ li>
</ Ul>
menu drop-down tertanam
menu Drop-down dapat tertanam dalam menu drop-down:
contoh
<Class Ul = "left">
<Class Li = "memiliki-dropdown ">
<A Href = "#"> Dropdown </ a>
<Class Ul = "dropdown">
<Li> <label> Level 1 </ label> </ li>
<Li> <a href = "#"> link </ a> </ li>
<Li> <a href = "#"> link </ a> </ li>
<Class Li = "memiliki-dropdown ">
<A Href = "#"> dropdown New </ a>
<Class Ul = "dropdown">
<Li> <label> Level 2 </ label> </ li>
<Li> <a href = "#"> 2 tingkat dropdown </ a> </ li>
<Li> <a href = "#"> 2 tingkat dropdown </ a> </ li>
<Class Li = "memiliki-dropdown ">
<A Href = "#"> dropdown New </ a>
<Class Ul = "dropdown">
<Li> <label> Level 3 </ label> </ li>
<Li> <a href = "#"> 3 tingkat dropdown </ a> </ li>
<Li> <a href = "#"> 3 tingkat dropdown </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Bagian>
Coba »
diklik
Secara default, menu drop-down di bar navigasi untuk menggerakkan mouse di atas layar, kita dapat menggunakan data-options="is_hover: false" " atribut untuk mengatur bar navigasi ditampilkan di klik mouse:
Tombol dan ikon pada bar navigasi
Anda dapat menempatkan ikon pada bar navigasi dan tombol:
Anda dapat menempatkan ikon di bar navigasi, Anda dapat melihat lebih banyak gambar Style Yayasan Icon Tutorial :
contoh
<! - Yayasan ikon gaya ->
<Link rel = "stylesheet" href = "http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
</ Kepala>
<Class Ul = "left">
<Li class = "aktif"> <a href = "#"> <i class = "fi-rumah"> </ i> Home </ a> </ li>
<Li> <a href = "#"> <i class =" fi-torso "> </ i> Mendaftar </ a> </ li>
<Li> <a href = "#"> <i class =" fi-pembesar-kaca "> </ i> Cari </ a> </ li>
</ Ul>
Coba »
navigasi tetap
bar navigasi bisa diperbaiki di bagian atas halaman.
Gulir navigasi halaman bar di bagian atas tidak bergerak.
Untuk memperbaiki bar navigasi hanya untuk navigasi bar pada <div class="fixed"> dalam untuk:
Navigasi bar posisi absolut
Kita dapat menempatkan bar navigasi <div class="sticky"> di bar navigasi untuk mengatur posisi mutlak, ketika scroll bar untuk roll ke daerah, bar navigasi sebagai tetap sebagai bar navigasi di bagian atas tidak bergerak:
Bila Anda menggunakan .sticky kelas, bar navigasi atas tetap dan akan di semua ukuran layar. Jika Anda perlu menentukan pengaturan pada layar hanya di <nav> Sebelumnya data-options="sticky_on: small|medium|large" | menengah | besar" properti:
contoh
<! - Hanya di layar lebar ->
<Nav class = "top-bar " Data-topbar Data-opsi = "sticky_on: besar">
..
</ Nav>
</ Div>
Atau oleh sebuah array dari sejumlah ukuran layar:
contoh
<! - Layar kecil dan layar lebar (tidak tengah layar) ->
<Nav class = "top-bar " Data-topbar Data-opsi = "sticky_on: [kecil, besar]">
..
</ Nav>
</ Div>