Bagaimana untuk membuat: Menu luar luka kertas

Buat Menu Luar Luka Kertas

Bab 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="#">Hubungi</a>
</div>
/* Gunakan sebarang elemen untuk membuka pautan navigasi sisih */
<span onclick="openNav()">buka</span>
/* Jika anda mahu pindahkan kandungan halaman ke kanan dengan pautan navigasi sisih, tambahkan semua kandungan halaman ke div ini (jika hanya mahu tetap di atas halaman, jangan gunakan pengaturan ini) */
<div id="main">
  ...
</div>

langkah kedua - tambah CSS:

/* menu navigasi sisih */
.sidenav {
  tinggi: 100%; /* tinggi penuh */
  lebar: 0; /* lebar 0 - diubah melalui JavaScript */
  kedudukan: tetap; /* kekal di tempat */
  z-index: 1; /* tinggalkan di atas */
  top: 0;
  kiri: 0;
  warna latar: #111; /* hitam */
  scroll-x: tak ada; /* lumpuhkan gesa melintasi arah mendatar */
  padding-top: 60px; /* kandungan jauh daripada atas 60 piksel */
  transisi: 0.5s; /* 0.5 saat transisi, supaya panel navigasi sisih masuk */
}
/* pautan menu navigasi */
.sidenav a {
  padding: 8px 8px 8px 32px;
  tanda-tulisan: tak ada;
  ukuran tulisan: 25px;
  warna: #818181;
  display: block;
  transisi: 0.3s;
}
/* mengubah warna bila kursor di atas pautan navigasi */
.sidenav a:hover {
  warna: #f1f1f1;
}
/* kedudukan dan gaya butang tutup (kanan atas) */
.sidenav .closebtn {
  kedudukan: absolu;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* 设定页面内容的样式 - 如果您希望在打开旁支导航时，将页面内容推向右侧，请使用此选项 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 在屏幕高度小于 450 像素的小屏幕上，更改旁支导航栏的样式（减少内边距和字体大小） */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

第三步 - 添加 JavaScript：

画布外菜单

/* 设定旁支导航的宽度为 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";
}

亲自试一试

下面的例子同样将旁支导航栏滑入，并将页面内容推向右侧。不过，这次我们在 body 元素上添加了一个半透明（40% 不透明度）的黑色背景色，以“突出显示”旁支导航栏：

画布外菜单

/* 设定旁支导航的宽度为 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";
}

亲自试一试

相关页面

教程：CSS 导航栏