Sur cet 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 pas sous ie8, le burger est donc invisible.

L’article datant de 2016, aujourd’hui les utilisateurs sous ie8 sont en voie d’extinction (d’après l’OMS, il en reste moins de 50 en France), vous pouvez lire la suite sans inquiétude.

: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/

Exemple

Pour la partie HTML, c’est le href="#wrap" qui va déclencher la bascule CSS

 <a href="#wrap" id="open">
  <!-- texte ou image ou svg -->
 </a>

Dans le CSS, il faudra jouer avec :not et :target

/* quand il n'y a pas de #wrap dans l'url (jenseign.com.com/page.html) */
#wrap:not(:target) {
  transform: translate3d(-335px, 0, 0); /* cache l'élément #wrap */
}
 
/* quand il y a un #wrap dans l'url (jenseign.com.com/page.html#wrap) */
#wrap:target {
  transform: translate3d(0, 0, 0); /* affiche l'élément */
}

démo

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

Lien vers le codepen

[update] Checked ?

Une autre technique consiste à jouer avec les cases à cocher (checkbox), les labels (

  • La case à cocher est liée à son label
  • La case à cocher est un frère (ou une sœur) du bloc modifié input ~ #wrap

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

Plus simple avec JavaScript ?

En pratique, la plupart des interactions sont « pilotées » avec du JavaScript. Pour un autre exemple en JavaScript, rendez-vous sur cette page.