Hier is een eenvoudige manier om een geanimeerd hamburger menu pictogram te maken met behulp van CSS. Dit wordt vaak gebruikt in responsive web design om een navigatiemenu te reduceren tot een enkel pictogram.
HTML:
```
CSS:
```
.hamburger-menu {
position: relative;
display: inline-block;
width: 30px;
height: 24px;
}
.hamburger-menu div{
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #333;
transition: all 0.5s;
}
.hamburger-menu div:nth-child(1){
top: 0;
}
.hamburger-menu div:nth-child(2){
top: 10px;
}
.hamburger-menu div:nth-child(3){
top: 20px;
}
```
In deze basis setup heb je een hamburger pictogram met 3 lijnen.
Vervolgens voeg je de animatie toe met behulp van CSS classes.
Voor het kruis patroon:
```
.hamburger-menu.cross div:nth-child(1){
transform: rotate(-45deg);
top: 10px;
}
.hamburger-menu.cross div:nth-child(2){
width: 0;
opacity: 0;
}
.hamburger-menu.cross div:nth-child(3){
transform: rotate(45deg);
top: 10px;
}
```
Met behulp van JavaScript of jQuery, je kunt dan de ‘cross’ class toevoegen of verwijderen om dit pictogram te veranderen van een hamburger menu naar een kruis.
\`\`\`javascript
$(‘.hamburger-menu’).click(function(){
$(this).toggleClass(‘cross’);
});
\`\`\`
Let op: Zorg ervoor dat je jQuery toevoegt aan je project als je deze laatste methode gebruikt!
