Télécharger le PDF du cours
Nous n’allons pas ici pouvoir créer quelque chose de parfait. En effet, idéalement, nous voudrons utiliser du JavaScript afin de déclencher l’ouverture et la fermeture du menu mobile. Cependant, nous allons pouvoir déjà faire de belles choses en n’utilisant que du HTML et du CSS !
Ici, nous allons à nouveau nous inspirer de la dernière version de notre menu utilisant le flexbox et modifier certains styles en se concentrant cette fois-ci sur la partie mobile qu’on va vouloir définir comme version standard du menu.
Pour rappel, le code de notre dernier menu flexible était le suivant :
See the Pen Cours HTML CSS 14.4.1 by Pierre (@pierregiraud) on CodePen.
Choix esthétiques pour la version mobile
Lorsqu’on se lance dans un projet de développement, il est important de commencer par définir les « spéc » (spécifications techniques) du projet en question avant de commencer à coder.
En effet, le fait de savoir précisément ce qu’on souhaite obtenir et de définir les différentes choses qu’on va pouvoir utiliser pour l’obtenir évite de faire des allers-retours dans son code, d’en supprimer des parties, d’en modifier d’autres et etc. et fait au final gagner beaucoup de temps.
Pour notre menu mobile, nous avons deux spécifications majeures : nous voulons que les éléments de menu s’affichent en colonne et voulons également que le menu soit replié par défaut pour éviter qu’il ne consomme trop de place sur l’écran.
Squelette HTML du menu responsive
Ici, nous allons récupérer le squelette HTML de notre menu déroulant utilisant le flexbox.
Nous allons toutefois ajouter deux choses à ce code HTML : une balise meta name="viewport" que nous avons découvert dans cette partie ainsi qu’un label avec un élément input type="checkbox" associé qui vont nous servir de « hack » pour nous permettre de déplier et de replier le menu.
L’idée ici va être de n’afficher le menu que si la case a été cochée et de le cacher à nouveau dès que celle-ci est décochée.
Styles CSS du menu responsive
Nous allons donc ici commencer par définir la version de mobile de notre menu qui sera sa version standard. Nous utiliserons ensuite les Media Queries pour définir une version pour grands écrans.
La première chose que l’on va faire ici va être d’appliquer un display : none à notre élément de liste représentant notre menu puisqu’on veut que celui-ci soit caché par défaut.
Nous allons vouloir afficher le menu seulement lorsque notre case à cocher a été effectivement cochée. Dans ce cas-là, nous lui appliquerons un display : flex et un flex-flow : column wrap pour que les éléments s’affichent bien en colonne. Nous allons également déjà en profiter pour appliquer une couleur de fond à tout notre menu.
Pour faire cela en CSS, nous allons utiliser la pseudo-classe :checked qui va nous permettre d’appliquer des styles seulement lorsqu’un élément a été coché. Ici, on veut afficher notre menu lorsque notre case à cocher a été cochée. On va donc appliquer notre pseudo-classe au sélecteur nav input[type=checkbox] et allons pouvoir utiliser le symbole + pour appliquer les styles à notre menu puisque l’élément ul suit directement notre élément input.
Nous avons lié notre input à un label en HTML grâce aux attributs for et id. Cela signifie qu’il suffit à un utilisateur de cliquer sur le label pour cocher et décocher la case. Cela va donc nous permettre de ne pas afficher la case mais d’afficher uniquement le label.
On va vouloir que le label occupe toute la largeur disponible à l’écran. Pour cela, on lui appliquer un display : inline-block et on lui passe une largeur égale à 100% de son élément conteneur. Par ailleurs, nous conservons les styles liés à l’élément nav de notre précédent menu qui nous conviennent très bien.
Voilà pour la première partie du menu. Ensuite, nous allons supprimer tout ce qui dépend de la pseudo classe :hover. En effet, les mobiles ne disposent pas de curseur puisque les écrans sont tactiles et donc cette pseudo classe ne fait aucun sens pour la navigation sur mobile.
De gros changements vont être faits ici par rapport à notre version de menu précédente. Nous allons ici vouloir afficher l’intégralité du contenu de nos sous menus en toute circonstance.
On va donc en profiter pour supprimer ce qui était lié aux propriétés position. Pour ne pas que l’affichage de notre menu pousse les autres éléments vers le bas, nous allons plutôt appliquer une position : absolute au div class="conteneur-nav" créé pour cela ainsi qu’une largeur égale à 100%.
On va également en profiter pour supprimer les styles liés au pseudo-élément ::after.
Voilà tout pour notre version mobile. Il n’y a plus qu’à s’occuper de la version bureau qu’on avait déjà concrètement créée lors du dernier exercice.
Nous allons utiliser ici les Media Queries et cibler en particulier les appareils qui ont un écran de taille supérieure à 980px. Pour ces écrans, on va vouloir que notre menu s’affiche de la même manière que lors de l’exercice précédent.
Pour minimiser la taille de notre code et économiser un maximum nos ressources, nous n’allons pas faire de copier-coller du menu précédent ici (ce qui dans tous les cas ne fonctionnerait pas bien car nous avons modifié la structure HTML du menu) mais ne préciser que les styles qui doivent changer.
Ici, nous allons déjà nous occuper des éléments qui ont été rajoutés pour le menu mobile. Nous allons passer une position : static à notre div class="conteneur-nav" afin qu’il n’interfère pas avec notre menu et un display : none à notre label et à notre input. On ne peut pas donner de display : none à notre div ici car celui-ci contient tout notre menu.
Nous allons ensuite rendre à notre menu principal sa disposition en ligne. Ici, il faut également faire bien attention à gérer le cas où un utilisateur s’amuse à jouer avec la taille de la fenêtre et où la case à cocher a été cochée avant que le menu ne se transforme en sa version bureau. On va donc également appliquer un flex-flow : row wrap lorsque c’est le cas pour que notre menu s’affiche bien dans tous les cas.
Aucun piège pour le reste du menu principal : on se contente de rétablir les styles utilisés dans l’exercice précédent avec notamment l’utilisation de la propriété position :
Le dernier petit « piège » va se trouver dans le sélecteur qui cible nos sous-menus pour les afficher en colonne lorsque l’utilisateur passe sur un élément du menu principal : on utilise le symbole > dans ce sélecteur qui va cibler les enfants directs.
Ici, il faut bien se souvenir qu’on a imbriqué un élément div entre notre nav et notre menu principal ul. Il faudra donc le mentionner au milieu de ce sélecteur.
Voilà, notre menu est cette fois-ci définitivement terminé et il va être compliqué d’aller plus loin avec le HTML et le CSS.
Si cet exercice vous a semblé compliqué, encore une fois, ne vous inquiétez pas : c’est tout à fait normal ! Ce menu utilise plusieurs fonctionnalités parmi les plus avancées du HTML et du CSS et il est normal que vous n’ayez pas encore tout à fait assimilé comment toutes ces fonctionnalités peuvent fonctionner ensemble.
Encore une fois, l’assimilation et la compréhension ne pourra se faire complétement qu’en pratiquant régulièrement et en se confrontant aux difficultés et en cherchant toujours à comprendre les différents comportements obtenus.
Vous pourrez trouver le code complet du menu ci-dessous :
See the Pen Cours HTML CSS 14.4.2 by Pierre (@pierregiraud) on CodePen.
