Bagaimana untuk membuat: Navigasi samping

Buat menu navigasi samping dengan efek animasi

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="#">Hubungi</a>
</div>
<!-- Gunakan elemen apapun untuk membuka menu navigasi samping -->
<span onclick="openNav()">buka</span>
<!-- Jika Anda ingin menu navigasi samping menggeser konten halaman ke kanan, letakkan semua konten halaman didalam div ini (jika Anda hanya ingin menu navigasi samping tetap di atas halaman, jangan gunakan pengaturan ini) -->
<div id="main">
  ...
</div>

Langkah kedua - Tambahkan CSS:

/* Menu navigasi samping */
.sidenav {
  tinggi: 100%; /* 100% tinggi */
  lebar: 0; /* 0 lebar - Gunakan JavaScript untuk mengubah pengaturan ini */
  position: tetap; /* Tetap di tempat */
  z-index: 1; /* Tetap di atas */
  atas: 0; /* Tetap di atas */
  left: 0;
  background-color: #111; /* Hitam */
  overflow-x: hidden; /* Menonaktifkan gerakan geser horizontal */
  mengatur-atas: 60px; /* Menempatkan konten di tempat 60px dari atas */
  transition: 0.5s; /* 0.5秒的过渡效果，用于侧边导航的滑动显示 */
}
/* 纽航菜单链接The navigation menu links */
.sidenav a {
  mengatur: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* 当您将鼠标悬停在导航链接上时，更改其颜色 */
.sidenav a:hover {
  color: #f1f1f1;
}
/* 关闭按钮的位置和样式（右上角） */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* 设置页面内容样式 - 如果您希望在打开侧边导航时将页面内容推向右侧，请使用此设置。 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 在高度小于 450px 的小屏幕上，更改侧边导航的样式（减少内边距和字体大小） */
@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";
}
/* 将侧边导航的宽度设置为 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Coba sendiri

下面的例子中，侧边导航将滑入，并将页面内容向右推（用于设置侧边导航宽度的值也用于设置“页面内容”的左外边距）：

侧边导航推动内容

/* 设置侧边导航的宽度为 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

下面的例子同样会让侧边导航滑入，并将页面内容推向右侧。不过这次，我们给 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";
}

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 berhubungan

Tutorial:Navigasi CSS