Création d'un menu déroulant responsive avec HTML et CSS: Guide complet
Ah, les tailles d'écran ! Elles sont si variées pour les différents appareils que nous utilisons pour naviguer sur le web. C'est une véritable jungle qui pose problème aux webmasters. En effet, ils doivent s'adapter à toutes ces tailles d'écran, tel un caméléon qui change de couleur pour se fondre dans son environnement. Mais ne vous inquiétez pas, aujourd'hui je vais vous montrer comment créer un menu déroulant magnifique et réactif qui s'adapte parfaitement à toutes les tailles d'écran. Le tout en utilisant simplement HTML, CSS et la bibliothèque d'icônes Font Awesome. Êtes-vous prêt à plonger dans cette aventure HTML et CSS ?
Commençons par examiner la structure du menu, le saint Graal de notre navigation web. Dans notre quête, nous aurons besoin d'un en-tête (header) pour accueillir notre précieux menu. L'en-tête agit comme le gardien du temple, protégeant notre contenu avec fierté. À l'intérieur de l'en-tête, nous placerons un élément <nav><\nav> qui contiendra notre menu déroulant, sans oublier d'inclure la bibliothèque d'icônes dans l'en-tête.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu-Responsive</title> <link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/15cf292b55.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Realisation</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
Et voilà ! Notre structure HTML est prête à accueillir notre magnifique menu. Mais attendez, nous avons besoin d'un peu de CSS pour rendre tout cela fonctionnel et esthétiquement plaisant. Commençons par l'embellir un peu. Réinitialisons les marges et les paddings par défaut imposés par les navigateurs. Une routine habituelle !
*{
padding: 0;
margin: 0;
font-family: Montserrat, sans-serif;
}
Toujours choisir sa propre police ! On ne sait jamais à quoi s'attendre avec les navigateurs. Je préfère choisir moi-même l'arrière-plan. Alors, je crée un dégradé pour rendre le corps (body) agréable. Assurez-vous de choisir des couleurs qui se marient bien ensemble, comme le duo Batman et Robin.
body {
background: linear-gradient(90deg, #016495, #01b8b8 40%, #016495);
}
Les liens représentent les onglets de notre menu. Je vais leur donner un aspect simple.
a {
color: white;
text-decoration: none;
display: inline-block;
padding: 16px;
margin: 5px;
}
Maintenant, le conteneur de la liste des onglets, le fameux "ul". Je vais le positionner horizontalement (j'ai souvent du mal à distinguer les mots "horizontal" et "vertical", je suis vraiment maladroit).
ul {
display: flex;
list-style: none;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
@media all and (max-width: 768px) {
ul {
visibility: hidden;
flex-direction: column;
border: 1px solid #20b5ff;
position: relative;
top: 15px;
border-radius: 15px;
}
}
J'aimerais ajouter une petite barre en bas du menu. Un peu plus de piment, mais en la simplifiant en même temps.
ul::after {
height: 3px;
width: 35%;
content: "";
background-color: white;
position: absolute;
bottom: 0;
border-radius: 20px;
display: inline-block;
text-align: center;
}
Le menu doit toujours être fixé en haut pour être visible par l'internaute.
nav {
position: sticky;
top: 0;
width: 100%;
}
Pour donner vie à notre menu, nous allons utiliser un petit tour de passe-passe avec une case à cocher (checkbox). Oui, oui, vous avez bien entendu ! Une simple case à cocher va nous permettre de masquer et révéler notre menu. C'est comme appuyer sur un bouton pour afficher le menu caché. Voici le code HTML avec notre case à cocher et notre icône de menu :
<header>
<nav>
<input type="checkbox" id="cb">
<label for="cb">
<i id="open-menu" class="fa-solid fa-bars"></i>
</label>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Realisation</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Ah, la fameuse case à cocher ! Nous devons la masquer, telle un caméléon qui ne veut pas se faire repérer. Voici comment faire disparaître notre case à cocher tout en maintenant notre icône de menu visible :
input {
appearance: none;
}
Il y a aussi l'icône du menu qui est apparue. Nous devons donc la styliser et la cacher, mais seulement pour les écrans de grande taille. C'est parti !
.fa-bars {
position: relative;
top: 28px; right: -16px;
font-weight: 700;
font-size: 24px;
color: white;
padding: 10px;
border-radius: 8px;
backdrop-filter: blur(10px);
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
display: inline-block;
visibility: hidden;
}
Voilà qui est beau ! Un icône de menu joliment décoré mais caché. Il faut le faire apparaître pour les écrans de petite taille.
@media all and (max-width: 768px) {
.fa-bars {
visibility: visible;
}
}
Et si nous nous occupions de l'apparition de notre menu lorsque l'on appuie sur l'icône du menu ? Je vais vous expliquer le mécanisme. En fait, notre icône de menu est associée à la case à cocher grâce au label qui le contient. La case à cocher fonctionne comme tous les éléments du formulaire. Plus précisément, avec l'attribut 'for' qui a la valeur 'cb' (pour checkbox) dans le label, nous pouvons la lier à la case à cocher en lui donnant un 'id' de valeur 'cb'. C'est aussi simple que ça ! Ainsi, lorsque l'on appuie sur l'icône du menu, en réalité, la case à cocher est également cochée. Maintenant que vous avez compris cela, nous pouvons passer au CSS.
Comment faire apparaître notre menu ?
Eh bien, pour faire apparaître notre menu lorsque l'on appuie sur le bouton du menu, il suffit de vérifier si la case à cocher est cochée grâce au CSS avec la pseudo-classe ':checked'. Cette pseudo-classe nous permet de cibler la case à cocher lorsqu'elle est cochée. Cela fonctionne comme si nous avions ajouté une classe à la checkbox au moment où elle est cochée, mais ici il s'agit précisément de la checkbox qui a l'id 'cb'. Ensuite, nous utilisons le sélecteur appelé 'opérateur d'adjacence général' pour cibler la liste des onglets (notre menu) qui se trouve juste après notre checkbox. Voici le code.
#cb:checked ~ ul {
visibility: visible;
}
Maintenant que notre mécanisme qui consiste à cacher ou dévoiler le menu est prêt, il est temps d'être créatif et de donner un peu de style à notre menu pour les versions d'écran de petite taille. Comme un grand couturier, nous allons sublimer notre menu. Il faut lui donner une allure digne des plus grands restaurants étoilés. Jouez avec les marges, les couleurs, etc., pour créer une expérience visuelle unique. N'oubliez pas que le menu est comme le chef d'orchestre de votre site, il guide vos visiteurs vers les délices qu'ils recherchent. Revenons un peu plus haut dans notre code, à la partie où nous avons caché notre menu pour les petites tailles d'écran, et commençons à y ajouter du code qui aura des effets uniquement pour les écrans de petite taille.
@media all and (max-width: 768px) {
ul {
visibility: hidden;
flex-direction: column;
border: 1px solid #20b5ff;
position: relative;
top: 15px;
border-radius: 15px;
}
}
Et voilà ! Avec ces éléments CSS, nous avons construit la base de notre menu déroulant magique. Mais ce menu n'est pas parfait. Il reste quelques fonctionnalités manquantes à ajouter, comme par exemple un icône différent pour fermer le menu, etc.
Alors, à vous de jouer ! Complétez ces parties manquantes avec votre touche personnelle, et vous obtiendrez un menu déroulant responsive et fonctionnel qui fera briller les yeux de vos visiteurs. Amusez-vous bien et n'hésitez pas à partager, à laisser un commentaire et à liker ceci si vous avez aimé.
Je suis Gedeon Mabengi, développeur web. Si vous avez un projet web et que vous souhaitez en discuter, n'hésitez pas à me contacter.
