Générateur de menu responsive

Générateur de menu responsive: à quoi ça sert

Tout site a besoin d'un menu qui fonctionne sur ordinateur et sur mobile. Ce générateur construit le menu de navigation avec vos liens : côte à côte sur les grands écrans et avec un bouton hamburger en dessous du point de rupture que vous choisissez.

Le code suit les bonnes pratiques d'accessibilité : élément nav avec étiquette, bouton avec aria-expanded et aria-controls, fermeture avec la touche Échap et au toucher d'un lien, et animation de l'icône respectant la préférence pour moins de mouvement. L'aperçu montre le résultat en taille ordinateur et mobile en même temps.

Mode d’emploi

1. Écrivez le nom du site et les liens.
2. Choisissez les couleurs, le point de rupture et si le dernier lien devient un bouton.
3. Copiez le HTML, le CSS et le JavaScript ou téléchargez la page d'exemple.

Quand l’utiliser

• Site vitrine fait à la main.
• Page d'atterrissage sans framework.
• Remplacer un ancien menu qui ne fonctionne pas sur mobile.

Questions fréquentes

Le menu est-il accessible ?

Oui. Le bouton est un élément button avec aria-expanded et aria-controls, le menu se ferme avec la touche Échap et en cliquant sur un lien, et la navigation se trouve dans un élément nav avec aria-label. Il fonctionne au clavier et avec un lecteur d'écran.

Fonctionne-t-il sans JavaScript ?

Sur ordinateur, oui : les liens s'affichent toujours. Sur mobile, le bouton a besoin de JavaScript pour s'ouvrir ; le code ne masque donc les liens que lorsque le script est chargé (classe js sur html), et sans script ils s'affichent empilés.

Quel point de rupture utiliser ?

Jusqu'à cinq liens courts, 768 px convient bien. Avec plus de liens ou des noms longs, passez à 960 ou 1024 px pour que les éléments ne soient pas à l'étroit avant de se transformer en hamburger.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires