Télécharger le PDF du cours
Étant donné que c’est notre premier « vrai » exercice, nous allons progresser ensemble.
Commençons avec un conseil d’ordre général : lorsqu’on se lance dans un projet de code, il est rarement bénéfique de commencer immédiatement à coder. Au contraire, on commencera généralement par clarifier ce qu’on souhaite obtenir et par définir les différents langages, objets, etc. que nous allons devoir utiliser pour arriver au résultat voulu.
Procéder comme cela limite les risques d’avoir à revenir en arrière et à réécrire son code au milieu du projet car on n’avait pas pensé à ceci ou cela et fait au final gagner beaucoup de temps !
Ici, le projet est très simple puisqu’on souhaite simplement créer un menu horizontal simple. Pour créer des menus, nous allons utiliser des éléments de liste ul que nous allons ensuite mettre en forme en CSS.
Squelette HTML du menu
Nous allons commencer par créer le squelette de notre menu en HTML avant de le mettre en forme en CSS.
Ici, nous allons utiliser une liste ul qui va représenter notre menu. Chaque élément de liste li va représenter un onglet de notre menu.
Comme un menu est utilisé pour naviguer entre les pages d’un site, il va falloir que nos onglets de menu soient cliquables. Nous allons donc ajouter des éléments a dans nos éléments de liste. Pour cet exercice, je laisserai mes liens vides en écrivant href="#".
En pratique, nous devrons également placer notre menu principal de navigation dans un élément structurant nav qui sert à indiquer aux navigateurs et moteurs de recherche que ce qui est dans l’élément nav est notre menu principal de navigation.
Voici donc le code HTML de notre menu et le résultat dans le navigateur :
Pour le moment, il s’agit visuellement d’une simple liste non ordonnée et cela ne ressemble pas à un menu. C’est tout à fait normal : je vous rappelle que la mise en page est du ressort du CSS.
Mise en forme du menu en CSS
Nous allons maintenant transformer notre liste HTML en quelque chose qui ressemble visuellement à un menu en CSS.
Ici, nous allons déjà commencer par effectuer un reset des marges intérieures et extérieures des différents éléments de notre page pour nous assurer d’avoir un affichage cohérent d’un navigateur à l’autre. Profitons-en également pour définir une liste de polices d’écriture pour notre page.
Ensuite, nous allons enlever les puces devant nos éléments de liste. Nous allons pouvoir faire cela en utilisant la propriété list-style-type avec sa valeur none.
Ici, nous allons cibler uniquement la liste de notre menu avec le sélecteur nav ul afin de ne pas enlever les puces des autres listes qui pourraient potentiellement être affichées dans notre page.
A partir d’ici, nous avons plusieurs solutions en CSS pour mettre nos éléments de liste sur la même ligne. Les deux solutions fonctionnant le mieux ici vont être d’ajouter soit un display : inline-block, soit un float : left à nos éléments de liste.
Ici, je vais plutôt opter pour un float : left pour n’avoir aucune espace entre mes éléments de liste et faciliter la mise en forme.
En effet, je vous rappelle qu’une espace va se créer entre différents éléments possédant un display : inline-block si ces éléments ne sont pas collés dans votre code.
Cette espace, généralement de 4px, est l’équivalent d’une espace insécable. On peut le supprimer en collant les différents éléments dans le code.
Comme on applique un float : left à tous nos éléments de liste, nous allons également utiliser le clearfix avec le pseudo-élément ::after que nous allons appliquer à la liste en soi pour éviter que sa hauteur ne soit nulle.
C’était l’étape la plus complexe du menu. Nous allons ensuite espacer nos différents onglets de menu. Pour cela, on va attribuer une largeur égale à 100% divisée par le nombre d’éléments de menu à chaque élément de menu.
Nous allons également pouvoir centrer le contenu textuel de chacun de nos éléments de menu dans l’élément de menu en appliquant un text-align : center aux différents éléments.
Note : Ici, notre élément nav occupe 100% de la largeur disponible par défaut et on dirait donc que le menu est centré dans la page. Cependant, ce n’est pas le cas (il suffit de lui attribuer une largeur plus petite pour s’en apercevoir). Pour centrer le menu, on pourra appliquer une largeur explicite à l’élément nav ainsi que margin : 0 auto.
Une fois arrivé ici, on s’aperçoit d’un problème d’ergonomie : seul le texte est cliquable et non pas tout l’espace dans chaque élément de menu. Cela est dû au fait que l’élément a est un élément inline. Changeons donc ce comportement par défaut et profitons-en pour enlever le trait de soulignement et pour changer la couleur de nos textes.
Ensuite, nous allons vouloir mettre en relief un élément de menu lorsque celui-ci est survolé par l’utilisateur. Nous allons pouvoir faire cela en utilisant la pseudo-classe :hover.
On va par exemple pouvoir changer la couleur du texte et ajouter une bordure basse lorsqu’un utilisateur passe sa souris sur un élément de menu.
Ici, on se retrouve face à un autre problème d’ergonomie : en effet, en ajoutant une bordure durant l’état :hover, la hauteur de l’élément est modifiée de la taille de la bordure et cela va faire bouger les différents contenus sous le menu.
La façon la plus simple de résoudre ce problème est d’ajouter une bordure de même taille mais de couleur transparente à nos éléments a dans leur état normal. Ainsi, les éléments auront toujours la même hauteur.
Finalement, on va pouvoir aérer notre menu en hauteur. Ici, je vous propose d’ajouter des padding haut et bas de 10px à nos éléments a. Cela aura également pour effet de séparer la bordure basse de ces éléments de leur contenu pour un meilleur rendu visuel.
Pour rendre enfin notre menu sticky, il va suffire d’ajouter une position :sticky à notre élément nav avec une propriété top :0px si on souhaite que le menu reste collé en haut de la page. Nous allons également en profiter pour ajouter une couleur de fond au menu.
Notez que pour constater l’effet du positionnement sticky il va falloir pouvoir descendre dans la page. N’hésitez donc pas à ajouter un conteneur div sous le menu et à lui donner une hauteur de 2000px par exemple.
Voilà tout pour ce menu simple créé en HTML et en CSS. N’hésitez pas à modifier ou à ajouter des styles à ce menu ! Vous pouvez trouver le code complet du menu ci-dessous :
See the Pen Cours HTML CSS 10.4.1 by Pierre (@pierregiraud) on CodePen.
