Hoe te maken: mobiele navigatiemenu

Leer hoe je een bovenste navigatiemenu maakt voor smartphones/tablets met CSS en JavaScript.

Maak een mobiele navigatiemenu

Eerste stap - Voeg HTML toe:

<!-- Load icon library to display hamburger menu (three bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">Over</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" om de navigatielinks te wisselen -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

Tweede stap - Voeg CSS toe:

/* Stel het stijl van het navigatiemenu in */
.topnav {
  overschot: verborgen;
  achtergrondkleur: #333;
  positie: relatief;
}
/* Verberg de links in de navigatiemenu (merk/homepage uitgesloten) */
.topnav #myLinks {
  weergave: none;
}
/* Stel het stijl van de navigatielinks in */
.topnav a {
  kleur: wit;
  uitsteek: 14px 16px;
  tekstdecoratie: none;
  lettergrootte: 17px;
  weergave: blok;
}
/* Stel het stijl van het hamburgermenu in */
.topnav a.icon {
  achtergrond: zwart;
  weergave: blok;
  positie: absoluut;
  rechts: 0;
  top: 0;
}
/* Voeg een grijs achtergrondkleur toe bij muisover */
.topnav a:hover {
  achtergrondkleur: #ddd;
  kleur: zwart;
}
/* Stel het stijl van de actieve link (of homepage/merk) in */
.active {
  achtergrondkleur: #04AA6D;
  kleur: wit;
}

Derde stap - Voeg JavaScript toe:

/* Wissel de weergave van de navigatielinks in en uit bij klikken op het hamburgermenu/horizontale pictogram */
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

Probeer het zelf

Related pages

Tutorial:CSS navigation bar

Tutorial:How to create a responsive top navigation bar