Bagaimana Membuat: Tombol Navigasi Samping

Bagaimana Membuat Navigasi Samping yang Dapat Menempel

langkah pertama - tambahkan HTML:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">Tentang</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Proyek</a>
  <a href="#" id="contact">Kontak</a>
</div>

langkah kedua - tambahkan CSS:

/* menata gaya tautan navigasi samping */
#mySidenav a {
  position: absolute; /* menempatkan berdasarkan jendela browser */
  left: -80px; /* menempatkan di luar layar */
  transition: 0.3s; /* menambahkan efek transisi saat mouse hover */
  padding: 15px; /* 15px margin internal */
  width: 100px; /* menata lebar spesifik */
  text-decoration: none; /* menghapus garis bawah */
  font-size: 20px; /* menambahkan ukuran font */
  color: white; /* menata warna teks menjadi putih */
  border-radius: 0 5px 5px 0; /* kanan atas dan kanan bawah mempunyai lekuk */
}
#mySidenav a:hover {
  left: 0; /* saat menggerakkan mouse, elemen menampilkan seperti yang seharusnya */
}
/* tautan about: jarak atas 20px, latar belakang hijau */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* biru */
}
#projects {
  top: 140px;
  background-color: #f44336; /* merah */
}
#contact {
  top: 200px;
  background-color: #555 /* gelap abu */
}

Coba sendiri

Halaman yang berhubungan

Panduan:Navigasi CSS