{"id":4352,"date":"2017-04-20T12:42:59","date_gmt":"2017-04-20T12:42:59","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriels\/?p=4352"},"modified":"2023-07-21T18:04:46","modified_gmt":"2023-07-21T18:04:46","slug":"menu-deroulant-css","status":"publish","type":"post","link":"\/fr\/tutoriels\/menu-deroulant-css\/","title":{"rendered":"Comment cr\u00e9er un menu d\u00e9roulant en CSS + tutoriel HTML"},"content":{"rendered":"

Un menu déroulant contient une liste de pages et de sous-pages. Les utilisateurs peuvent accéder à son contenu en cliquant sur le menu ou en le survolant.<\/p>

Cet élément de conception réduit l’encombrement des boutons, des liens et du texte, ce qui est utile pour améliorer l’expérience utilisateur d’un site web ou d’une application sur les petits écrans.<\/p>

Poursuivez votre lecture et découvrez les étapes de la création d’un menu déroulant à l’aide de HTML et de CSS. Vous apprendrez également à appliquer des styles au nouveau menu déroulant pour l’adapter à l’image de marque de votre projet.<\/p>

Télécharger l’aide-mémoire CSS complet<\/a><\/p>

Création d’un menu déroulant CSS pour votre site web<\/strong><\/h2>

Ce tutoriel nécessite un éditeur de texte pour créer le fichier HTML et CSS contenant le code du menu déroulant. Vous pouvez par ailleurs le faire via le gestionnaire de fichiers <\/strong>de votre panneau de contrôle d’hébergement. Le guide suivant sur les menus déroulants utilisera cette dernière méthode.<\/p>

Étape 1. Création d’un fichier avec du code HTML<\/strong><\/h3>

Pour commencer, créez un fichier HTML pour le contenu et la syntaxe du menu déroulant. Accédez au gestionnaire de fichiers de hPanel<\/strong><\/a> et créez un nouveau fichier appelé menu.html <\/strong>dans le répertoire public_html<\/strong>.<\/p>

Le fichier menu.html <\/strong>contiendra les éléments du menu déroulant — un élément parent avec cinq éléments de menu. Chaque sous-menu redirigera les utilisateurs vers différentes pages de votre site web.<\/p>

Ajoutez le code suivant au fichier menu.html :<\/strong> <\/p>

<div class=\"dropdown\">\n  <button class=\"mainmenubtn\">Main Menu<\/button>\n  <div class=\"dropdown-child\">\n    <a href=\"http:\/\/wwww.yourdomain.com\/page1.html\">Sub-Menu 1<\/a>\n    <a href=\"http:\/\/wwww.yourdomain.com\/page2.html\">Sub-Menu 2<\/a>\n    <a href=\"http:\/\/wwww.yourdomain.com\/page3.html\">Sub-Menu 3<\/a>\n    <a href=\"http:\/\/wwww.yourdomain.com\/page4.html\">Sub-Menu 4<\/a>\n    <a href=\"http:\/\/wwww.yourdomain.com\/page5.html\">Sub-Menu 5<\/a>\n  <\/div>\n<\/div><\/pre>
Les classes dropdown, mainmenubtn <\/strong>et dropdown-child <\/strong>représentent différents éléments HTML. CSS les utilisera pour accéder à un élément spécifique et modifier sa conception.<\/p>
Voici à quoi ressemblera le menu HTML sans aucune règle CSS : <\/p>
\n
\"Capture<\/figure>\n<\/div>
\n\n        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Conseil de pro                <\/p>\n            <\/div>\n            
N'oubliez pas de remplacer les liens dans les attributs href par les URL des pages de votre site web et de renommer les sous-menus pour refléter le contenu réel des pages.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Étape 2. Ajout du CSS et création de l’effet de liste déroulante<\/strong><\/h3>
Maintenant que vous avez des éléments HTML avec lesquels travailler, créons l’effet de liste déroulante et les règles CSS pour chacun d’eux.<\/p>
Générez une feuille de style interne dans le fichier menu.html <\/strong>en plaçant le code suivant à l’intérieur de l’élément <style> <\/strong>:<\/p>
.mainmenubtn {\n    background-color: skyblue;\n    color: white;\n    border: none;\n    cursor: pointer;\n    padding:20px;\n    margin-top:20px;\n}\n.mainmenubtn:hover {\n    background-color: blue;\n    }\n.dropdown {\n    position: relative;\n    display: inline-block;\n}\n.dropdown-child {\n    display: none;\n    background-color: skyblue;\n    min-width: 200px;\n}\n.dropdown-child a {\n    color: blue;\n    padding: 20px;\n    text-decoration: none;\n    display: block;\n}\n.dropdown:hover .dropdown-child {\n    display: block;\n}<\/pre>
\n\n\n        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Conseil de pro                <\/p>\n            <\/div>\n            
 Dans cet exemple, les styles CSS sont placés dans le même fichier HTML (feuille de style interne). Utilisez le CSS externe en reliant le document HTML à un fichier CSS distinct pour faciliter les modifications.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Le nom de classe .mainmenubtn <\/strong>contient les propriétés CSS du bouton déroulant. Il définit les couleurs d’arrière-plan et de police du bouton et omet la bordure. La propriété cursor <\/strong>(curseur) <\/strong>indique que le curseur de la souris se transforme en symbole de la main avec l’index tendu lorsqu’il passe au-dessus du bouton déroulant.<\/p>
L’ajout d’un sélecteur hover<\/strong> (de survol) à la classe .mainmenubtn <\/strong>détermine l’aspect du menu déroulant lorsque l’utilisateur le survole.<\/p>
La classe .dropdown <\/strong>définit la position du menu déroulant. Dans l’exemple ci-dessus, les règles CSS positionnent les éléments de menu sous le menu parent. La propriété inline-block <\/strong>les fait apparaître sans qu’un saut de ligne ne les sépare.<\/p>
La classe .dropdown-child <\/strong>fait référence au contenu réel du menu déroulant. L’utilisation d’une valeur display <\/strong>(affichage) de none <\/strong>rend les sous-menus invisibles. .dropdown:hover .dropdown-child <\/strong>transforme l’élément entier en un menu déroulant pouvant être survolé.<\/p>
\n\n\n        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Conseil de pro                <\/p>\n            <\/div>\n            
 N'hésitez pas à expérimenter avec d'autres propriétés CSS pour obtenir le design souhaité. Vous pouvez même ajouter du JavaScript pour créer un menu déroulant réactif avec des animations dynamiques.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Une fois que vous avez terminé, enregistrez et téléchargez le fichier. Voici à quoi ressemblera le menu déroulant lorsque vous l’ouvrirez dans un navigateur web :<\/p>
\n
\"Exemple<\/figure>\n<\/div>
Exemples de menus déroulants en HTML et CSS<\/strong><\/h2>
De nombreux modèles de menus déroulants CSS modernes sont disponibles pour que vous n’ayez pas à en coder un à partir de zéro. En tout cas, ils constituent une excellente source d’inspiration.<\/p>
Le modèle de menu déroulant<\/strong><\/a> suivant, créé par kkrueger<\/strong><\/a>, utilise HTML et CSS. Chaque menu parent se développe en douceur au survol, créant un aspect dynamique et mémorable pour la page web.<\/p>
\n
\"Exemple<\/figure>\n<\/div>
Un autre exemple nous vient de Bhakti Pasaribu<\/strong>. Il utilise JavaScript pour créer un menu déroulant interactif<\/strong><\/a>. Les options apparaissent avec une animation de basculement lorsqu’on clique sur le menu parent. Une autre animation remplace le menu parent par l’option sélectionnée, créant ainsi un effet de transition homogène. Ce modèle de menu déroulant est simple et dynamique d’une manière unique.<\/p>
\n
\"Exemple<\/figure>\n<\/div>
Les amateurs de minimalisme pourraient aimer ce que Chris Ota<\/strong><\/a> a à offrir. Son menu rétractable<\/strong><\/a> est subtil et ne prend pas trop de place. Pourtant, il place l’expérience utilisateur au premier plan. Vous pouvez facilement remplacer les descriptions des éléments de la liste par des icônes, renforçant ainsi l’image de marque de votre site.<\/p>
\"Exemple<\/figure>
Si vous recherchez un menu plus flashy avec des effets visuels, nous vous recommandons de consulter le menu déroulant Molten<\/strong><\/a> de Zealand<\/strong><\/a>. Il utilise des animations CSS par keyframe pour créer une flamme vacillante accrocheuse autour de la barre de navigation.<\/p>
\n
\"Exemple<\/figure>\n<\/div>
Recursive Hover Nav<\/strong><\/a> by sean_codes<\/strong><\/a> offre une solution de méga menu sans obstruer l’expérience utilisateur du site. Le menu déroulant à plusieurs niveaux est construit à l’aide de HTML, CSS et JavaScript.<\/p>
Lorsque votre souris survole le menu parent, les sous-menus apparaissent avec une animation de transition de diapositives. Bien qu’il ne présente pas d’effets flashy comme les autres exemples, ce modèle est plus pratique lorsqu’il s’agit de gérer un menu avec beaucoup de contenu.<\/p>
\"Exemple<\/figure>
\n\n\n        
\n            
\n                \n                    \n                <\/svg>\n                
\n                    Conseil de pro                <\/p>\n            <\/div>\n            
 Lorsque vous concevez un menu déroulant, veillez à prendre en compte l'expérience utilisateur du site. Un menu déroulant CSS de belle facture ne garantit pas une grande convivialité. Dans la plupart des cas, il faut en faire moins. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
Conclusion<\/strong><\/h2>
La présence d’un menu déroulant facilite la conception d’une interface utilisateur efficace. Il réduit le nombre d’éléments qui encombrent votre page web et, avec un design approprié, améliore l’esthétique du site.<\/p>
Vous pouvez créer un menu déroulant à partir de zéro en utilisant HTML, CSS et JavaScript. Vous pouvez également adopter l’un des nombreux modèles de menu déroulant codés par des concepteurs professionnels et l’adapter à vos préférences.<\/p>
Nous espérons que cet article vous a permis de mieux comprendre comment concevoir un menu déroulant CSS. Bonne chance.<\/p>\n","protected":false},"excerpt":{"rendered":"
Un menu déroulant contient une liste de pages et de sous-pages. Les utilisateurs peuvent accéder à son contenu en cliquant sur le menu ou en le survolant. Cet élément de conception réduit l’encombrement des boutons, des liens et du texte, ce qui est utile pour améliorer l’expérience utilisateur d’un site web ou d’une application sur […]<\/p>\n
Read More…<\/a><\/p>\n","protected":false},"author":189,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment Cr\u00e9er un Menu D\u00e9roulant avec CSS Facilement","rank_math_description":"Vous voulez apprendre \u00e0 cr\u00e9er un menu d\u00e9roulant en CSS ultra-l\u00e9ger, et cela rapidement et simplement ? Alors ce tutoriel est pour vous !","rank_math_focus_keyword":"menu d\u00e9roulant css","footnotes":""},"categories":[],"tags":[4844,4843,4841,4842,4845],"class_list":["post-4352","post","type-post","status-publish","format-standard","hentry","tag-menu-css","tag-menu-deroulant","tag-menu-deroulant-css","tag-menu-deroulant-html","tag-menu-html"],"hreflangs":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4352","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/189"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=4352"}],"version-history":[{"count":25,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4352\/revisions"}],"predecessor-version":[{"id":25098,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4352\/revisions\/25098"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=4352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=4352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=4352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}