Wie erstelle ich: Seitenleiste

Erstellen Sie eine seitliche Navigation mit Animationseffekten

Schritt 1 - Fügen Sie HTML hinzu:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Über uns</a>
  <a href="#">Dienstleistungen</a>
  <a href="#">Kunden</a>
  <a href="#">Kontakt</a>
</div>
<!-- Verwenden Sie jedes Element, um die seitliche Navigation zu öffnen -->
<span onclick="openNav()">open</span>
<!-- Wenn Sie möchten, dass die seitliche Navigation den Inhalt der Seite nach rechts schiebt, legen Sie alle Inhaltsseiten in diesen div (wenn Sie möchten, dass die seitliche Navigation nur oben bleibt, verwenden Sie diese Einstellung nicht) -->
<div id="main">
  ...
</div>

Schritt 2 - Fügen Sie CSS hinzu:

/* Seitliche Navigation-Menü */
.sidenav {
  höhe: 100%; /* 100% Gesamthöhe */
  breite: 0; /* 0 Breite - Diese Einstellung wird durch JavaScript geändert */
  position: fest; /* An Ort und Stelle bleiben */
  z-index: 1; /* Bleiben Sie oben */
  oben: 0; /* Bleiben Sie oben */
  left: 0;
  hintergrundfarbe: #111; /* Schwarz */
  ausgleich-x: hidden; /* Horizontale Scrollbar deaktivieren */
  ausgleich-oben: 60px; /* Inhalt auf Position 60px von der Oberseite */
  übergang: 0.5s; /* 0.5 Sekunden Übergangseffekt, um die seitliche Navigation zu zeigen */
}
/* 导航菜单链接The navigation menu links */
.sidenav a {
  ausgleich: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Change the color when the mouse hovers over the navigation link */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Position and style of the close button (upper right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Set the style of the page content - if you want to push the page content to the right when the side navigation is opened, use this setting. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Change the style of the side navigation on small screens with a height less than 450px (reduce padding and font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Step 3 - Add JavaScript:

In the following example, the side navigation will slide in and its width will be set to 250px:

Side navigation overlay example

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

亲自试一试

In the following example, the side navigation will slide in and push the page content to the right (the values used to set the width of the side navigation are also used to set the left outer margin of the "page content"):

Side navigation pushes the content

/* Set the width of the side navigation to 250px, the left outer margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the side navigation to 0, the left outer margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

亲自试一试

The following example will also slide the side navigation in and push the page content to the right. However, this time, we add a 40% opaque black background color to the body element to "highlight" the side navigation.

Side navigation with opacity pushes the content

/* Set the width of the side navigation to 250px, the left outer margin of the page content to 250px, and add a black background color to the 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 导航栏