Tutorial Yayasan navigasi atas bar Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari
Drop-down menu navigasi bar,Pull-down label menu,Tombol dan ikon pada bar navigasi,navigasi tetap,Navigasi bar posisi absolut,
Yayasan navigasi atas bar
Atas bar navigasi di kepala halaman:
contoh
<Nav class = "top-bar " Data-topbar>
<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
:
contoh
<Bagian class = "top-bar -bagian">
<Ul class = "right"> id.
Coba » Anda juga dapat mengatur alignment kiri sejajar dengan hak:
contoh
<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>
</ 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
<Class Ul = "left">
<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
<Bagian class = "top-bar -bagian">
<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
<Class Ul = "dropdown">
<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>
Coba »
Pull-down label menu
Dalam <li>
dalam add <label>
elemen untuk mengatur label (judul) menu pull-down:
contoh
<Class Ul = "dropdown">
<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>
Coba » menu drop-down tertanam
menu Drop-down dapat tertanam dalam menu drop-down:
contoh
<Bagian class = "top-bar -bagian">
<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:
contoh
<Nav class = "top-bar " Data-topbar Data-opsi = "is_hover: false">
Coba »
Tombol dan ikon pada bar navigasi
Anda dapat menempatkan ikon pada bar navigasi dan tombol:
contoh
<Li> <a href = "#" class = "button"> Button Link </ a> </ li>
Coba » Anda dapat menempatkan ikon di bar navigasi, Anda dapat melihat lebih banyak gambar Style Yayasan Icon Tutorial :
contoh
<Head>
<! - Yayasan ikon gaya ->
<Link rel = "stylesheet" href = "http://static.w3write.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:
contoh
<Div class = "tetap">
<Nav class = "top-bar " Data-topbar>
id.
</ Nav>
</ Div>
Coba »
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:
contoh
<Class Div = "lengket">
<Nav class = "top-bar " Data-topbar>
id.
</ Nav>
</ Div>
Coba » 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
<Class Div = "lengket">
<! - Hanya di layar lebar ->
<Nav class = "top-bar " Data-topbar Data-opsi = "sticky_on: besar">
id
</ Nav>
</ Div>
Atau oleh sebuah array dari sejumlah ukuran layar:
contoh
<Class Div = "lengket">
<! - Layar kecil dan layar lebar (tidak tengah layar) ->
<Nav class = "top-bar " Data-topbar Data-opsi = "sticky_on: [kecil, besar]">
id
</ Nav>
</ Div>