Geanimeerd hamburger pictogram
Hier linksboven zie je een hamburger menu. Als je er met de muis overheen gaat of het aantikt, verandert de kleur van de
streepjes van blauw in rood. Het bovenste streepje lijkt sneller te gaan dan het middelste streepje, dat weer sneller lijkt
te gaan dan het onderste.
Als je op de hamburger klikt verschijnt er een menu met drie links. Dat dient alleen om te laten zien hoe het werkt. De links
doen verder niets.
Op deze bladzijde wordt uitgelegd hoe je dit maakt. De code kun je downloaden om zelf te gebruiken.
Dit is een bewerking van code die ik heb gevonden in het blad Webdesigner Magazine nr. 98 (september 2017), pag. 22 t.m. 24.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML (in het document) en CSS (in de file styles.css). JavaScript wordt hier niet gebruikt.
- HTML
- De HTML van het voorbeeld bestaat uit een enkele <nav>-tag, waarin zowel de hamburger als de links zijn opgenomen.
- De <nav>-tag kan overal in de <body> staan. In het voorbeeld staat deze helemaal aan het begin.
- De <nav>-tag heeft id="voorbeeld".
- De hamburger is een <a>-tag. Die linkt aan de bookmark #voorbeeld, dat is de <nav>-tag zelf. Hiermee wordt bereikt dat de hamburger zelf als link niets doet.
- De linktekst binnen de <a>-tag bestaat uit drie <span>-tags. Die worden met CSS onder elkaar gezet, van afmetingen voorzien en blauw gekleurd. Op deze manier wordt het hamburger-plaatje gemaakt.
- De (in het voorbeeld) drie links zijn onzichtbaar gemaakt met CSS. In het voorbeeld linken ze aan het document zelf, maar je kunt er echte links van maken door het href-attribuut aan te passen.
- Het afrolmenu wordt zichtbaar door op de hamburger te klikken. Dat wordt geregeld door CSS.
- Er is geen voorziening om het afrolmenu te sluiten. Die kun je zelf maken door een link te maken die linkt aan het document
zelf (zoals in het voorbeeld is gedaan).
- CSS
- De CSS begin met het plaatsen van de nav-tag voor de hamburger in de linker bovenhoek. Aan de linkerkant en aan de bovenkant is er wat marge gemaakt. Er is position: fixed; opgegeven zodat de hamburger niet uit beeld kan scrollen. De overige content kan onder de hamburger door scrollen omdat de hamburger boven de content zweeft: z-index: 10;.
- De nav-tag heeft een breedte van 60px. Voor je eigen toepassing moet je die waarschijnlijk breder maken.
- Vervolgens worden de items van het afrolmenu opgemaakt. Dit zijn allemaal <a>-tags. Ze hebben allemaal display:
none, dus ze zijn onzichtbaar. Als ze echter target worden (dat gebeurt door een klik op de hamburger) krijgen
ze display: block en zijn ze dus zichtbaar.
De hamburger zelf is altijd zichtbaar. De display: none wordt voor het eerste element binnen de nav-tag overschreven met display: block; dat gebeurt door de selector nav > *:nth-child(1). - Nu zijn de span-tags, waarmee de drie horizontale lijntjes worden gemaakt, aan de beurt.
- Elk van de drie lijntjes heeft een breedte van 100% binnen de nav-tag (minus de 10% padding in die nav-tag!).
- De hoogte is 0.5em en margin-top: .25em zorgt voor de tussenruimte. Door position: relative; staan ze netjes onder elkaar.
- Vóór dat dit wordt ingesteld, worden door nav > *:nth-child(1) span:before de rode kleur van de bewegende streepjes en de animatie ingesteld. De breerdte wordt op nul gezet. De animatie betreft de (horizontale) breedte van de streepjes en duurt 1 seconde.
- Daarna wordt de animatie zelf ingesteld. Die gaat via @keyframes met de naam open. Het bovenste streepje reageert meteen als de muis-pijl boven het menu zweeft. Het middelste streepje reageert met een vertraging van 0.15 seconde, het onderste streepje heeft een vertraging van 0.30 seconde.
- De keyframes veranderen de breedte van het rood gekleurde streepje van 0% tot 100%.
- Toepassen in je eigen site
- Download de .zip-file en pak hem uit. Bouw de code op zoals op deze pagina is aangegeven. Je hebt nu een werkend voorbeeld.
- Pas de HTML aan: Verander de links en de linkteksten. Voeg er desgewenst links aan toe of verwijder links.
- Pas de CSS aan. Denk daarbij aan de kleuren, de breedte van de streepjes, de karaktergrootte en eventueel het lettertype binnen het menu, enzovoort.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de ergens <BODY>, bijvoorbeeld aan het begin).
<nav id="voorbeeld">
<a href="#voorbeeld">
<span></span>
<span></span>
<span></span>
</a>
<a href="#">Alfa</a>
<a href="#">Beta</a>
<a href="#">Gamma</a>
</nav>
Downloaden:
Druk op de knop:
File: voorb583.zip, 771 bytes.
