Pour cet exercice nous allons créer une des options de navigation les plus populaires, le menu hamburger 🍔. Pour ce faire nous allons exploiter la pseudo-classes spécifique aux boites à cocher (checkbox) afin de déterminer quand un élément doit être visible/invisible.
Cet aspect des boites à cocher permet de créer de l’interactivité sans même avoir recours au JavaScript.
Ajoutez l'attribut nécessaire aux deux balise <label> afin que ceux-ci coche/décoche la boite à cocher.
L'apparence du menu est déjà programmée. Cependant, le menu est présentement invisible puisqu'il affiche à l'extérieur de la page. Faites en sorte de détecter en CSS si la boite à cocher est cochée ou non. Si elle est cochée, modifiez la position du menu de sorte qu'il devienne visible.
Lorsque l'apparition et la disparition du menu fonctionnent, faites disparaitre en CSS la boite à cocher. Elle doit encore être présente dans le code HTML afin de pouvoir être cochée/décochée, mais il n'est plus nécessaire de la voir.
Bonus
Plutôt que d'utiliser la propriété left, modifiez le code afin d'utiliser la propriété transform.
Ajoutez une transition d'une demi-seconde sur la propriété transform afin d'obtenir une animation de menu hamburger digne d'un site professionnel.
