Cara membuat: Menu navigasi samping

Buat navigasi samping ber efek animasi

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, tempatkan semua konten halaman di dalam div ini (jika Anda hanya ingin navigasi samping tetap di atas halaman, jangan gunakan pengaturan ini) -->
<div id="main">
  ...
</div>

Ketiga - Tambahkan CSS:

/* 侧边导航菜单 */
.sidenav {
  height: 100%; /* 100% 全高 */
  width: 0; /* 0 宽 - 使用 JavaScript 更改此设置 */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* 黑色 */
  overflow-x: hidden; /* 禁用水平滚动 */
  padding-top: 60px; /* 将内容放置在距顶部 60px 的位置 */
  transition: 0.5s; /* 0.5秒的过渡效果，用于侧边导航的滑动显示 */
}
/* 导航菜单链接The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Ubah warna saat kursor di atas tautan navigasi */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Lokasi dan gaya tombol tutup (kanan atas) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Atur gaya konten halaman - Jika Anda ingin memindahkan konten halaman ke arah kanan saat navigasi samping dibuka, gunakan pengaturan ini. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Ubah gaya navigasi samping di layar kecil dengan tinggi kurang dari 450px (rendahkan marjin internal dan ukuran font) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Tahap ketiga - Tambahkan JavaScript:

Dalam contoh di bawah ini, navigasi samping akan muncul dan lebarnya diatur menjadi 250px:

Contoh lapisan navigasi samping

/* Atur lebar navigasi samping menjadi 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Atur lebar navigasi samping menjadi 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Coba sendiri

Dalam contoh di bawah ini, navigasi samping akan muncul dan memindahkan konten halaman ke arah kanan (nilai lebar navigasi samping juga digunakan untuk mengatur marjin luar kiri konten halaman):

Navigasi samping mendorong konten

/* Atur lebar navigasi samping menjadi 250px, marjin luar kiri konten halaman menjadi 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Atur lebar navigasi samping menjadi 0, marjin luar kiri konten halaman menjadi 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Coba sendiri

Contoh di bawah ini akan memungkinkan navigasi samping muncul dan memindahkan konten halaman ke arah kanan. Namun, kali ini, kami menambahkan warna latar belakang hitam dengan kepadatan 40% ke elemen body untuk "menekankan" navigasi samping.

Navigasi samping dengan kepadatan yang berbeda mendorong konten

/* Atur lebar navigasi samping menjadi 250px, marjin luar kiri konten halaman menjadi 250px, dan tambahkan warna latar belakang hitam ke 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

在下面的例子中，侧边导航将从左侧滑入，并覆盖整个页面（宽度为 100%）：

全宽的侧边导航：

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Coba sendiri

下面的例子在打开和关闭侧边导航菜单时不带动画效果。

没有动画的 Sidenav

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Coba sendiri

下面的例子展示了如何创建右侧导航菜单：

右侧导航：

.sidenav {
  right: 0;
}

Coba sendiri

下面的例子展示了如何创建一个始终显示的侧边导航菜单（固定位置）：

始终显示的侧边导航：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

Coba sendiri

Halaman yang relevan

Panduan:Navigasi CSS