Over hamburger-menu's

Websites hebben vaak een soort boomstructuur om de informatie te ordenen. Zo'n boomstructuur kan behoorlijk ingewikkeld zijn. Voor het navigeren door de boom wordt vaak een menu ingezet.
Het menu open je door op een knop te klikken. Gewoonlijk heeft die de tekst "MENU" of staan er alleen drie liggende streepjes boven elkaar: ☰. Vanwege de associatie met een broodje hamburger wordt dat laatste "hamburger" genoemd.

Er zijn verschillende manieren om een hamburger in je document op te nemen:

• Met behulp van numerieke of karakter-referenties.
  
  • Een hamburger 'in de juiste verhoudingen': ☰, die ook goed bruikbaar is in teksten, maak je met de code ☰
  • De Griekse hoofdletter Xi: Ξ, is bruikbaar als hamburger in teksten. Het uiterlijk is wat smaller, maar verder OK. Let hier wel op met het font dat de tekst gebruikt. Op deze site is dat Verdana; dat geeft een goed resultaat. Als je bijvoorbeeld Courier New toepast, ziet het er zo uit: Ξ. Dat lijkt niet meer op een hamburger!
    De code is Ξ
  • Het item Rond menu dat groter wordt gebruikt deze techniek.
• Met behulp van een icon-font. Hier reken ik ook SVG-fonts onder.
  
  • In oudere versies van Bootstrap (tot en met 5.3.x) was een set icons beschikbaar. Op het moment dat dit geschreven wordt, is dat nog steeds zo.
    • Icons van Bootstrap 3.3.7
  • Er zijn behoorlijk wat sites waar je gratis icons kunt downloaden. Een kleine greep uit het assortiment:
    • Font Awesome
    • Flat icon
    • IKONS
  • Deze techniek wordt op deze site niet toegepast.
• Met een plaatje
  
  • De hamburger zit in een eenvoudig plaatje. Je kunt hier zowel .GIF, .PNG als .JPG voor gebruiken.
  • Bij een klik op het plaatje verschijnt het menu. Het plaatje verandert in een kruisje of iets dergelijks. Dat kun je doen met JavaScript, zie bijvoorbeeld het item Plaatje laten veranderen als er op wordt geklikt.
  • Deze aanpak wordt toegepast in het item Horizontaal inschuivend menu met CSS en W3.JS.
• Met een kant-en-klare oplossing die je downloadt van internet.
  
  • De site jonsuh.com/hamburgers toont een set hamburgers die, als je er op klikt, veranderen in een kruisje of pijl, met een CSS-animatie. Het afvangen van de muis-kliks gaat -uiteraard- via JavaScript. Het enige wat je zelf moet doen is een event-handler maken die het menu daadwerkelijk voor je opent.
  • Een paar voorbeelden;
    let op de manier waarop de hamburger verandert als je er op klikt:
           
  • Toepassingen en downloads vind je op jonsuh.com