Création d’un menu horizontal sticky en HTML et CSS

Au cours des dernières leçons, nous avons vu beaucoup de nouveaux concepts HTML et CSS. Il est maintenant temps de mettre ce qu’on a vu en application en créant un menu simple horizontal entièrement en HTML et en CSS.

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

Squelette HTML d'un menu horizontal sticky HTML et CSS

Résultat menu horizontal HTML sans CSS

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.

Reset CSS pour notre menu HTML et CSS et définition de la police

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.

Modification du list-style et suppression des puces pour notre menu HTML et CSS horizontal

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.

Menu horizontal HTML et CSS float left et clearfix

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.

On centre le contenu des onglets de notre menu HTML et CSS

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.

On centre notre menu HTML et CSS dans la page avec margin 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.

Changement display couleur lien menu HTML et CSS

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.

Changement de la couleur du texte lors du survol hover du menu HTML et CSS

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.

Ajout bordure éléments menu HTML et CSS

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.

Ajout marge interne padding élément menu HTML et CSS

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.

Ajout position sticky top au menu horizontal HTML et CSS

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.

Laisser un commentaire