Responsive Web navigatie

Info

Op deze pagina geef ik via een voorbeeld uitleg hoe je een responsive menu maakt. Is het moeilijk, ik denk van niet. Een menu is eigenlijk niks anders als een lijst met linken en in een verticaal menu staan ze onder elkaar en in een horizontaal menu staan ze naast elkaar.

Wij gaan ons hier bezig houden met een horizontaal menu met submenus en dat op kleinere schermen verticaal wordt. Om een mooi menu te maken kun je de linken het best in een ongeorderde lijst zetten.

We gaan eerst het HTML document maken.

HTML document

Voer de onderstaande code in een nieuw HTML document en sla deze op als index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="menu.css"/>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="overlay"></div>
    <button class="topnav-open"><span class="fa fa-bars"></span></button>
    <div class="topnav">
      <button class="topnav-close"><span class="fa fa-close"></span></button>
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Over mij</a></li>
        <li><a class="has-child" href="javascript:void(0);">Mijn werk</a>
          <ul>
            <li><a href="#">Porfolio</a></li>
            <li><a href="#">Aanbiedingen</a></li>
            <li><a href="#">Prijzen</a></li>
          </ul>
        </li>
        <li><a class="has-child" href="javascript:void(0);">Links</a>
          <ul>
            <li><a href="#">Bedrijf a</a></li>
            <li><a href="#">Bedrijf b</a></li>
            <li><a href="#">Bedrijf c</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>		
      </ul>
    </div>
    
    <div class="wrapper">
      <h1 class="text-center">Welkom</h1>
    </div>
    
    <script src="menu.js"></script>
  </body>
</html>

Als we de pagina starten in je browser ziet het er ongeveer zo uit:

Het is een menu maar laten we het horizontaal maken met een CSS document.

Nu gaan we de algemene stijl van onze pagina instellen.

We gebruiken het lettertype Verdana,sans-serif dit lettertype is goed te lezen ook op kleinere schermen, je kunt natuurlijk elk lettertype gebruiken die je wilt maar test ze eerst uit op je mobile telefoon!

De lettergrootte stellen we op 1rem (16px) en een line-height: 1.5

Verder zorgen we dat er horizontaal geen verschuiving mogelijk is overflow-x:hidden en zetten de marge ruimte op 0 margin:0;

Voer de onderstaande code in een nieuw CSS document en sla deze op als menu.css:

*,*::before,
*::after {
  box-sizing: border-box;
}
html{
  overflow-x: hidden;
}
html, 
body{
  font-family: Verdana,sans-serif;
  font-size: 1rem;
  line-height:1.5
}
body{
  margin: 0;
}

Het is altijd handig om in je CSS document een class te maken die de tekst centreerd, daarom doen we dat eerst. .text-center{text-align: center;}

Nu gaan we aan het menu beginnen, we maken een menu dat op kleinere schermen links aan de zijkant verschijnd als je op een menuknop klikt. We geven ons menu de class naam .topnav

Altijd eerst ontwerpen voor mobiel!

Daarom gaan we eerst het menu ontwerpen voor de kleinere schermen.

De eerste class voor ons menu is de .overlay class, deze gebruiken we om buiten het menu de rest van het scherm donkerder en niet toegankelijk te maken.

Dan maken we de .wrapper class, deze is bestemd voor de inhoud van de pagina.

Dan maken we de knop om het menu te openen button.topnav-open

Nu gaan we dus de .topnav class maken

Voeg de onderstaande code aan het CSS document menu.css toe:

.text-center{
  text-align: center;
}
.overlay{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 990;
}
.wrapper{
  max-width: 1200px;
  padding: 16px;
  margin: 80px auto;
}
button.topnav-open {
  color: #fff;
  background-color: #000;
  display: block;
  position: fixed;
  top: 2px;
  left: 2px;
  padding: 10px;
  font-size: 1.5rem;
  border: 1px solid #fff;
  z-index:100;
  cursor: pointer;
}
button.topnav-open:hover{
  color: #fff;
  background-color: #7D7D7D;
}
.topnav{
  font-size: 16px;
  background-color: #000;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: -250px;
  height: 100%;
  width: 250px;
  overflow-y: auto;
  padding-top: 70px;
}

