Créer un menu déroulant HTML : voici comment cela fonctionne (avec exemples) (2024)

Lors de la création de sites Web, vous ne disposez que d’un espace limité pour afficher l’ensemble de votre contenu. Pour profiter au maximum de cet espace, vous pouvezMenus déroulantsutiliser. Dans cet article, nous allons vous montrer comment utiliser HTML pour créer un menu déroulant que vous pouvez insérer dans la conception de votre site Web.

Qu'est-ce qu'un menu déroulant HTML ?

UNMenu déroulantest une liste d'options qui n'apparaît que lorsque les utilisateurs cliquent ou survolent celles-ci. Les options du menu s'étendent verticalement vers le bas et disparaissent à nouveau après avoir quitté le menu.

Les menus déroulants fournissent lesPossibilité de placer plus de contenu et de liens sur une page, sans les surcharger. Par conséquent, ils sont souvent utilisés sur les sites Web et les applications Web pour masquer les éléments que les utilisateurs n’ont plus besoin de voir après le chargement initial de la page, mais qu’ils souhaitent peut-être quand même utiliser.

Fréquentcas d'utilisationpour les menus déroulants HTML sont :

• Menus de navigation, qui contiennent des liens vers d'autres pages d'un site Web
• Formule Web(y compris les formulaires d'amorçage destinés aux mobiles) qui contiennent des options parmi lesquelles les utilisateurs peuvent choisir
• Recherches de sites Webpour lister les options de tri ou de filtrage d'une requête
• comme alternative peu encombranteBoutons radio
• Liste d'actions supplémentaires moins courantesque les utilisateurs peuvent faire dans une application - voici un exemple tiré de l'outil de blog de HubSpot :

Les menus déroulants comprennentplusieurs pièces mobiles, qui doivent travailler ensemble pour garantir une expérience utilisateur transparente. Les menus déroulants qui ne fonctionnent pas comme prévu sont perçus comme très négatifs par les utilisateurs. C'est pourquoi c'est si important, euxêtre implémenté correctement en HTML.

Code du menu déroulant HTML

À quoi ressemble un menu déroulant complet ? Voici uneExemple de code de baseun menu déroulant HTML. La syntaxe est expliquée en détail ci-dessous.

 
Choisissez un nom de chien :
>
Rigatoni
Dave
Pumpernickel
Reeses
>

Syntaxe du menu déroulant HTML

Pour comprendre le fonctionnement des menus déroulants en HTML, vous deveztrois élémentssavoir : étiquette, sélection et option. Regardons chacun d'euxMots clésplus en détail.

étiquette

Avec le<étiquette>La balise crée une étiquette pour un menu ou une autre entrée utilisateur sur la page. Pour associer le label à un menu déroulant, l'attributpourutilisé, qui a sa valeur avec leidentifiant-Attribut de ce qui suit-Tags partages.

Lorsqu'un<étiquette>-Tagez de cette façon avec un-La balise est liée, lorsque vous cliquez sur l'élément « label », le focus est automatiquement dirigé vers l'élément de sélection.

sélectionner

LeL'élément crée le menu déroulant. Il contientdeux attributs: nom et identifiant. L'attributidentifiantdoit avoir les mêmes valeurs que l'attribut for dans la balise . L'attributnomest utilisé pour identifier le menu déroulant lors de la soumission de la sélection dans un formulaire.

Le-Le jour peut aussiplusieurs attributs facultatifscontenir. Ceux-ci sont:

• mise au point automatique: Définit le focus à placer sur l'entrée dans le menu déroulant lors du chargement de la page (c'est-à-dire qu'elle est sélectionnée par le navigateur et peut être contrôlée via le clavier)
• désactivé: Désactive le menu déroulant
• plusieurs: Vous permet de sélectionner plusieurs options
• requis: Précise dans un formulaire que le formulaire doit être rempli pour pouvoir le soumettre
• taille: Définit le nombre d'options affichées dans le menu déroulant

option

contient un ou plusieurs imbriqués-Mots clés. Chaque-Le jour représente unEntrée de menu. La balise de début doit avoir l'attributvaleurqui spécifie une valeur qui sera transmise lorsque cet élément de menu est sélectionné.

Vous pouvez également utiliser les attributs facultatifsdésactivé(L'option du menu est désactivée) ouchoisi(l'option est automatiquement sélectionnée lors du chargement de la page).

Un menu déroulant de base peut être facilement créé en HTML à l'aide de l'élément . On se retrouvechaque étape de ce processusplus en détail ci-dessous.

Étape 1 : Créer un élément « étiquette »

Insérer en premier<étiquette>élément dans votre document HTML. Insérer dans la balise de débutpourattribut avec un nom court pour le menu déroulant. Par exemple, si le menu déroulant contient une liste de noms de chiens, vous pouvez utiliser comme attributNoms de chienschoisir. Votre code HTML pourrait ressembler à ceci :

 
Choisissez un nom de chien :

Étape 2 : Créez un élément « select »

Puis insérezélément après l’élément . Insérer dans la balise de débutnom- et unidentifiantattribut. Pour l'attribut id, choisissez la même valeur que l'attribut for dans la balise , et pour l'attribut name, choisissez une valeur pour identifier le menu lors de la soumission du formulaire (cela peut être la même valeur que la valeur id).

Dans cet exemple, nous avons fixé pour leAttributnom et identifiantChiensfermement. Voici à quoi cela ressemble en HTML :

Étape 3 : Créez des éléments d'option et placez-les dans l'élément « select »

Ajoutez enfinbalises entre les balises de début et de fin de l’élément select. Ajoutez autant d'options que vous souhaitez proposer au menu déroulant. Puis collezvaleurattribut dans chaque balise de début et définissez-le sur le nom de l'option. Voiciquatre exemples:

 
Rigatoni
Dave
Pumpernickel
Reeses

Et voici à quoi ressemble le résultat :

Voir l'exemple du styloListe déroulante HTML uniquementpar HubSpot (@hubspot) surCodeStylo.

Essayez-le par vous-même maintenant. Le module de code ci-dessus est modifiable. Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur Réexécuter en bas à droite.

Valeur par défaut du menu déroulant HTML

Lorsque vous créez un menu déroulant de cette façon, lepremière option répertoriée dans le code HTML à la valeur par défaut du menu déroulant, comme vous pouvez le voir dans l'exemple ci-dessus.

Pour modifier la valeur par défaut, utilisez l'attribut booléenchoisi. Mettez-le simplement dans la balise de début de la balise que vous souhaitez afficher par défaut - après l'attribut value.

Ci-aprèsExemplevous verrez un menu déroulant pour les options d'abonnement. Bien que les options incluent également un abonnement gratuit et bronze, l'attribut booléen utilise l'attribut booléen pour définir Silver par défaut.

Voir l'exemple du styloUniquement liste déroulante HTML avec attribut booléenpar HubSpot (@hubspot) surCodeStylo.

Essayez-le par vous-même maintenant. Le module de code ci-dessus est modifiable. Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur Réexécuter en bas à droite.

Comment créer un menu déroulant avec effet de survol

Si vous souhaitez qu'un menu déroulant apparaisse lorsque les utilisateurs survolent un élément, vous devez utiliser HTML et CSS. Ci-dessous nous allonsprocessusexpliquer en détail.

Étape 1 : Créez et stylisez une balise div avec le nom de classe « liste déroulante »

Créez d'abord unBalise divet ajoutez-y la classedéroulerajoutée. En CSS, paramétrez l'affichage de ce divbloc en ligneet le posterelatifun. Cela affichera le contenu du menu déroulant directement sous le bouton déroulant.

Voici à quoi cela ressemble en HTML :

Voici à quoi cela ressemble en CSS :

 
.dérouler {
affichage : bloc en ligne ;
position : relative ;
}

Étape 2 : Créer l'élément avec effet de survol

Ensuite, créez unÉlément, qui affiche le menu déroulant lorsque les utilisateurs le survolent. Dans cet exemple, nous allons créer un bouton. Placez le bouton à l'intérieur de l'élément div.

Voici à quoi ressemble le code HTML jusqu'à présent :

 
Ressources HubSpot

Étape 3 : Créer et concevoir le contenu de la liste déroulante

Il est maintenant temps de créer le contenu réel de la liste déroulante, qui sera masqué jusqu'à ce que les utilisateurs passent le curseur de la souris sur le bouton. Dans l'exemple ci-dessous, nous inclurons trois liens dans le menu déroulant. Chacun des liens sera dans un élément div avec le nom de la classecontenu déroulantenfermé dans.

Voici le code HTML du contenu du menu déroulant :

 
Blog
Académie
YouTube

En CSS, définissez l'affichage de cet élément divaucun, son posteabsoluet sa largeur100 %un. Cela garantit que le contenu du menu déroulant apparaît directement sous le bouton déroulant et a la même largeur que le bouton. Définissez également la propriété "débordement" surautopour permettre le défilement sur les petit* écrans. Enfin la propriétéboîte ombredéfini pour faire ressortir le contenu du menu déroulant de l'arrière-plan.

Voici à quoi cela ressemble en CSS :

 
.dropdown-contenu {
affichage : aucun ;
position : absolue ;
largeur : 100 % ;
débordement : automatique ;
ombre de la boîte : 0px 8px 16px 0px rgba(0,0,0,0.2);
}

Étape 4 : Définissez l'effet de survol du menu déroulant

Pour garantir que le contenu du menu déroulant est réellement affiché lorsque le pointeur de la souris est survolé, vous devez définir la propriété Display du div avec la pseudo classe:flotterindiquer. Cela définit un statut spécial de l'élément - dans ce cas, la façon dont il est affiché lorsque les utilisateurs déplacent le curseur de la souris dessus.

Voici à quoi cela ressemble en CSS :

 
.dropdown : survolez .dropdown-content {
bloc de visualisation;
}

Étape 5 : Stylisez les liens dans le menu déroulant

Sans style, les liens dans le menu déroulant seraient bleu clair, soulignés et affichés sans espacement. Pour une apparence plus attrayante, nous ajustons la couleur de la policenoir, la distance5pxet la propriétédécoration de textesuraucunun.

Voici à quoi cela ressemble en CSS :

 
.dropdown-content un {
bloc de visualisation;
couleur : #000000 ;
remplissage : 5 px ;
décoration de texte : aucune ;
}

Étape 6 : Changez la couleur des liens déroulants lorsque vous les survolez

Avec la pseudo classe:flotterVous pouvez également concevoir les liens de manière à ce que leur apparence change lorsque le pointeur de la souris les survole. Supposons que le texte et leCouleur de l'arrière pland'un lien doit être modifié lorsque les utilisateurs déplacent le curseur de la souris dessus.

Voici à quoi cela ressemble en CSS :

 
.dropdown-content a:hover {
couleur : #FFFFFF ;
couleur d'arrière-plan : #00A4BD ;
}

Ci-dessous vous pouvez voir le code complet et le résultat :

Voir l'exemple du styloMenu déroulant avec effet de survol avec lienspar HubSpot (@hubspot) surCodeStylo.

Essayez-le par vous-même maintenant. Le module de code ci-dessus est modifiable. Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur Réexécuter en bas à droite.

Menu déroulant à sélection multiple

Dans les exemples ci-dessus, les utilisateurs ne pouvaient sélectionner qu'une seule option dans le menu déroulant. Cependant, vous pouvez également créer un menu que les utilisateurs peuvent utiliserchoix multiplesdes offres. Il s'agit d'un menu déroulant à sélection multiple.

Pour créer un menu déroulant à sélection multiple, vous aurez besoinHTML, CSS et JavaScript. Voici un exemple créé par le développeur de jeux et d'applications Charlie Walter. Comme vous pouvez le voir, il utilise un élément de formulaire.

Voir l'exemple du styloSélection multiple (liste déroulante)de Charlie Walter (@cjonasw) surCodeStylo.

Essayez-le par vous-même maintenant. Le module de code ci-dessus est modifiable. Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur Réexécuter en bas à droite.

Menu déroulant HTML dans la barre de navigation

Si tu as unAjouter un menu déroulant à votre barre de navigationSi vous le souhaitez, les étapes sont un peu différentes. Mais avec quelques connaissances de base en HTML et CSS, vous pouvez facilement l'implémenter.

1. Recherchez ou créez l'élément

Tout d'abord, trouvez cecibalise dans votre document HTML ou créez-en une. Ceci est votre barre de navigation où vous ajouterez votre menu déroulant.

Nous vous recommandons d'ajouter une classe CSS à votre élément Nav afin que vous puissiez le styliser avec CSS. Dans cet exemple, nous utilisons la classe « navbar », c'est-à-dire H.

2. Ajoutez une liste non ordonnée à votre barre de navigation

Dans les didacticiels précédents, nous avons utilisé l'élément pour créer un menu déroulant. Bien que vous puissiez également utiliser cette méthode dans votre barre de navigation avec un peu de bricolage, c'est beaucoup plus simple et rapide de le faire.Menu déroulant avec un non ordonnéListeou un

élément à créer.

La liste non ordonnée devient plus tard une liste de liens sur lesquels vos utilisateurs peuvent cliquer. Voici celuicode HTML de base, qui se trouve dans la navigation.

Voir l'exemple du styloMenu déroulant dans la barre de navigation Liste non ordonnéepar HubSpot (@hubspot) surCodeStylo.

3. Ajoutez un style CSS simple à votre barre de navigation

Ensuite, nous voulons çaConcevoir une barre de navigation avec CSS. Si votre site dispose déjà d'une barre de navigation ou que vous utilisez un thème existant, cela a été fait pour vous au préalable.

Sinon, nous définissons la propriété background-color#333, la situation de la propriété surrelatifet la propriété z-index999, afin que notre barre de navigation apparaisse au-dessus de tous les autres éléments et ne soit pas masquée.

Voici à quoi ressemble le code CSS :

Voir l'exemple du styloBarre de navigation du menu déroulant CSSpar HubSpot (@hubspot) surCodeStylo.

4. Ajoutez un style CSS à votre liste non ordonnée

Pour rappel: La liste non triée devient votre menu déroulant. Mais nous voulons faire en sorte qu'il apparaisse également lorsque les utilisateurs le survolent.

Dans le CSS suivant, nous spécifions que nous concevons la liste non ordonnée dans la barre de navigation en spécifiant la classe dans le sélecteur. Cela signifie:.navbar ul(la liste non ordonnée de votre menu),.navbar il(les éléments de liste non ordonnés de votre menu) et.navbar li a(les liens vers les éléments de la liste de votre menu identifiés par le sélecteur a). De cette façon, le thème que vous définissez ici ne s'appliquera pas à toutes les listes ou liens non ordonnés de votre site.

Initialement défini dans le sélecteur.navbar ulla propriété list-style-typeaucunun. Cela garantit qu’il n’y a pas de puces ou de tirets avant les éléments de la liste. Ensuite, définissez la marge et le remplissage0un. Cependant, vous pouvez ajuster ces chiffres à votre guise.

Voir l'exemple du styloListe déroulante non ordonnée CSSpar HubSpot (@hubspot) surCodeStylo.

Puis définissez dans le sélecteur.navbar illa propriété d'affichage surbloc en ligneun. Cela garantit que les éléments de votre menu déroulant apparaissent les uns en dessous des autres et qu'ils ne s'interrompent pas entre eux ni avec d'autres éléments de la page.

Voir l'exemple du styloMenu déroulant Liste non ordonnée CSS – barre de navigation lipar HubSpot (@hubspot) surCodeStylo.

Enfin vous pouvez utiliser le sélecteur.navbar li aConfigurez-le pour changer l’apparence de vos liens. Vous pouvez ajuster la couleur de la police, l'espacement et la décoration du texte, mais assurez-vous de définir la propriété d'affichage surblocest réglé. De cette façon, le lien occupe toute la largeur du menu déroulant et ne couvre pas seulement le texte lui-même.

Voir l'exemple du styloMenu déroulant Liste non ordonnée CSS – barre de navigation li apar HubSpot (@hubspot) surCodeStylo.

5. Stylisez le menu déroulant avec CSS

Enfin, il est temps d'en acheter un tout nouveauMenu déroulantmis en place pour qu'ils'affiche lorsque le pointeur de la souris passe dessuset n'apparaît plus statique sur la page, comme ce serait le cas avec une liste normale non ordonnée.

Pour ce faire, nous concevons d'abord le sélecteur.navbar ul ul. Définir la propriété de positionabsolupour que le menu reste dépendant de son parent (la barre de navigation).

Ensuite, définissez la propriété d'affichageaucunafin que le menu déroulant soit masqué par défaut et n'apparaisse que lorsque les utilisateurs le survolent.

Voir l'exemple du styloMenu déroulant CSS – barre de navigation vers le hautpar HubSpot (@hubspot) surCodeStylo.

Ensuite, nous concevons les sélecteurs.navbar ul ul liet.navbar li: survolez ul, qui pointent tous deux vers les éléments de la liste dans votre menu déroulant. Définir la propriété d'affichage pour les deuxblocpour qu'ils apparaissent les uns sur les autres.

Voir l'exemple du styloMenu déroulant CSS – barre de navigation sur toutpar HubSpot (@hubspot) surCodeStylo.

Enfin, nous souhaitons changer la couleur d’arrière-plan des liens déroulants lorsque le curseur de la souris les survole. Utilisez le sélecteur CSS.navbar ul li a: survolet remplacez la propriété background-color par le code couleur HTML de votre choix.

Voir l'exemple du styloMenu déroulant CSS – barre de navigation en survolpar HubSpot (@hubspot) surCodeStylo.

Ci-dessous vous pouvez voir le code complet et le résultat :

Voir l'exemple du styloMenu déroulant HTML dans la barre de navigationpar HubSpot (@hubspot) surCodeStylo.

Essayez-le par vous-même maintenant. Le module de code ci-dessus est modifiable. Basculez entre les onglets HTML et CSS, modifiez le code et cliquez sur Réexécuter en bas à droite.

Accessibilité du menu déroulant HTML

Il y a un autre aspect de vos menus déroulants que nous n'avons pas encore mentionné, mais il est important de le noter :Accessibilité. L'accessibilité du Web est le principe selon lequel toutes les expériences en ligne doivent être utilisables par tous, avec une attention particulière pour les utilisateurs ayant des limitations physiques, visuelles et cognitives.

Les menus déroulants doivent être accessibles, afin que ces utilisateurs puissent parcourir votre site Web, soumettre des formulaires et effectuer d'autres actions comme n'importe qui d'autre. Sinon, ils pourraient mettre plus de temps à trouver ce qu'ils recherchent ou ne pas être en mesure d'utiliser du tout certaines parties de votre site.

Lors de la conception d'un menu déroulant en HTML, vous devez prendre en compte certainsBonnes pratiques en matière d'accessibilitéobserver:

• utiliserpas trop de niveauxdans votre menu déroulant, car cela rend la navigation difficile pour les utilisateurs ayant des problèmes moteurs. Si votre menu contient plus d'un niveau de sous-menu (c'est-à-dire un menu dans un menu au sein de votre menu principal), vous devriez probablement restructurer votre menu/site Web.
• Tous les menussur votre page, y compris les menus déroulants,doit être navigable à l'aide des touches Tab et Entréeêtre. Utilisez la touche Tab pour avancer dans les éléments du menu et utilisez la touche Entrée pour ouvrir ou fermer le menu.
• Évitez les pièges du clavier. Cela se produit lorsque les utilisateurs peuvent naviguer dans les éléments d'un menu à l'aide de la touche de tabulation, mais ne peuvent pas fermer le menu et restent donc bloqués.
• Pour les menus activés avec le pointeur de la souris, configurez unTemporisation(environ une seconde)entre retirer le pointeur de la souris du menu et fermer le menuun. Cela signifie que les utilisateurs ayant une motricité fine limitée peuvent utiliser le menu même s'ils déplacent accidentellement le curseur de la souris.
• MourirUtiliser le HTML sémantiqueNon seulement cela rend votre code plus facile à comprendre, mais cela rend également vos menus accessibles aux lecteurs d'écran.

Conclusion : créez facilement des menus déroulants en HTML

Même avec seulement quelquesHTML- et des connaissances CSS que vous pouvezmenus déroulants simples, intuitifs et visuellement attrayantspour votre site Web. Vous pouvez configurer votre menu déroulant pour qu'il s'ouvre lorsque vous cliquez ou passez la souris dessus, économisant ainsi un espace précieux sans coûts d'interaction élevés. C'est pourquoi les menus déroulants existent toujoursingrédient importantchaque site Web.

Image de couverture : dima_sidelnikov / iStock / Getty Images Plus

Publié initialement le 12 septembre 2023 à 02:00:00, mis à jour le 12 septembre 2023