Animeer het pictogram van een hamburgermenu

Met CSS-animatie maak je een bewegende hamburger voor het navigatiemenu op je site.

Zoals te zien op mozaik.com

1. HTML-document

Maak een HTML-document met daarin de HTMLdocumentcontainer die secties voor de head en body heeft. In de head-sectie staan beschrijvingen en links naar externe bronnen – in dit geval een CSS-stylesheet. In de volgende stap voeg jje zichtbare inhoud aan de body-sectie toe.



Hamburger Effect

*** STAP 2

2. Navigatiecontent

Het menu is gemaakt van een navigatiecontainer met een aantal links. De eerste link in deze container is het hamburgerpictogram, een link die naar de navigatiecontainer verwijst. Het hamburgerpictogram heeft drie span-elementen die je straks zo vormgeeft dat ze op de drie streepjes van de hamburger lijken.

3. Start het stylesheet

Nu de HTML-markup compleet is, maak je het stylesheet ‘styles.css’ waarin je de CSS-opmaak zet. In het eerste deel daarvan stel je in dat het document en de body een zwarte achtergrond zonder randen hebben. Daarna geef je het lettertype aan dat alle elementen zullen erven.
html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: rgb(21, 34, 47); }

4. Navigatiecontainer

De navigatiecontainer neemt 25% van de breedte van het document in en heeft geen marges. Dit is belangrijk omdat je het menu niet over de gehele breedte van het document wilt afbeelden. Daarom stel je daar een percentage voor in. Gebruik een block-display om er zeker van te zijn dat het resizen van de breedte altijd werkt, dus ongeacht hoe een browser navigatiecontainers standaard behandelt.
nav{
display: block;
width: 25%;
margin: 0; }

5. Standaard navigatielinks

Stel de border en width voor de links in de navigatiecontainer zo in dat ze net zo breed als het menu zijn. Standaard zijn de navigatielinks niet zichtbaar, dat worden ze pas wanneer hun parent container getarget wordt. Vandaar ook dat de HTML-link van het hamburgerpictogram naar de navigatiecontainer van diens parent verwijst.
nav a{
display: none;
width: 100%;
padding: 10%;
font-size: 1.5em;
border: 3px solid #fff;
background: #333;
color: #fff; }
nav:target a{
display: block; }

6. Stijl van hamburgermenu

Omdat het hamburgerpictogram altijd het eerste element in de navigatiecontainer is, verwijs je er met de selector ‘nth-child’ naar. Eerst laat je dit weergeven als een blok met een breedte van vijf tekens. Daarna maak je de binnenste elementen op als witte streepjes in relatie tot de afmeting die je eerder instelde. Elk streepje heeft een specifieke marge en hoogte, zodat ze allemaal zichtbaar zijn en los van elkaar staan.
nav > *:nth-child(1){
display: block;
width: 5em; }
nav > *:nth-child(1) span{
position: relative;
display: block;
width: 100%;
height: .5em;
margin-top: .25em;
background: #fff; }

7. Animatie: voorbereiding

Je maakt de animatie met hulp van het element ‘before’ dat CSS op elementen op een webpagina kan toepassen. Hiermee voeg je een streepje met een rode achtergrond toe aan elk span-element dat je in de vorige stap definieerde. Hun parent-span gebruikt relatieve positionering en de posities van deze drie elementen zijn weer relatief ten opzichte van hun parent. Je geeft deze elementen een breedte van 0 pixels. In de volgende stappen animeer je ze.
nav > *:nth-child(1) span::before{
content: “”;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: red;
transition: width 1s;
}

8. Animatie: instellingen van de streepjes

Wanneer de muisaanwijzer boven de parent-link hovert, moet de animatie ‘open’ toegepast worden op de before-elementen van de balken in het hamburgermenu. Deze animatie wordt ‘forwards’ afgespeeld om ervoor te zorgen dat die op het laatste frame stopt. Om het effect tot zijn recht te laten komen, pas je een vertraging van 0,15 seconde op het tweede streepje toe en een vertraging van 0,3 seconde op het derde.
nav > *:nth-child(1):hover span::before{
animation: open 1s forwards; }
nav > *:nth-child(1):hover span:nthchild(
2)::before{
animation-delay: .15s; }
nav > *:nth-child(1):hover span:nthchild(
3)::before{
animation-delay: .3s; }

9. Animatie: definitie

De animatie ‘open’ die op de before-elementen wordt toegepast, is simpel. Deze bestaat uit twee frames die de breedte van de streepjes van 0 verandert tot ze de gehele breedte van het menu innemen. De browser berekent de animatieframes die tussen deze toestanden nodig zijn om een soepele overgang te maken die even lang duurt als de tijd die je in de vorige stap instelde.
@keyframes open {
0% {width: 0;}
100% {width: 100%;}
}

Download de bijbehorende bestanden van Webdesigner98.

Webdesigner 98: Bouw alles voor mobiel, HTML5 Audio, Data-visualisatie

Hoeveel tijd besteed je achter het scherm van je pc? En hoe lang tuur je naar het kleine scherm van je mobiele telefoon? Omdat we het grootste deel van onze online tijd op een mobiel apparaat doorbrengen, is het heel belangrijk dat we veel aandacht spenderen aan het ontwerpen van mobiele sites. In Webdesigner 98 geven we je tips, trucs en technieken voor het verbeteren van mobiele sites. We behandelen zaken zoals navigatie, lay-out, leesbaarheid, gebruikerservaring, kleurcoördinatie en optimalisatie, want als je een mobiele site op de juiste punten aanpakt, verbeter je de gebruikerservaring en wordt die een succes.

Koop direct in onze webshop!

Deel dit artikel of reageer