Cara Membuat Hoverable Side Navigation

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari November 28, 2020

Pelajari cara membuat tombol Hoverable Side Navigation dengan CSS.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#mySidenav a {
  position: absolute;
  left: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav a:hover {
  left: 0;
}

#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;
}

#projects {
  top: 140px;
  background-color: #f44336;
}

#contact {
  top: 200px;
  background-color: #555
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

<div style="margin-left:80px;">
  <h2>Tombol Hoverable Sidenav</h2>
  <p>Arahkan kursor ke tombol di navigasi sebelah kiri untuk membukanya.</p>
</div>
   
</body>
</html>

Section Artikel

1 Cara Membuat Sidenav Hoverable
- - 1.0.1 Langkah 1) Tambahkan HTML
  - 1.0.2 Langkah 2) Tambahkan CSS

Cara Membuat Sidenav Hoverable

Langkah 1) Tambahkan HTML

Contoh:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

Langkah 2) Tambahkan CSS

Contoh:

/* Style link didalam sidenav */
#mySidenav a {
  position: absolute; /* Posisikan mereka relatif terhadap jendela browser */
  left: -80px; /* Posisikan mereka di luar layar */
  transition: 0.3s; /* Tambahkan transisi pada hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* atur width spesifik */
  text-decoration: none; /* Hapus underline */
  font-size: 20px; /* Menambahkan font size */
  color: white; /* Warna text putih */
  border-radius: 0 5px 5px 0; /* Sudut membulat di sisi kanan atas dan kanan bawah */
}

#mySidenav a:hover {
  left: 0; /* Saat mengarahkan mouse, buat elemen muncul sebagaimana mestinya */
}

/* Link about: 20px dari atas dengan background hijau */
#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3; /* Blue */
}

#projects {
  top: 140px;
  background-color: #f44336; /* Red */
}

#contact {
  top: 200px;
  background-color: #555 /* Light Black */
}

How To