Sur cette exemple, il s’agit de faire une barre latérale cachée avec un menu burger sans JavaScript.

une pensée pour ie8

Ici, on utilise la propriété transform, pour ne pas avoir de problèmes avec ie8 (internet explorer 8), la navigation reste accessible sans la transformation.
Flexbox ne marche pas sous ie8, j’ai donc ajouté display:inline-block; et vertical-align:top;. Enfin le SVG ne passe sous ie8, le burger est donc invisible.

:target et transition

:target détecte si l’url à un # (une ancre) avec l’id de l’élément en target.
Transition permet de faire une animation en quelques lignes.
Pour approfondir : https://bitsofco.de/the-target-trick/

démo

See the Pen menu burger by Benoît Wimart (@benoitwimart) on CodePen.0