Le menu burger est devenu depuis quelques années le « must have » pour les interfaces web destinées aux mobile et tablettes mais il est de plus en plus fréquent d’en trouver sur les versions desktop. Le plus souvent, ces menus ont recours au langage de programmation JavaScript pour pouvoir fonctionner. Mais existe-t-il une solution HTML/CSS qui permette l’intégration d’un menu burger dans une page ? Bonne nouvelle, la réponse est oui !
Avant toutes choses, une petite mise en garde s’impose. Même si il existe des solutions n’ayant pas recours au JavaScript, ces dernières ne sont pas sans inconvénients. Elle nécessiterons quelques petits pas de côté dans la logique et le respect de la structure sémantique de notre page. Dans un cadre professionnel où l’accessibilité et le référencement sont une part importante des enjeu, il restera préférable d’utiliser le JavaScript. Cependant, la méthode que nous allons détailler aujourd’hui offre un exercice intéressant de manipulation des codes HTML et CSS, donc pourquoi s’en priver ?
Le principe général
Nous allons ici travailler sur un menu burger composé de 4 entrées. La structure du menu sera assez classique puisque nous allons nous appuyer sur une structure <nav> à laquelle nous appliquerons une class="burger_nav" et dans laquelle nous intégrerons une liste de liens.
<nav class="burger_nav">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="info.html">Informations</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Jusqu’ici rien de bien compliqué, passons au CSS.
Dans cette première étape du code CSS, nous allons travailler sur la liste <ul> de notre menu en faisant en sorte que cette dernière recouvre la totalité de la page (grâce à la propriété position:fixed). Il s’agira de l’aspect qu’elle prendra lorsque le menu sera ouvert. Nous allons également utiliser la propriété display:flex pour positionner les éléments <li> au centre de notre élément <ul>.
.burger_nav ul {
/* Dimensions de l'élément */
height: 100vh;
width: 100vw;
/* Couleur d'arrière plans de l'élément */
background: black;
/* Positionnement de l'élément */
position: fixed;
right: 0;
top: 0;
z-index: 2000;
/* Positionnement des enfants de l'élément */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}Une fois cette étape effectuée, nous pourrons affiner le design de notre menu en appliquant des styles aux éléments <li> et <a href="…">.
.burger_nav li {
width: 400px;
text-align: center;
}
.burger_nav li + li {
border-top: solid 1px grey;
}
.burger_nav li a {
display: block;
padding: 2em;
font-size: 2em;
text-decoration: none;
color: white;
}Rendu à ce stade de notre intégration, nous obtenons un gros bloc noir présetnant une liste de lien et recouvrant bien l’ensemble de notre page. Nous allons pouvoir passer à l’étape suivante permettant d’afficher et masquer notre menu.
Gestion de l’interactivité
Commençons déjà par masquer notre menu. Pour l’instant il recouvre entièrement la page. Nous allons modifier sa propriété right: (en ligne 9) pour le décaler en dehors de notre page sur la droite.
.burger_nav ul {
/* Dimensions de l'élément */
height: 100vh;
width: 100vw;
/* Couleur d'arrière plans de l'élément */
background: black;
/* Positionnement de l'élément */
position: fixed;
right: -100vw;
top: 0;
z-index: 2000;
/* Positionnement des enfants de l'élément */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}C’est à partir de cette étape que les choses se gâtent. Par défaut le code HTML ne permet pas de détecter le clique de l’internaute. Il va nous falloir ruser.
L’astuce est d’utiliser un élément de formulaire et plus particulièrement la case à cocher. Nous avons vu qu’il était possible grâce aux sélecteurs CSS de pouvoir cibler un élément suivant l’élément cliqué. C’est en s’appuyant sur cette méthode que nous allons pouvoir afficher ou masquer notre menu. Pour cela, nous allons devoir modifier notre code html en ajoutant un élément <input type="checkbox"/> juste avant notre <ul>.
Comme il est évoqué en introduction, cette écriture ne respecte pas les standards puisque notre champs case à cocher est en dehors d’un formulaire et totalement détourné de son utilisation attendue.
<nav class="burger_nav">
<input type="checkbox"/>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="info.html">Informations</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Nous allons ensuite pouvoir ajouter un label à notre case à cocher qui nous permetra par la suite de mentionner qu’il s’agit du bouton permettant de déployer le menu.
<nav class="burger_nav">
<label for="menu_bt">Menu</label>
<input type="checkbox"/>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="info.html">Informations</a></li>
<li><a href="about.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Revenons maintenant au CSS pour positionner notre bouton. Là aussi une petite astuce peut s’avérer utile.
Lorsque nous avons rédigé le <label> de notre checkbox, nous avons bien veillé à y adjoindre l’attribut for qui permettra à l’internaute de coché et décocher la case en cliquant sur sa légende. Ainsi, nous pouvons masquer notre élément <input type= »checkbox »> et ne laisser apparaitre que notre <label>. Seul le label sera a manipuler.
.burger_nav input[type="checkbox"] {
/* nous masquons la case à cocher */
display : none;
}
.burger_nav label {
/* nous positionnons le label */
position:absolute;
right:2rem;
top:2rem;
/* nous le passons par dessus le menu pour pouvoir y avoir accès même si il est ouvert */
z-index: 2001;
/* nous modifions son aspect graphique */
background:black;
color:white;
text-transform:uppercase;
padding:.5rem 1rem;
/* nous modifions l'aspect du curseur pour indiquer à l'internaute qu'il est cliquable */
cursor:pointer;
}
Il ne nous reste plus qu’a modifier l’emplacement du menu lorsque l’internaute clique sur le <label> pour modifier l’état de la case à cocher. Cet état est défini à l’aide de l’attribut checked du <input> que nous ciblerons simplement à l’aide de la pseudo-classe :checked.
.burger_nav input[type="checkbox"]:checked + ul {
right: 0;
}Nous pourrons ajouter une petite animation de transition pour temporiser le changement d’état de notre menu et donner plus de fluidité à notre interface.
.burger_nav input[type="checkbox"]:checked + ul {
right: 0;
transition : all .4s;
}Et son retour animé devra être spécifié dans les règles initiales de l’élément <ul>
.burger_nav ul {
/* Dimensions de l'élément */
height: 100vh;
width: 100vw;
/* Couleur d'arrière plans de l'élément */
background: black;
/* Positionnement de l'élément */
position: fixed;
right: -100vw;
top: 0;
z-index: 2000;
/* Positionnement des enfants de l'élément */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* Gestion de l'animation de l'élément */
transition : all .6s;
}Notre menu burger est maintenant terminé. Il est possible d’affiner ou modifier l’ensemble des règles CSS et la structure HTML en fonction des besoins. Vous pourrez également utiliser le CSS pour remplacer le texte du label par un pictogramme et pourquoi pas le changer selon l’état du bouton. Pour aller encore plus loin, il sera tout a fait envisageable de n’appliquer ce principe de menu burger que pour les petits écrans ou les smartphone en vous aidant des principes du responsive design.
Il ne vous reste plus qu’à expérimenter ce principe, le confronter à votre créativité et l’appliquer à vos besoins.