Menu responsive déroulant en HTML/CSS
Publié leLe 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. Lors de l’intégration d’un design sur WordPress, la création du menu est une étape importante et à ne pas négliger.
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> 
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 } 
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> 
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"> 
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; } } 
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; } }
Découvrez également d'autres sujets dans le développement web
Auteur Benabdelhak Kevin
Graphiste Freelance disponible 7j/7
En tant que passionné du webdesign, du graphisme et du référencement naturel, je partage des informations et vous propose des solutions pertinentes pour votre communication.
