Cara membuat: Menu luar kanvas

Buat menu luar kanvas

Langkah pertama - Tambahkan HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Tentang</a>
  <a href="#">Layanan</a>
  <a href="#">Klien</a>
  <a href="#">Kontak</a>
</div>
<!-- Gunakan elemen apapun untuk membuka navigasi samping -->
<span onclick="openNav()">open</span>
<!-- Jika Anda ingin navigasi samping menarik konten halaman ke kanan, tambahkan semua konten halaman ke dalam div ini (jika hanya ingin navigasi samping tetap di atas halaman, maka tidak perlu pengaturan ini) -->
<div id="main">
  ...
</div>

Kunci kedua - Tambahkan CSS:

/* Menu navigasi samping */
.sidenav {
  height: 100%; /* Lebar 100% */
  width: 0; /* Lebar 0 - diubah melalui JavaScript */
  position: fixed; /* Tetap di tempatnya */
  z-index: 1; /* Tetap di atas */
  top: 0;
  left: 0;
  background-color: #111; /* Hitam */
  overflow-x: hidden; /* Nonaktifkan gerakan skrol horizontal */
  padding-top: 60px; /* Jarak konten dari atas 60 pixel */
  transition: 0.5s; /* Efek transisi selama 0.5 detik, agar menu navigasi bergerak masuk */
}
/* Tautan menu navigasi */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Mengubah warna saat kursor disusun di atas tautan navigasi */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Tombol penutup posisi dan gaya (kanan atas) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Atur gaya konten halaman - jika Anda ingin membuang konten halaman ke kanan saat navigasi samping dibuka, gunakan opsi ini */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Pada layar dengan tinggi kurang dari 450 piksel layar kecil, ubah gaya navigasi samping (kurangi margin internal dan ukuran font) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Tahap ketiga - Tambahkan JavaScript:

Menu luar kanvas

/* 设置侧边导航的宽度为 250px，页面内容的左外边距为250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* 设置侧边导航的宽度为 0，页面内容的左外边距为0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Coba sendiri

Contoh di bawah ini juga akan menggeser navigasi samping ke dalam dan membuang konten halaman ke kanan. Namun, kali ini kami menambahkan latar belakang hitam yang semi- transparan (40% transparensi) di elemen body untuk "menonjolkan" navigasi samping:

Menu luar kanvas ber transparansi

/* 设置侧边导航的宽度为 250px，页面内容的左外边距为 250px，并给 body 添加黑色背景色 */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 设置侧边导航宽度为 0，页面内容左边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Coba sendiri

Halaman yang berhubungan

Tutorial:Navigasi CSS