Menu responsive déroulant en HTML/CSS

Le menu responsive est incontournable dans la création de site internet optimisé pour une bonne expérience utilisateur. Il est clair que les thèmes WordPress les plus populaires utilisent une librairie ou bien des fonctions déjà préconçu pour créer le menu de navigation. De sorte, il est automatiquement régler en fonction de la taille de l’écran de l’internaute. Aujourd’hui, nous allons voir comment coder manuellement un menu responsive, rien qu’en utilisant les technologies HTML et CSS.

Menu Responsive déroulant

Lors de l'intégration d'un design sur WordPress, la création du menu est une étape importante et à ne pas négliger.

Étapes : Création d'un menu responsive déroulant

Créer le corp de la page en HTML

Pour créer une page en HTML, vous pouvez copier ce code et l’enregistrer dans un fichier .html.


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'un menu responsive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="Le_menu">
<div class="Toutes_les_pages">
<a href="#">Accueil</a>
<a href="#">Actualité</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>

Menu HTML simple

Pour l’instant, le code HTML est basique et contient simplement la balise <nav> contenant une classe. J’y ai également annoté un menu de navigation très simplifié, qui n’est pour l’instant pas stylisé. Cependant, j’ai déjà créer le lien vers mon fichier style.css dans la balise <head>.

Styliser le menu en CSS

Maintenant que le menu de navigation est en place, il faut développer son style en CSS et l’adapter à vos besoins en terme de mise en page.

 

Par exemple, si vous souhaitez que votre menu prennent une place de 8 colonnes sur 12, il faudra l’indiquer clairement dans le code.

 

Dans le cas où vous utilisez Bootstrap, vous pouvez vous servir la balise <div class= »col-lg-8″> pour intégrer votre menu.

 

Dans l’exemple que je présente sur cette page, le menu comprendra 100% de la largeur de l’écran. Voici le code CSS qui stylisera votre menu :

.Le_menu {
margin: 100px auto;
width: 50%;
height: 100px;
background: #48435C;
}

.Le_menu .Toutes_les_pages
{
display: flex;
justify-content: space-around;
align-items: center;
}

.Le_menu .Toutes_les_pages a 
{
width: 20%;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
text-decoration: none;
font-family: Roboto, sans-serif;
color: white;
}

.Le_menu a:hover 
{
background: #5A5766
}
Design du menu en pleine largeur

Ajouter un menu hamburger personnalisé

Maintenant que votre menu est parfait sur une taille d’écran orientée PC, il faut s’occuper du mobile. Il faudra donc créer le menu hamburger ( en forme de trois traits horizontaux ), qui permettra de cliquer dessus et déplier le menu. Par contre, il faut configurer ce menu hamburger pour qu’il ne soit accessible que sur mobile, et pas sur ordinateur.

Label

Ce label, c’est en faite le code qui permet de créer le menu hamburger. Vous pouvez le placer ou vous le souhaitez sur votre page ( comme par exemple en position : absolute ). Dans cet exemple, je vais le mettre juste à la suite de la classe Toutes_les_pages.

<label for="toggle" class="label-hamburger">☰</label>
Ajout de la balise
La balise

CheckBox

Nous allons également ajouter un <input> après ce <label> qui nous servira un peu plus tard. Voici le code à intégrer :

<input type="checkbox" id="toggle">
Ajout de la checkbox
Ajout de la checkbox

Modifier l’apparence du menu sur mobile

Maintenant que votre menu hamburger est parée, alors il faudra styliser le menu sur téléphone. Pour cela, un jolie petit bout de code est à intégrer dans votre fichier CSS. En voici un exemple que vous pourrez adapter à vos besoins ( couleurs, typographie… )

@media all and (max-width: 991px)
{
.Le_menu 
{
height: 60px;
}

.Le_menu .Toutes_les_pages
{
display: none;
}

.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}
}
Design du menu hamburger sur téléphone

Activer le menu sur mobile

Une fois que votre menu est désigné pour ordinateur et pour mobile, il faudra écrie un nouveau code en CSS permettant d’afficher le menu sur téléphone, qu’après avoir cliqué sur le menu hamburger. Ajouter donc ceci à votre fichier CSS :

label, #toggle
{
display: none;
}

@media all and (max-width: 991px)
{
.Le_menu 
{
height: 60px;
}

.Le_menu .Toutes_les_pages 
{
display: none;
flex-direction: column;
background: #48435C;
height: 220px;
}

.Le_menu .Toutes_les_pages a {
width: 50%;
}

.label-hamburger
{
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-size: 40px;
color: white;
cursor: pointer;
}

#toggle:checked + .Toutes_les_pages {
display: flex;
}
}
Fonction au clic - menu qui se déroule

Découvrez également d'autres sujets dans le développement web