Paano gumawa: Sidebar Navigation

创建带有动画效果的侧边导航

第一步 - 添加 HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- 使用任意元素打开侧边导航 -->
<span onclick="openNav()">open</span>
<!-- 如果您希望侧边导航将页面内容推向右方，请将所有页面内容放在这个 div 内部（如果您只希望侧边导航停留在页面顶部，则不使用此设置） -->
<div id="main">
  ...
</div>

第二步 - 添加 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;
}
/* Pag may mouse hover sa link ng navigation, ayusin ang kulay nito */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Lokasyon at estilo ng pindutan na isinara (kanang itaas na sulok) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Itakda ang estilo ng nilalaman ng pahina - Kung gusto mong ilipat ang nilalaman ng pahina sa kanan kapag pinapalipat ang sadyang navigation, gamitin ito na setting. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Sa maliit na screen na may taas na mas mababa sa 450px, ayusin ang estilo ng sadyang navigation (bawasan ang padding at laki ng font) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Tatlong hakbang - Magdagdag ng JavaScript:

Sa eksemplo na ito, ang sadyang navigation ay maglipat at ang kanyang lapad ay itakda sa 250px:

Sadyang navigation na inilalapat

/* Tinitignan ang lapad ng sadyang navigation sa 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Tinitignan ang lapad ng sadyang navigation sa 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

Sa eksemplo na ito, ang sadyang navigation ay maglipat at ililipat ang nilalaman ng pahina sa kanan (ang halaga ng lapad ng sadyang navigation ay ginamit din upang itakda ang kaliwang labas na margen ng nilalaman ng pahina):

Sadyang navigation na inililipat ang nilalaman

/* Tinitignan ang lapad ng sadyang navigation sa 250px, ang kaliwang labas na margen ng nilalaman ng pahina sa 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Tinitignan ang lapad ng sadyang navigation sa 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

Ang eksemplo na ito ay gagawin din ang sadyang navigation na maglipat sa kanan at ililipat ang nilalaman ng pahina sa kanan. Subalit, namin ay nagdagdag ng 40% na kulay ng itim na opak na background sa elemento ng body, upang "hatid sa atensyon" ang sadyang navigation.

Sadyang navigation na may kawalang kulay na inilalapat sa nilalaman

/* Tinitignan ang lapad ng sadyang navigation sa 250px, ang kaliwang labas na margen ng nilalaman ng pahina sa 250px, at magdagdag ng itim na kulay ng background sa 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";
}

亲自试一试

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

全宽的侧边导航：

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

亲自试一试

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

没有动画的 Sidenav

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

亲自试一试

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

右侧导航：

.sidenav {
  right: 0;
}

亲自试一试

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

始终显示的侧边导航：

/* 侧边导航 */
.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; /* 与侧边导航的宽度相同 */
}

亲自试一试

相关页面

教程：CSS 导航栏