Als we de pagina starten in je browser ziet het er ongeveer zo uit:

We hebben nu een knop waarmee je het menu kunt openen maar deze werk nog niet, dat komt later. We gaan nu eerst het menu verder afmaken.

Eerst maken we een knop om het menu in de kleinere schermen weer te sluiten. .topnav button.topnav-close

Dan gaan we de lijst ombouwen tot een mooi menu. .topnav ul li a

Voeg de onderstaande code aan het CSS document menu.css toe:

.topnav button.topnav-close {
  background-color: #000;
  color: #fff;
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  font-size: 2em;
  border: 1px solid #fff;
  cursor: pointer;
}
  .topnav button.topnav-close:hover{
  color: #fff;
  background-color: #7D7D7D;
}
.topnav ul {
  margin: 0;
  padding: 5px;
  list-style: none;
  position: relative;
}
.topnav ul:after {
  content: "";
  clear: both;
  display: block;
}
.topnav ul li {
  float: none;
  -webkit-transition: all .3s;
  transition: all .3s;
  padding: 5px;
}
.topnav ul li a {
  display: block;
  text-decoration: none;
  padding: 8px 12px;
  color: #fff;
  font-weight: normal;
}
.topnav ul li a:hover:not(.active), 
.topnav ul li a.current {
  background-color: #7D7D7D;
  color: #fff;
}
.topnav ul ul {
  display: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}
.topnav ul ul li {
  float: none;
  position: relative;
}
.topnav ul ul li a {
  display: block;
  padding: 8px 12px;
  color: #000;
}
.topnav ul ul li a:hover:not(.active) {
  background-color: #C0C0C0;
  color: #000;
}
.topnav ul li a.has-child:after {
  content: "\A0\A0\25BC";
  float: right;
}
.topnav ul li a.has-child.clickbtn:after {
  content: "\A0\A0\25B2";
  float: right;
}
  .topnav .active {
  background-color: #808080;
  color: #fff;
}

Als je nu de pagina start zie je geen verschil met de vorige, om de wijzigingen te kunnen zien, moeten we eerst een javascript bestandje maken zodat de knoppen werken.

Maak een nieuw bestand en sla dat op als:

menu.js

Voeg de volgende code toe:

// click menus
$(function() {
  $('.has-child').on('click', function()  {
    $(this).toggleClass('current').toggleClass('clickbtn').toggleClass("open").next().slideToggle("fast");
    $(".open").not($(this)).next().slideUp("fast");
    $(".open").not($(this)).toggleClass('current');
    $(".open").not($(this)).toggleClass('clickbtn').removeClass("open");
  });
});
// topnav
$(document).ready(function(){
  $(".topnav-open").click(function() {
    $(".topnav").animate({left: '0'});
    $(".overlay").css("display", "block");
  });
});
$(document).ready(function(){
  $(".topnav-close").click(function() {
    $(".topnav").animate({left: '-250px'});
    $(".overlay").css("display", "none");
  });
});

Als we de pagina starten in je browser en je klikt op de menu open knop, ziet het er ongeveer zo uit:

Als je een klikmenu opend ziet het er ongeveer als volgt uit:

Nu gaan we het menu aanpassen aan grotere schermen. Dit doen we door een breakpoint te creëren.

@media (min-width: 769px) {}

Binnen deze media code passen we ons menu aan, zodat het horizontaal en zichtbaar wordt.

Voer de onderstaande code aan het CSS document menu.css toe:

@media (min-width: 769px) {
  .topnav {position: static;
    overflow: initial;
    height: inherit;
    width: 100%;
    padding-top: 0;
  }
  .topnav ul li {
    float: left;
  }
  .topnav ul ul li {
    float: none;
  }
  .topnav ul ul {
    position: absolute;
    top: 100%;
    width: 160px;
    z-index: 90;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  }
  .topnav button.topnav-close {
    display: none;
  }
  button.topnav-open{
    display: none;
  }
  .wrapper{max-width: 1200px;
    padding: 16px;
    margin: 16px auto;
  }
}

Als we de pagina starten in je browser en je opend het submenu, ziet het er ongeveer zo uit:

Verklein je browser om het resposive effect te zien.

Als je wilt kun je de bovenstaande bestanden ook in zijn geheel dowloaden:

Download de zip