tutorial pengembangan web terbaru
 

W3.CSS Navigasi


W3.CSS menyediakan segala macam untuk navigasi bar:


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:

tetap Top

<div class="w3-top">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
Cobalah sendiri "

Bawah tetap

<div class="w3-bottom">
  <ul class="w3-navbar">
    ...
  </ul>
</div>
Cobalah sendiri "

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:


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.