Bilah Samping W3.CSS



Bilah Navigasi Vertikal W3.CSS

Dengan navigasi samping, Anda memiliki beberapa opsi:

  • Selalu tampilkan panel navigasi di sebelah kiri konten halaman
  • Gunakan navigasi samping responsif "sepenuhnya otomatis" yang dapat dilipat
  • Buka panel navigasi di bagian kiri konten halaman
  • Buka panel navigasi di semua konten halaman
  • Geser konten halaman ke kanan saat membuka panel navigasi
  • Tampilkan panel navigasi di sisi kanan, bukan di sisi kiri

Selalu Tampilkan Bilah Sisi

Contoh

<div class="w3-sidebar w3-bar-block" style="width:25%">
  <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 style="margin-left:25%">
... page content ...
</div>


Buka Navigasi Sidebar Di Atas Bagian Konten

Contoh

function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

Buka Navigasi Sidebar Di Atas Konten

Contoh

function w3_open() {
  document.getElementById("mySidebar").style.width = "100%";
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

Navigasi Sisi Responsif yang Dapat Dilipat

Contoh

<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">Close &times;</button>
  <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 class="w3-main" style="margin-left:200px">

<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h1>My Page</h1>
  </div>
  </div>
</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>

Geser Konten Halaman ke Kanan

Contoh

function w3_open() {
  document.getElementById("main").style.marginLeft = "25%";
  document.getElementById("mySidebar").style.width = "25%";
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("openNav").style.display = 'none';
}

function w3_close() {
  document.getElementById("main").style.marginLeft = "0%";
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("openNav").style.display = "inline-block";
}

Navigasi Sisi Kanan

Contoh

<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">
  <h5 class="w3-bar-item">Menu</h5>
  <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 style="margin-right:25%">
... page content ...
</div>

Navigasi Sisi Kanan yang Dapat Dilipat

Contoh

<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0" id="mySidebar">
  <button class="w3-bar-item w3-button w3-hide-large"
  onclick="w3_close()">Close &times;</button>
  <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 class="w3-main" style="margin-right:200px">
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge w3-right w3-hide-large" onclick="w3_open()">&#9776;</button>
  <div class="w3-container">
    <h2>My Page</h2>
  </div>
</div>

</div>

<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>

Navigasi Sisi Kiri & Kanan

Contoh


Menata Navigasi Samping

Tambahkan kelas warna w3- ke bilah sisi w3 untuk mengubah warna latar belakang. Jika Anda menginginkan tautan aktif/saat ini, untuk memberi tahu pengguna di halaman mana dia berada, tambahkan kelas warna w3- ke salah satu tautan juga:

Contoh

<div class="w3-sidebar w3-red">

Navigasi Sisi Berbatasan

Gunakan kelas w3-border untuk menambahkan batas di sekitar navigasi samping:

Contoh

<div class="w3-sidebar w3-border">

Tambahkan kelas w3-border-bottom ke tautan untuk membuat pembagi tautan:

Contoh

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Gunakan kelas kartu-w3 untuk menampilkan navigasi samping sebagai kartu:

Contoh

<nav class="w3-sidebar w3-card">

Tautan yang Dapat Dilayangkan

Saat Anda mengarahkan mouse ke tautan di dalam blok batang, 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-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>

Anda dapat mematikan efek hover default dengan kelas w3-hover-none . Ini sering digunakan ketika Anda hanya ingin menyorot warna teks (dan bukan warna latar belakang) saat mengarahkan kursor:

Contoh

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link 1</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link 2</a>
  <a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link 3</a>
</div>

Ukuran Navigasi Samping

Peningkatan ukuran font (w3-besar dll):

Peningkatan padding (w3-padding dll):

Contoh

<div class="w3-sidebar w3-bar-block w3-large">
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</a>
  <a href="#" class="w3-bar-item w3-button">Link</a>
</div>

Navigasi Samping dengan Ikon

Contoh

<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
  <a href="#" class="w3-bar-item w3-button"><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>
</div>

Bilah Sisi dengan Dropdown

Contoh

<div class="w3-sidebar w3-bar-block">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
    <div class="w3-dropdown-content w3-bar-block">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

Tip: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the "dropdown" <div> and <a>.


Sidebar with Accordion

Example

<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
  <div id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>
  <div class="w3-dropdown-click">
    <button class="w3-button" onclick="myDropFunc()">Dropdown</button>
    <div id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
      <a href="#" class="w3-bar-item w3-button">Link</a>
      <a href="#" class="w3-bar-item w3-button">Link</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>


Animated Sidebar

Use any of the w3-animate-classes to fade, zoom or slide in side navigation:

Example

<div class="w3-sidebar w3-animate-left">

Sidebar Overlay

The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation.

Example

<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
  <button class="w3-bar-item w3-button" onclick="w3_close()">Close</button>
  <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>

<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>

<!-- Page content -->
<button class="w3-button w3-xxlarge" onclick="w3_open()">&#9776;</button>
<div class="w3-container">
  <h1>Sidebar Overlay</h1>
  <p>Click on the "hamburger" icon to slide in the side navigation.</p>
</div>

<!-- JS to open and close sidebar with overlay effect -->
<script>
function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
  document.getElementById("myOverlay").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
  document.getElementById("myOverlay").style.display = "none";
}
</script>

Sidebar Content

Add whatever you like inside the side navigation:

Example

<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
  <div class="w3-container w3-dark-grey">
    <h4>Menu</h4>
  </div>

  <img src="img_snowtops.jpg">

  <a href="#" class="w3-bar-item w3-button w3-red">Home</a>
  <a href="#" class="w3-bar-item w3-button">Projects
    <span class="w3-tag w3-red w3-round w3-right">8</span>
  </a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>

  <div class="w3-panel w3-blue-grey w3-display-container">
    <span class="w3-button w3-display-topright">X</span>
    <p>Lorem ipsum box...</p>
  </div>
 </div>