W3.CSS menyediakan segala macam untuk navigasi bar:
Vertikal:
Horisontal (vertikal pada layar kecil):
Navigasi dasar
Kelas w3-navbar menciptakan sebuah bar navigasi horisontal:
Contoh
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Cobalah sendiri " Bar berwarna Navigasi
Contoh
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Cobalah sendiri " Bar Polos Navigasi
Contoh
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Cobalah sendiri " Active / Link sekarang
Contoh
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Cobalah sendiri " Link Hoverable
Ketika Anda mengarahkan mouse ke link di dalam bar navigasi, warna latar belakang akan berubah menjadi abu-abu.
Jika Anda ingin warna latar belakang yang berbeda di hover, menggunakan salah satu kelas warna w3-hover-, dan jika Anda ingin warna teks yang berbeda di hover, menggunakan salah satu kelas w3-melayang-text-color:
Contoh
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Cobalah sendiri " Link kanan-Blok
Contoh
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Cobalah sendiri " Navigation Bar Ukuran
Mengubah ukuran font:
Contoh
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Cobalah sendiri " Mengubah padding:
Contoh
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Cobalah sendiri " Sesuaikan lebar daftar item dengan properti lebar CSS (Catatan: pada layar yang lebih kecil, mereka akan mengubah 100%):
Contoh
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Cobalah sendiri " Navigasi Bar dengan Ikon
Contoh
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Cobalah sendiri " Navigasi Bar dengan Dropdown
Gerakkan mouse di atas link "Dropdown":
Contoh
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Cobalah sendiri " Catatan: Bila menu dropdown "terbuka", link dropdown mendapat warna latar belakang abu-abu untuk menunjukkan bahwa itu adalah aktif. Untuk menimpa ini, menambahkan kelas warna w3-hover- untuk kedua "dropdown" <li> dan <a>:
Tip: Jika Anda ingin simbol dropdown di samping teks dropdown, menambahkan ikon yang sesuai (seperti ):
Contoh
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Cobalah sendiri " Gunakan w3-dropdown-klik jika Anda lebih memilih untuk mengklik pada link dropdown bukan hover:
Contoh
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Cobalah sendiri " Tetap Navigation Bar
Untuk memaksa bar navigasi untuk tinggal di atas atau di bagian bawah halaman, bahkan ketika pengguna gulungan halaman, membungkus elemen <div> sekitar <ul> dan tambahkan w3-top atau kelas w3-bottom:
Runtuh Navigation Bar
Ketika bar navigasi memakan terlalu banyak ruang pada layar kecil, dan Anda tidak ingin menampilkannya secara vertikal secara default, Anda bisa menggunakan kelas utilitas untuk menyembunyikan dan menampilkan link yang ada di bar navigasi.
Pada contoh di bawah ini, bar navigasi diganti dengan tombol (☰) di pojok kanan atas ketika ditampilkan pada tablet dan perangkat mobile. Ketika tombol diklik, bar navigasi akan ditampilkan secara vertikal:
Contoh
Cobalah sendiri "Topnav
Contoh lain dari sebuah bar navigasi, adalah kelas w3-topnav. Hal ini mirip dengan w3-navbar, kecuali bahwa itu akan menambah garis bawah ketika Anda membawa lebih link, bukan warna latar belakang:
Contoh
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Cobalah sendiri " Misalnya dengan Font Keren Ikon
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Cobalah sendiri " Side Navigasi
Kelas w3-sidenav menciptakan sebuah bar navigasi vertikal:
Pergi ke bab berikutnya untuk mempelajari lebih lanjut tentang navigasi di sebelah.