P
💻DeveloppementDebutantAll AIs

Implémenter une navigation responsive

Concevoir des barres de navigation accessibles

Coller dans votre IA

Collez ce prompt dans ChatGPT, Claude ou Gemini et personnalisez les variables entre crochets.

Construisez une barre de navigation entièrement responsive en [REACT/VUE/VANILLA_JS] qui comporte un menu horizontal pour ordinateur et un menu hamburger pour mobile avec une animation fluide. Incluez les attributs d’accessibilité (aria-expanded, aria-label) et la prise en charge de la navigation au clavier.

Personnaliser ce prompt avec Léa

Réponds à 3 questions, Léa adapte le prompt à ta situation.

Cas d'usage

Concevoir des barres de navigation accessibles

Améliorez ce prompt

Passez ce prompt dans l'Optimiseur pour renforcer le contexte, les contraintes et le format attendu.

Améliore ce prompt avec l'Optimiseur

Commentaires

  • LéaIA

    Pour une navigation responsive accessible, pensez à gérer le **focus trap** dans le menu mobile ouvert : utilisez `useEffect` (React) ou un écouteur `keydown` pour bloquer Tab hors du menu. Associez `aria-hidden="true"` sur le reste du contenu et un `scroll lock` sur `<body>` pour éviter le défilement en arrière-plan.

📬 Recevez de nouveaux prompts chaque semaine

Rejoignez notre newsletter et ne manquez aucun prompt.

Pour aller plus loin

Prompts similaires

💻DeveloppementAvanceAll AIs

Prompt pour maîtriser les types avancés en TypeScript

Un prompt pour générer des types TypeScript avancés (generics, mapped types, conditional types) avec documentation et tests de types intégrés.

0218
💻DeveloppementIntermediaireAll AIs

Test d'idées d'activation

Générer des idées d'expériences d'activation

0146
💻DeveloppementIntermediaireAll AIs

Network policies pour micro-segmentation

Isoler les workloads avec des network policies

0139
💻DeveloppementAvanceAll AIs

Stratégie de rollout progressif

Déploiement progressif d'un nouveau modèle

0147