La navigation est un élément essentiel de l'expérience utilisateur sur un site web. Un menu bien structuré permet aux utilisateurs de trouver rapidement et facilement ce qu'ils recherchent, augmentant ainsi leur engagement et réduisant le taux de rebond.
Un menu déroulant est un composant d'interface utilisateur qui permet de regrouper plusieurs liens sous un seul élément de menu principal. Lorsqu'un utilisateur survole ou clique sur cet élément, un sous-menu s'affiche, révélant les liens cachés. Cette technique est particulièrement utile pour organiser un grand nombre de liens et optimiser l'espace disponible dans la barre de navigation. Au delà de la simple esthétique, le menu déroulant joue un rôle important dans l'architecture de l'information de votre site. En regroupant des informations similaires, vous facilitez la compréhension et la navigation de vos visiteurs.
Les fondamentaux du HTML pour un menu déroulant
Avant de plonger dans le code, il est important de comprendre les bases du HTML nécessaires à la création d'un dispositif de navigation déroulant. Nous allons utiliser les balises `
Structure de base
La balise `
Voici un exemple de code HTML minimaliste pour un menu déroulant simple :
<nav> <ul> <li><a href="#">Accueil</a></li> <li> <a href="#">Services</a> <ul class="submenu"> <li><a href="#">Service 1</a></li> <li><a href="#">Service 2</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> -
<nav>: Définit la section de navigation. -
<ul>: Crée une liste non ordonnée pour les éléments de menu. -
<li>: Représente un élément de menu. -
<a>: Crée un lien vers une autre page. -
class="submenu": Une classe CSS pour styliser le sous-menu.
Hiérarchie du menu
Pour créer des sous-menus imbriqués, il suffit d'ajouter une autre liste non ordonnée `
- ` à l'intérieur d'un élément de liste `
- `. Cela permet de créer une structure hiérarchique complexe, idéale pour organiser un grand nombre de liens. Il est important de maintenir une hiérarchie claire et logique pour éviter de perdre l'utilisateur.
Voici un exemple de code HTML plus complexe montrant plusieurs niveaux de sous-menus :
<nav> <ul> <li><a href="#">Accueil</a></li> <li> <a href="#">Services</a> <ul class="submenu"> <li><a href="#">Service 1</a></li> <li> <a href="#">Service 2</a> <ul class="submenu"> <li><a href="#">Sous-Service A</a></li> <li><a href="#">Sous-Service B</a></li> </ul> </li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> Liens internes et externes
L'attribut `target` permet de spécifier comment le lien doit être ouvert. Par défaut, le lien s'ouvre dans le même onglet. Si vous souhaitez ouvrir le lien dans un nouvel onglet, vous pouvez utiliser `target="_blank"`. Il est généralement recommandé d'utiliser `target="_blank"` uniquement pour les liens externes, car cela permet de garder l'utilisateur sur votre site plus longtemps.
Styliser le menu déroulant avec CSS
Une fois la structure HTML en place, il est temps de styliser le menu déroulant avec CSS. Le CSS permet de contrôler l'apparence du menu, notamment la couleur de fond, la couleur du texte, la police de caractères, la taille des liens, et bien plus encore. Un menu bien stylisé contribue à l'identité visuelle de votre site et améliore l'expérience utilisateur.
Suppression du style par défaut
Les navigateurs appliquent un style par défaut aux listes non ordonnées, notamment des puces, des marges et du padding. Il est important de supprimer ces styles par défaut pour avoir un contrôle total sur l'apparence de l'élément de navigation. Cela se fait en utilisant les propriétés CSS `list-style: none;`, `margin: 0;`, et `padding: 0;`.
Voici le code CSS pour réinitialiser le style par défaut :
nav ul { list-style: none; margin: 0; padding: 0; } Apparence du menu principal
Vous pouvez définir la couleur de fond, la couleur du texte, la police de caractères et la taille des liens principaux en utilisant les propriétés CSS `background-color`, `color`, `font-family`, et `font-size`. Il est important de choisir des couleurs qui contrastent bien entre elles pour une bonne lisibilité. Ajouter des bordures ou des ombres subtiles peut aussi améliorer la visibilité du menu.
Apparence des sous-menus
Pour distinguer les sous-menus du menu principal, vous pouvez utiliser des couleurs différentes. La propriété `position: absolute;` est essentielle pour positionner correctement les sous-menus. Elle permet de sortir les sous-menus du flux normal du document et de les positionner par rapport à leur parent.
L'utilisation de `position: absolute;` nécessite également de définir `position: relative;` sur l'élément parent (l'élément `
Effets au survol (hover)
Les effets au survol permettent de donner une indication visuelle à l'utilisateur lorsqu'il survole un lien. Vous pouvez modifier la couleur de fond ou la couleur du texte, ou ajouter des transitions subtiles en utilisant la propriété CSS `transition`. Un effet de survol bien conçu améliore l'interactivité et l'expérience utilisateur.
Voici un exemple de code CSS pour créer un effet de survol élégant :
nav a:hover { background-color: #555; transition: background-color 0.3s ease; } Masquer et afficher les sous-menus
Par défaut, les sous-menus doivent être masqués. Cela se fait en utilisant la propriété CSS `display: none;`. Pour afficher les sous-menus au survol, vous pouvez utiliser la pseudo-classe `:hover` et la propriété `display: block;` (ou `display: flex;` selon la mise en page). Utiliser `opacity: 0;` et `opacity: 1;` avec une transition permet de créer un effet de fondu lors de l'affichage des sous-menus.
Conseils de style
Il est crucial de maintenir une cohérence visuelle avec le reste du site web. Utilisez les mêmes couleurs, polices et styles que ceux utilisés sur les autres pages. Choisissez des couleurs contrastées pour une bonne lisibilité, et utilisez des polices de caractères appropriées. Un menu bien conçu doit s'intégrer harmonieusement avec le reste du design du site.
Rendre le menu déroulant responsive (adaptable aux écrans) : media queries
Avec l'augmentation de l'utilisation des appareils mobiles, il est essentiel de rendre le menu déroulant responsive. Cela signifie qu'il doit s'adapter aux différentes tailles d'écran, des smartphones aux tablettes en passant par les ordinateurs de bureau. Les Media Queries sont un outil puissant pour y parvenir.
Introduction au responsive design
Le responsive design est une approche de conception web qui vise à créer des sites web qui s'adaptent automatiquement à la taille de l'écran de l'utilisateur. Cela permet d'offrir une expérience utilisateur optimale, quel que soit l'appareil utilisé. Un menu déroulant responsive est un élément clé d'un site web responsive.
Utilisation des media queries
Les Media Queries permettent d'appliquer des styles CSS différents en fonction de la taille de l'écran, de la résolution, de l'orientation, et d'autres caractéristiques de l'appareil. Elles se définissent en utilisant la règle `@media` suivie d'une condition et d'un bloc de styles CSS.
Voici un exemple de code CSS utilisant des Media Queries pour adapter le menu aux smartphones et tablettes :
@media (max-width: 768px) { nav ul { flex-direction: column; } nav li { margin-right: 0; margin-bottom: 10px; } .submenu { position: static; display: none; /* Masquer par défaut sur mobile */ } nav li:hover .submenu { display: block; /* Afficher au clic ou au tap sur mobile */ } } -
@media (max-width: 768px): S'applique aux écrans dont la largeur est inférieure ou égale à 768 pixels (tablettes et smartphones). -
flex-direction: column;: Modifie la direction des éléments de menu pour les afficher verticalement. -
position: static;: Supprime le positionnement absolu des sous-menus sur mobile. -
display:none;: Cache le sous-menu.
Transformer le menu en menu hamburger
Sur les petits écrans, il est souvent préférable de remplacer le menu déroulant classique par un menu hamburger. Le menu hamburger est un bouton qui, lorsqu'il est cliqué, affiche un menu vertical. Cela permet d'économiser de l'espace et de simplifier la navigation sur les appareils mobiles. La conversion en menu Hamburger est une pratique recommandée par les experts en UX.
Voici le code HTML pour un bouton hamburger :
<button class="hamburger"> <span></span> <span></span> <span></span> </button> Voici le code CSS pour styliser le bouton hamburger :
.hamburger { display: none; /* Masqué par défaut sur les grands écrans */ flex-direction: column; justify-content: space-between; width: 30px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; } .hamburger span { height: 3px; width: 100%; background-color: white; transition: all 0.3s ease; } @media (max-width: 768px) { .hamburger { display: flex; /* Affiché sur les petits écrans */ } nav ul { display: none; /* Masqué par défaut sur mobile */ flex-direction: column; position: absolute; top: 60px; left: 0; width: 100%; background-color: #333; padding: 10px; } nav ul.active { display: flex; /* Affiché lorsque le bouton est cliqué */ } } Le JavaScript est nécessaire pour gérer l'ouverture et la fermeture du menu hamburger. Nous verrons cela dans la section suivante.
Optimisation pour les écrans tactiles
Sur les écrans tactiles, il est important de s'assurer que les liens sont suffisamment espacés pour être facilement cliquables. Vous pouvez augmenter l'espacement entre les liens en utilisant la propriété CSS `padding`. L'utilisation de `touch-action: manipulation;` permet d'éviter les problèmes de défilement intempestifs. Une optimisation pour les écrans tactiles est devenue indispensable aujourd'hui.
| Facteur | Impact sur la navigation mobile |
|---|---|
| Espacement insuffisant des liens | Augmente le nombre de clics manqués et la frustration de l'utilisateur |
| Défilement intempestif | Perturbe la navigation et rend le site difficile à utiliser |
Améliorer l'interactibilité avec JavaScript (facultatif mais recommandé)
Bien que le HTML et le CSS suffisent pour créer un menu déroulant de base, l'utilisation de JavaScript permet d'améliorer considérablement son interactivité. Le Javascript permet des animations plus fluides, une persistance du menu, et une meilleure compatibilité cross-browser.
Pourquoi utiliser JavaScript ?
JavaScript permet d'ajouter des fonctionnalités dynamiques à l'élément de navigation déroulant, comme l'ouverture et la fermeture du menu mobile, la gestion des clics sur les éléments de menu, et l'ajout de transitions fluides. Un menu interactif est plus agréable à utiliser et améliore l'expérience utilisateur.
Gestion de l'ouverture et de la fermeture du menu mobile
Pour gérer l'ouverture et la fermeture du menu hamburger, vous pouvez utiliser JavaScript pour ajouter ou supprimer une classe CSS sur le menu lorsque le bouton hamburger est cliqué. Cela permet de masquer ou d'afficher le menu en fonction de l'état du bouton.
Voici un exemple de code JavaScript simple et clair pour cette fonctionnalité :
const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('nav ul'); hamburger.addEventListener('click', () => { navMenu.classList.toggle('active'); }); Gestion des clics sur les éléments de menu
Pour une meilleure expérience utilisateur sur mobile, il est souvent souhaitable de fermer automatiquement le menu hamburger lorsque l'utilisateur clique sur un lien. Cela peut être fait facilement avec JavaScript en ajoutant un écouteur d'événements sur chaque lien du menu.
Animation
JavaScript peut être utilisé pour ajouter des animations fluides à l'ouverture et à la fermeture des sous-menus. Cela peut être fait en utilisant les CSS Transitions et en modifiant les propriétés CSS du menu avec JavaScript. Les animations améliorent l'attrait visuel du menu et rendent l'expérience utilisateur plus agréable.
| Type d'animation | Description |
|---|---|
| Fondu (Fade) | Apparition progressive du sous-menu |
| Glissement (Slide) | Déplacement vertical ou horizontal du sous-menu |
Accessibilité : créer un menu inclusif pour tous
L'accessibilité web est essentielle pour garantir que votre site est utilisable par tous, y compris les personnes handicapées. Un menu accessible permet aux utilisateurs naviguant avec un clavier ou un lecteur d'écran d'accéder facilement à l'ensemble du site.
Utilisation des attributs ARIA
Les attributs ARIA (Accessible Rich Internet Applications) fournissent des informations supplémentaires aux technologies d'assistance, comme les lecteurs d'écran, sur le rôle, l'état et les propriétés des éléments d'interface utilisateur. Pour un menu déroulant, on peut utiliser les attributs suivants :
-
aria-haspopup="true": Indique que l'élément a un menu déroulant ou une liste qui apparaît. -
aria-expanded="false": Indique si le menu déroulant est actuellement visible ou non. La valeur est mise à jour dynamiquement avec JavaScript. -
aria-label="Menu principal": Fournit une description du menu pour les lecteurs d'écran. -
role="menu"sur la balise<ul>: Indique que l'élément est un menu. -
role="menuitem"sur chaque balise<li>dans le menu : Indique que l'élément est un élément de menu.
Navigation au clavier
Assurez-vous que les utilisateurs peuvent naviguer dans le menu en utilisant les touches Tab, Flèches, Entrée et Espace. Utilisez CSS pour mettre en évidence l'élément actuellement sélectionné ( :focus ).
Test avec un lecteur d'écran
Testez votre menu avec un lecteur d'écran comme NVDA ou VoiceOver pour vous assurer qu'il est correctement interprété et utilisable.
Contraste des couleurs
Assurez-vous que le contraste des couleurs entre le texte et l'arrière-plan est suffisant pour les personnes malvoyantes. Utilisez des outils comme WebAIM Contrast Checker pour vérifier le contraste.
Les erreurs à éviter lors de la création d'un menu déroulant
La création d'un menu déroulant performant nécessite d'éviter certaines erreurs courantes qui peuvent nuire à l'expérience utilisateur, à l'accessibilité et au référencement de votre site.
- Trop de niveaux d'imbrication : Un menu avec trop de sous-menus peut être difficile à naviguer. Limitez le nombre de niveaux à 2 ou 3 maximum.
- Manque de contraste : Un contraste insuffisant entre le texte et l'arrière-plan rend la lecture difficile.
- Absence de navigation au clavier : Un menu non navigable au clavier est inaccessible aux personnes handicapées.
- Non-respect des standards d'accessibilité : Ignorer les attributs ARIA et les tests avec des lecteurs d'écran rend le menu inutilisable pour de nombreux utilisateurs.
- Menu non responsive : Un menu non adapté aux appareils mobiles offre une mauvaise expérience utilisateur sur les smartphones et tablettes.
- Utilisation excessive de JavaScript : Un menu trop complexe en JavaScript peut ralentir le chargement de la page et nuire au référencement.
Conclusion
La création d'un menu déroulant HTML intuitif, responsive et accessible est un investissement précieux pour tout site web. En suivant les étapes décrites dans cet article, vous pouvez créer un menu qui améliore considérablement l'expérience utilisateur et contribue au succès de votre site. N'hésitez pas à expérimenter avec les différents styles et fonctionnalités pour créer un menu qui correspond parfaitement à vos besoins.