Une navigation responsive sans Javascript

Un menu responsive, avec un bouton « hamburger » et une nav animée, le tout sans une seule ligne de JavaScript. C’est possible, et c’est même relativement simple. Voici comment faire.

Principe

Le fonctionnement du menu repose sur deux principes : l’utilisation de la pseudo-classe CSS :has() et une checkbox cachée, dont on ne fait apparaître que le <label>. C’est elle qui va jouer le rôle du bouton.

La pseudo-class :has() a un très bon niveau de compatibilité avec les navigateurs. On peut donc raisonnablement l’utiliser un production.

Vous pouvez voir une démo fonctionnelle sur codepen.io.

Le HTML

Voici le code HTML pour illustrer le principe. Il s’agit du strict minimum.

La checkbox va contrôler l’apparence de la nav, selon qu’elle soit cochée, ou pas. Le label ne contient aucun texte. On va gérer son contenu grâce à un ::before selon son état (coché ou pas).

<div class="nav-wrapper">
	<label class="btn-hamburger">
		<input type="checkbox"> 
	</label>
	<nav class="main-nav">
		<ul>
			<li><a href="#">Link 1</a></li>
			<!-- etc… -->
		</ul>
	</nav>
</div>

Le CSS

Là encore, il s’agit du strict minimum de principe.

.btn-hamburger input { display: none } /* la checkbox n’est jamais montrée */
@media screen and (width > 768px){
  .btn-hamburger { display: none } /* pas affiché en version desktop */
}
@media screen and (max-width: 768px){
	/* contenu label si checkbox non cochée */
  .btn-hamburger::before { content: "≡" }

  /* contenu label si checkbox cochée */
  .btn-hamburger:has(:checked)::before { content: "×" } 

  /* nav cachée si checkbox non cochée */
  .main-nav { display: none }

  /* nav affichée si checkbox cochée */
  .nav-wrapper:has(:checked) .main-nav { display: block; }
}

Conclusion

Plutôt que d’utiliser du Javascript pour appliquer des classes permettant de gérer l’aspect de la navigation sur mobile, une checkbox cachée et le sélecteur CSS adéquat arrive au même résultat. Plus simple, plus léger… plus écoconçu.

La question de l’accessibilité reste tout de même ouverte. Cette solution rend-elle la navigation moins accessible ? À ce jour, je n’ai pas de réponse à cette question.