Bilah Navigasi W3.CSS
Vertikal:
Horisontal:
Kelas Bilah Navigasi W3.CSS
W3.CSS menyediakan kelas berikut untuk bilah navigasi:
| Kelas | Mendefinisikan |
|---|---|
| w3-bar | Wadah horizontal untuk elemen HTML |
| w3-bar-blok | Wadah vertikal untuk elemen HTML |
| w3-bar-item | Elemen batang kontainer |
| bilah sisi w3 | Sidebar vertikal untuk elemen HTML |
| w3-seluler | Jadikan elemen batang apa pun responsif seluler pertama |
| w3-dropdown-arahkan | Elemen tarik-turun yang dapat dilayangkan |
| w3-tarik-turun-klik | Elemen tarik-turun yang dapat diklik (alih-alih mengarahkan kursor) |
Navigasi Dasar
Kelas w3-bar adalah wadah untuk menampilkan elemen HTML secara horizontal.
Kelas w3-bar-item mendefinisikan elemen container.
Ini adalah alat yang sempurna untuk membuat bilah navigasi:
Contoh
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Navigasi Responsif
Kelas w3-mobile membuat elemen batang apa pun menjadi responsif (horizontal pada layar besar dan vertikal pada layar kecil).
Layar sedang dan besar:
Layar kecil:
Contoh
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Bilah Navigasi Berwarna
Gunakan kelas w3-color untuk menambahkan warna ke bilah navigasi:
Contoh
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Bilah Navigasi Berbatasan
Gunakan kelas w3-border atau w3-card untuk menambahkan batas di sekitar bilah navigasi, atau untuk menampilkannya sebagai kartu:
Contoh
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Tautan Aktif/Saat Ini
Tambahkan kelas w3-color ke tautan untuk menyorotnya:
Contoh
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Tautan yang Dapat Dilayangkan
Saat Anda mengarahkan mouse ke tombol, warna latar belakang akan berubah menjadi abu-abu.
Jika Anda menginginkan warna latar belakang yang berbeda saat mengarahkan kursor, gunakan salah satu kelas warna w3-hover- :
Contoh
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Jika Anda ingin mengubah warna teks, nonaktifkan efek hover default dengan kelas w3-hover-none , dan tambahkan kelas teks w3-hover .
Contoh
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
Luangkan waktu untuk bermain-main dengan efek hover yang berbeda:
Contoh
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
Tautan Rata Kanan
Gunakan kelas w3-right pada item daftar untuk menyelaraskan kanan tautan tertentu:
Contoh
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Ukuran Bilah Navigasi
Gunakan kelas ukuran w3 untuk mengubah ukuran font tautan di dalam bilah navigasi:
Contoh
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Gunakan kelas bantalan w3 untuk mengubah bantalan setiap tautan di dalam bilah navigasi:
Contoh
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Catatan: Anda juga dapat menambahkan bantalan ke bilah navigasi, alih-alih setiap tombol. Namun, jika Anda melakukan ini, perhatikan bahwa tautan tidak mendapatkan bantalan penuh saat mengarahkan kursor:
Contoh
<div class="w3-bar w3-green w3-padding-16"></div>
Sesuaikan lebar tautan dengan properti lebar CSS
( Catatan : Gunakan w3-mobile untuk mengubah tautan menjadi lebar 100% di layar kecil):
Contoh
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
Bilah Navigasi dengan Ikon
Contoh
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Kelas "fa fa" dalam contoh di atas menampilkan ikon "Font Awesome".
Pelajari lebih lanjut tentang cara menampilkan ikon di bab Ikon W3.CSS .
Teks Bilah Navigasi
Jika Anda menginginkan teks alih-alih tombol di dalam bilah navigasi, gunakan kelas w3-bar-item untuk mendapatkan bantalan yang sama dengan tombol.
Contoh
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Navbar dengan Input dan Tombol
Contoh
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Bilah Navigasi dengan Dropdown
Gerakkan mouse ke atas tautan "Dropdown":
Contoh
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Dropdown yang dapat diklik
Gunakan w3-dropdown-click jika Anda lebih suka mengklik tautan dropdown daripada mengarahkan:
Contoh
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Menu Tarik-turun Horisontal
Hapus kelas w3-bar-block dari wadah dropdown jika Anda ingin tautan dropdown ditampilkan secara horizontal, bukan vertikal:
Contoh
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Navbar Responsif dengan Dropdown Responsif
Gunakan kelas w3-mobile di semua tautan termasuk wadah dropdown untuk membuat navbar responsif dengan tautan dropdown responsif.
Ubah ukuran jendela browser untuk melihat efeknya:
Contoh
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.