Hoe te maken: Volledig scherm overlappende navigatie

Leer hoe je een volledig scherm overlappende navigatiemenu maakt.

Maak een volledig scherm overlappende navigatie

Eerste stap - Voeg HTML toe:

<!-- 覆盖层 -->
<div id="myNav" class="overlay">
  <!-- 可关闭叠加导航的按钮 -->
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <!-- Overlay content -->
  <div class="overlay-content">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
  </div>
</div>
/* Gebruik elk element om de overlapping navigatiemenu te openen/tonen */
<span onclick="openNav()">open</span>

Tweede stap - Voeg CSS toe:

/* Bedekkende laag (achtergrond) */
.overlay {
  /* Hoogte en breedte zijn afhankelijk van hoe je de bedekkende laag wilt weergeven (zie onderstaande JS) */   
  hoogte: 100%;
  breedte: 0;
  positie: vast; /* Blijf op zijn plek */
  z-INDEX: 1; /* Bovenop liggen */
  links: 0;
  boven: 0;
  achtergrondkleur: rgb(0,0,0); /* Reserveer zwart */
  achtergrondkleur: rgba(0,0,0, 0.9); /* Half transparant zwart */
  overloop-x: verborgen; /* Schakel horizontale scrolling uit */
  overgang: 0.5s; /* 0.5 seconden overgangseffect, zodat de bedekkende laag in of uit schuift (hoogte of breedte afhankelijk van de weergave) */
}
/* Plaats de inhoud binnen de bedekkende laag */
.overlay-content {
  positie: relatief;
  boven: 25%; /* 25% vanaf de top */
  breedte: 100%; /* 100% breedte */
  tekstuitlijning: center; /* Centreer tekst/links */
  bovenrand: 30px; /* 30 pixels bovenrand, om botsing met de sluitknop op kleine schermen te voorkomen */
}
/* Bedekkende laag binnen de navigatielink */
.overlay a {
  pad: 8px;
  tekstdecoratie: none;
  lettergrootte: 36px;
  kleur: #818181;
  weergave: blok; /* Toon een blok in plaats van inline */
  overgang: 0.3s; /* Overgangseffect bij hover (kleur) */
}
/* Wissel de kleur wanneer je de muis over de navigatielink hovert */
.overlay a:hover, .overlay a:focus {
  kleur: #f1f1f1;
}
/* Plaats de sluitknop (rechterbovenhoek) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
Pas de lettergrootte van de links aan en herpositioneer de close button wanneer het schermhoogte minder is dan 450 pixels, zodat ze niet overlappen
/* Pas de lettergrootte van de links aan en herpositioneer de close button wanneer het schermhoogte minder is dan 450 pixels, zodat ze niet overlappen */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

Derde stap - Voeg JavaScript toe:

In het volgende voorbeeld schuift de overlay navigatiemenu van links naar rechts (van 0 tot 100% breedte) wanneer het wordt getriggerd:

Van links naar rechts inschuiven

/* Open wanneer iemand op het span element klikt */
function openNav() {
  document.getElementById("myNav").style.width = "100%";
}
/* Sluit wanneer iemand op het "x" symbool binnen de overlay klikt */
function closeNav() {
  document.getElementById("myNav").style.width = "0%";
}

Try it yourself

In het volgende voorbeeld schuift de overlay navigatiemenu van boven naar beneden (van 0 tot 100% hoogte).

Opmerking:In dit voorbeeld is de CSS enigszins verschillend van de vorige voorbeelden (de standaard hoogte is nu 0, de breedte is 100%, en overflow-y is hidden (verticale scroll wordt uitgeschakeld, behalve voor kleine schermen)):

Van boven naar beneden schuiven

/* Openen */
function openNav() {
  document.getElementById("myNav").style.height = "100%";
}
/* Afsluiten */
function closeNav() {
  document.getElementById("myNav").style.height = "0%";
}

Try it yourself

In dit voorbeeld wordt geen animatie gebruikt bij het openen van het navigatiemenu:

Geen animatie menu openen

/* Openen */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}
/* Afsluiten */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

Try it yourself

Related pages

Tutorial:CSS navigation bar