Hamburgers - css geanimeerde hamburgermenu's

Lees verder

Geschreven door Dirk Hornstra op donderdag januari 16, 2020

Je ziet op veel sites op het moment dat je de mobiele weergave bekijkt: het menu is weg, in plaats daarvan zie je 3 horizontale streepjes. Het hamburger-menu. Als je erop klikt wordt het menu zichtbaar. Hoe dat gaat, dat geeft net die "extra touch" aan jouw site. Draaien die 3 streepjes een rondje? Verandert het in een kruisje?

Deze repo toont een aantal mogelijkheden en allemaal met CSS, dus geen ingewikkelde/uitgebreide stukken script die je hoeft toe te voegen.

Als je een check-out doet van de code (of het zip-bestand download), neem dan een kijkje in de map dist, hier zie je een voorbeeld HTML bestand. Daarin worden alle mogelijkheden getoond, op je eigen site ga je waarschijnlijk 1 van de opties implementeren. Kwestie van het stukje HTML erin zetten, het CSS deel (algemene .hamburger wat bovenin het CSS bestand staat en jouw specifieke animatie). In het HTML-bestand worden alle "hamburger-items" langs gelopen, maar als jij jouw <div class="hamburger..." de volgende property geeft:

onclick="showHideMobileMenu(this);"

en dit stukje script toevoegt:

function showHideMobileMenu(hamburger) { hamburger.classList.toggle('is-active'); }

dan heb je een werkende versie!