Hvordan opretter man: Side导航

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

第一步 - 添加 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;
}
/* Ændr farve på navigationslink, når musemarkøren føres over det */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Position og stil for lukkeknappen (øverst til højre) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Sæt stil på indholdet af siden - brug denne indstilling, hvis du vil skubbe indholdet af siden til højre, når side navigation åbnes. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Ændr side navigation's stil på små skærme med højde mindre end 450px (reducerer indre margen og skriftstørrelse) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Tredje trin - Tilføj JavaScript:

I det følgende eksempel vil side navigation glide ind, og dens bredde sættes til 250px:

Side navigation dækker eksempel

/* Sæt bredde på side navigation til 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Sæt bredde på side navigation til 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Prøv det selv

I det følgende eksempel vil side navigation glide ind og skubbe indholdet af siden til højre (værdierne for at sætte bredde på side navigation bruges også til at sætte venstre ekstern margin på "indholdet af siden"):

Side navigation推动内容

/* Sæt bredde på side navigation til 250px, venstre ekstern margin på indholdet af siden til 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Sæt bredde på side navigation til 0, venstre ekstern margin på indholdet af siden til 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Prøv det selv

Følgende eksempel vil også få side navigation til at glide ind og skubbe indholdet af siden til højre. Men denne gang tilføjer vi en 40% uigennemskinnelig sort baggrundsfarve til body-elementet for at "udstikke" side navigation.

Side navigation med uigennemskinnelighed推动内容

/* Sæt bredde på side navigation til 250px, venstre ekstern margin på indholdet af siden til 250px, og tilføj sort baggrundsfarve til 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";
}

Prøv det selv

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

全宽的侧边导航：

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

Prøv det selv

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

没有动画的 Sidenav

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

Prøv det selv

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

右侧导航：

.sidenav {
  right: 0;
}

Prøv det selv

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

始终显示的侧边导航：

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

Prøv det selv

Relaterede sider

Tutorial:CSS navigationsfelt