Hoe te maken: Zijaanduidingsmenu

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

第一步 - 添加 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;
}
/* Wissel de kleur van de navigatielink wanneer u de muis erover houdt */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Positie en stijl van de sluitingsknop (rechterbovenhoek) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Stel de stijl van de inhoud van de pagina in - als u de inhoud van de pagina naar de rechterkant wilt duwen wanneer u de zijkantennavigatie opent, gebruik dan deze instelling. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Pas de stijl van de zijkantennavigatie aan op kleine schermen met een hoogte kleiner dan 450px (vermindere de binnenmarge en de fontgrootte) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Derde stap - Voeg JavaScript toe:

In de volgende voorbeeld zal de zijkantennavigatie glijden en zijn breedte wordt ingesteld op 250px:

Voorbeeld van zijkantennavigatie die over de inhoud heen komt

/* Stel de breedte van de zijkantennavigatie in op 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Stel de breedte van de zijkantennavigatie in op 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Try it yourself

In de volgende voorbeeld zal de zijkantennavigatie glijden en de inhoud van de pagina naar de rechterkant duwen (de waarden die worden gebruikt om de breedte van de zijkantennavigatie in te stellen, worden ook gebruikt om de linkse buitenmarge van de "inhoud van de pagina" in te stellen):

Zijkantennavigatie stuurt inhoud aan

/* Stel de breedte van de zijkantennavigatie in op 250px, de linkse buitenmarge van de inhoud van de pagina in op 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Stel de breedte van de zijkantennavigatie in op 0, de linkse buitenmarge van de inhoud van de pagina in op 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Try it yourself

De volgende voorbeeld zal de zijkantennavigatie laten glijden en de inhoud van de pagina naar de rechterkant duwen. Deze keer voegen we echter een 40% ondoorzichte zwarte achtergrondkleur toe aan het element body om de zijkantennavigatie "te benadrukken".

Zijkantennavigatie met ondoorzichtigheid stuurt inhoud aan

/* Stel de breedte van de zijkantennavigatie in op 250px, de linkse buitenmarge van de inhoud van de pagina in op 250px, en voeg een zwarte achtergrondkleur toe aan 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";
}

Try it yourself

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

全宽的侧边导航：

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

Try it yourself

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

没有动画的 Sidenav

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

Try it yourself

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

右侧导航：

.sidenav {
  right: 0;
}

Try it yourself

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

始终显示的侧边导航：

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

Try it yourself

Related pages

Tutorial:CSS navigation bar