//// Referentiehttps://www.w3schools.com/howto/howto_js_topnav_responsive.asp

In volgende pagina worden gelijdelijk aan stijlelementen toegevoegd om uiteindelijk te komen tot een responsive menu: Bekijk pagina

<div class="menu">
  <a href="#">Home</a>
  <a href="#">Photos</a>
  <a href="#">Contact</a>
</div>

en bijhorende CSS

.menu {
    background-color: black;

}
.menu a {
    color: white;
    text-align: center;
    text-decoration: none;
}
.menu a:hover {     
    background-color: green;
    color: black;
}

Let op volgende toevoegingen:

.menu03 a {...
   display: block;
    ...
}
.menu04 a {...
   display: block;
   float: left; 
   overflow: hidden;
    ...
}

Responsive maken van het menu

Als het scherm kleiner is dan 600px, toon het responsive menu  ☰

Voeg toe:

  • Een extra HTML regel voor het menu-icoontje ☰
  • Een uniek id aan het menu voor de Javascript functie: id=”mymenu05″ Dit zorgt er voor dat er een menu openklapt als men op ☰ klikt
  • Een Javascript functie vlak na de header: deze wijzigt de class van menu05 naar menu05.responsive
  • Een nieuwe class toegevoegd voor het menu: .menu05 .responsive
  • Een nieuwe class toegevoegd voor dit icoon in het menu: .menu05 .icon