Hoe te maken: off-canvas menu

Maak een off-canvas menu aan

Stap 1 - Voeg HTML toe:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Over</a>
  <a href="#">Diensten</a>
  <a href="#">Klanten</a>
  <a href="#">Contact</a>
</div>
<!-- Gebruik elk element om de zijbalk te openen -->
<span onclick="openNav()">open</span>
<!-- Voeg alle pagina-inhoud toe aan deze div als je wilt dat de zijbalk de inhoud van de pagina naar de rechterkant duwt. Gebruik deze instelling niet als je alleen de zijbalk aan de top van de pagina wilt houden. -->
<div id="main">
  ...
</div>

Tweede stap - Voeg CSS toe:

/* Zijbalknavigatiemenu */
.sidenav {
  hoogte: 100%; /* 100% volledige hoogte */
  breedte: 0; /* 0 breedte - wordt ingesteld via JavaScript */
  positie: vastgezet; /* Blijf op dezelfde plek */
  z-INDEX: 1; /* Blijf bovenaan */
  top: 0;
  links: 0;
  achtergrondkleur: #111; /* Zwart */
  overschrijving-x: verboden; /* Horizontale scrolling uitschakelen */
  padding-top: 60px; /* Inhoud op 60 pixels van de top */
  overgang: 0.5s; /* 0.5 seconden overgangseffect, zodat de zijbalk naar binnen schuift */
}
/* Navigatiemenu-link */
.sidenav a {
  padding: 8px 8px 8px 32px;
  tekstdecoratie: none;
  lettergrootte: 25px;
  kleur: #818181;
  weergave: blok;
  overgang: 0.3s;
}
/* Wissel de kleur van de navigatielink wanneer de muis erover hangt */
.sidenav a:hover {
  kleur: #f1f1f1;
}
/* Sluitknoppositie en -stijl (rechtsbovenhoek) */
.sidenav .closebtn {
  positie: absoluut;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* 设置页面内容的样式 - 如果您希望在打开侧边导航时，将页面内容推向右侧，请使用此选项 */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* 在屏幕高度小于 450 像素的小屏幕上，更改侧边导航栏的样式（减少内边距和字体大小） */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Derde stap - Voeg JavaScript toe:

Canvas-uitbuitmenu

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

Try it yourself

De volgende voorbeeld maakt dezelfde zijkant navigatiebalk glidend in, en duwt de inhoud van de pagina naar de rechterkant. Maar deze keer voegen we een semi-transparante (40% ondoorzichtigheid) zwarte achtergrondkleur toe aan het body-element om de zijkant navigatiebalk "te benadrukken":

Canvas-uitbuitmenu met透明天色

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

Try it yourself

Related pages

Tutorial:CSS navigation bar