{"id":20662,"date":"2023-02-17T15:09:56","date_gmt":"2023-02-17T15:09:56","guid":{"rendered":"\/tutoriels\/?p=20662"},"modified":"2025-07-10T19:30:56","modified_gmt":"2025-07-10T19:30:56","slug":"menu-deroulant-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/menu-deroulant-wordpress","title":{"rendered":"Comment cr\u00e9er un menu d\u00e9roulant sur WordPress et ses meilleures pratiques"},"content":{"rendered":"<p>Le menu d&eacute;roulant WordPress contient une liste de liens imbriqu&eacute;s &agrave; l&rsquo;int&eacute;rieur qui s&rsquo;&eacute;tendront lors d&rsquo;un clic ou du survol de la souris. Les sites web ou les blogs WordPress utilisent g&eacute;n&eacute;ralement ce type de menu pour &eacute;conomiser de l&rsquo;espace et am&eacute;liorer la navigation du site, afin de ne pas encombrer la page d&rsquo;accueil et d&rsquo;avoir une meilleure lisibilit&eacute;.<\/p><p>Cet article explorera les &eacute;tapes de la cr&eacute;ation d&rsquo;un menu d&eacute;roulant WordPress, que ce soit manuellement ou avec un plugin. Nous vous donnerons &eacute;galement des conseils pour tirer le meilleur parti de vos menus d&eacute;roulants dans ce guide.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Mega-WordPress-Cheat-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41459\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-quest-ce-quun-menu-deroulant\">Qu&rsquo;est-ce qu&rsquo;un menu d&eacute;roulant ?<\/h2><p>Un <strong>menu d&eacute;roulant<\/strong> est un type de menu de navigation utilis&eacute; sur les sites web pour organiser des liens sous une structure hi&eacute;rarchique. Il appara&icirc;t sous forme de liste lorsque l&rsquo;utilisateur survole ou clique sur un &eacute;l&eacute;ment parent. Cela permet de garder l&rsquo;interface du site claire et &eacute;pur&eacute;e tout en offrant un acc&egrave;s rapide &agrave; plusieurs pages ou sections.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-creer-un-menu-deroulant-wordpress\">Comment cr&eacute;er un menu d&eacute;roulant WordPress<\/h2><p>Suivez ces &eacute;tapes pour int&eacute;grer de mani&egrave;re transparente des menus d&eacute;roulants dans votre site WordPress en utilisant l&rsquo;&eacute;diteur de site, le plugin Max Mega Menu et manuellement. Commen&ccedil;ons par la m&eacute;thode de l&rsquo;&eacute;diteur de site.<\/p><h3 class=\"wp-block-heading\"><strong>Comment ajouter un menu d&eacute;roulant WordPress avec l&rsquo;&eacute;diteur de site<\/strong><\/h3><p>Le bloc Navigation dans l&rsquo;&eacute;diteur de site fournit une interface glisser-d&eacute;poser pour cr&eacute;er et organiser tous les &eacute;l&eacute;ments du menu, ce qui facilite la cr&eacute;ation de menus d&eacute;roulants. Notez que cette m&eacute;thode n&rsquo;est actuellement compatible qu&rsquo;avec les th&egrave;mes en bloc.<br>Voici comment cr&eacute;er un menu d&eacute;roulant &agrave; l&rsquo;aide du bloc Navigation :<\/p><ol class=\"wp-block-list\">\n<li>Allez dans <strong>Apparence <\/strong>&rarr; <strong>&Eacute;diteur <\/strong>dans votre tableau de bord WordPress.<\/li>\n\n\n\n<li>Cliquez sur l&rsquo;ic&ocirc;ne d&rsquo;insertion de bloc (<strong>+<\/strong>) dans la barre de menu sup&eacute;rieure et recherchez le bloc <strong>Navigation <\/strong>. Faites-le glisser et d&eacute;posez-le n&rsquo;importe o&ugrave; dans l&rsquo;interface de l&rsquo;&eacute;diteur.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f77be08cccc\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"435\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200254.png\/public\" alt=\"Le bloc Navigation dans l'&eacute;diteur de site WordPress\" class=\"wp-image-35071\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200254.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200254.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200254.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200254.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>3. Dans la barre lat&eacute;rale des r&eacute;glages, faites glisser un &eacute;l&eacute;ment de menu existant &agrave; un niveau inf&eacute;rieur, le transformant en un menu enfant imbriqu&eacute; dans l&rsquo;&eacute;l&eacute;ment de menu principal.<\/p><figure data-wp-context='{\"imageId\":\"69f77be08d65f\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"420\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200516-09-24-2024_08_05_PM.png\/public\" alt=\"L'option vue en liste du bloc Navigation \" class=\"wp-image-35073\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200516-09-24-2024_08_05_PM.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200516-09-24-2024_08_05_PM.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200516-09-24-2024_08_05_PM.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200516-09-24-2024_08_05_PM.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>4. Pour cr&eacute;er un menu d&eacute;roulant avec un nouveau lien de menu, s&eacute;lectionnez <strong>Options <\/strong>&rarr; <strong>Ajouter un lien de sous-menu<\/strong> &agrave; c&ocirc;t&eacute; de l&rsquo;&eacute;l&eacute;ment de menu parent pr&eacute;vu.<\/p><figure data-wp-context='{\"imageId\":\"69f77be08dd5c\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"419\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200736-09-24-2024_08_08_PM.png\/public\" alt=\"Le bouton Ajouter un lien de sous-menu dans les param&egrave;tres du bloc Navigation dans l'&eacute;diteur de site \" class=\"wp-image-35074\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200736-09-24-2024_08_08_PM.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200736-09-24-2024_08_08_PM.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200736-09-24-2024_08_08_PM.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-200736-09-24-2024_08_08_PM.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>5. Cliquez sur l&rsquo;ic&ocirc;ne d&rsquo;insertion de blocs (<strong>+<\/strong>) et choisissez un bloc diff&eacute;rent pour cr&eacute;er un sous-menu pour un autre type de contenu. Faites-le glisser et d&eacute;posez-le sous l&rsquo;&eacute;l&eacute;ment de menu parent pr&eacute;vu.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f77be08e3e9\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"567\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201024.png\/public\" alt=\"La fen&ecirc;tre contextuelle montrant diff&eacute;rents types de contenu pour un nouveau sous-menu dans l'&eacute;diteur de site \" class=\"wp-image-35075\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201024.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201024.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201024.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201024.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>6. Cliquez sur les &eacute;l&eacute;ments de menu individuels pour configurer les r&eacute;glages du menu, tels que le libell&eacute;, l&rsquo;URL et la description.<\/p><figure data-wp-context='{\"imageId\":\"69f77be08eb01\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"451\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201540.png\/public\" alt=\"R&eacute;glages de l'&eacute;l&eacute;ment de menu Portfolio dans l'&eacute;diteur de site \" class=\"wp-image-35076\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201540.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201540.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201540.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-201540.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>7. Pour cr&eacute;er un nouveau sous-menu sous le m&ecirc;me &eacute;l&eacute;ment de menu parent, s&eacute;lectionnez l&rsquo;ic&ocirc;ne d&rsquo;insertion de bloc (<strong>+<\/strong>) sous l&rsquo;&eacute;l&eacute;ment de menu enfant existant.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f77be08f16c\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"339\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-205526.png\/public\" alt=\"L'ic&ocirc;ne (+) sous l'&eacute;l&eacute;ment de menu enfant existant dans l'&eacute;diteur du site \" class=\"wp-image-35077\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-205526.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-205526.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-205526.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/Capture-decran-2024-09-24-205526.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>8. Le r&eacute;sultat final sera le suivant :<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69f77be08f799\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"264\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/wordpress-siteeditor-dropdownmenu.png\/public\" alt=\"Le menu d&eacute;roulant cr&eacute;&eacute; &agrave; l'aide de l'&eacute;diteur de site WordPress et du bloc Navigation \" class=\"wp-image-35078\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/wordpress-siteeditor-dropdownmenu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/wordpress-siteeditor-dropdownmenu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/wordpress-siteeditor-dropdownmenu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/wordpress-siteeditor-dropdownmenu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Agrandir\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-comment-creer-manuellement-des-menus-deroulants-wordpress\"><strong>Comment cr&eacute;er manuellement des menus d&eacute;roulants<\/strong> <strong>WordPress<\/strong><\/h3><p>La cr&eacute;ation manuelle d&rsquo;un menu de navigation d&eacute;roulant dans WordPress implique l&rsquo;utilisation des fonctionnalit&eacute;s natives d&rsquo;un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/tuto-wordpress\">site web WordPress<\/a>. L&rsquo;avantage de cette m&eacute;thode est que le menu d&eacute;roulant restera fonctionnel m&ecirc;me apr&egrave;s avoir chang&eacute; de th&egrave;me WordPress ou install&eacute; de nouveaux plugins.<\/p><p>Avec cette m&eacute;thode, vous pouvez inclure des pages, des articles, des cat&eacute;gories et des liens personnalis&eacute;s dans votre menu. Assurez-vous toutefois que votre th&egrave;me prend en charge les menus d&eacute;roulants en consultant la documentation du th&egrave;me.<\/p><p>Suivez les &eacute;tapes suivantes pour cr&eacute;er manuellement un menu d&eacute;roulant personnalis&eacute; dans WordPress :<\/p><p><strong>1.  Cr&eacute;er les &eacute;l&eacute;ments de menu<\/strong><\/p><p>Tout d&rsquo;abord, nous devons cr&eacute;er le menu standard. Naviguez vers <strong>Apparence<\/strong> &rarr; <strong>Menus<\/strong> &agrave; partir de votre tableau de bord WordPress. Dans l&rsquo;onglet <strong>Modifier les menus<\/strong>, vous verrez la section <strong>Structure du menu<\/strong> o&ugrave; vous pouvez cr&eacute;er un nouveau menu.<\/p><p>Gardez &agrave; l&rsquo;esprit que l&rsquo;apparence de cette section d&eacute;pendra de votre th&egrave;me WordPress actif.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-menus.png\/public\" alt=\"La section Menus du th&egrave;me actif \" class=\"wp-image-21305\" title=\"section-menus\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-menus.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-menus.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-menus.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-menus.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Ajoutez le nom du menu dans la zone de texte et s&eacute;lectionnez <strong>Cr&eacute;er le menu<\/strong>. Ensuite, passez &agrave; la section <strong>Ajouter des &eacute;l&eacute;ments de menu<\/strong> et choisissez les &eacute;l&eacute;ments souhait&eacute;s pour le nouveau menu d&eacute;roulant. Vous pouvez le faire en cochant la case &agrave; c&ocirc;t&eacute; d&rsquo;un &eacute;l&eacute;ment choisi et en cliquant sur <strong>Ajouter au menu<\/strong>.<\/p><p>Les &eacute;l&eacute;ments pris en charge sont les pages, les articles et les cat&eacute;gories. Vous pouvez &eacute;galement ins&eacute;rer des liens personnalis&eacute;s comme &eacute;l&eacute;ments de menu, ce qui vous permet de rediriger les utilisateurs vers vos pages de paiement ou de renvoi.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Ajouter-des-elements-de-menu.png\/public\" alt=\"L'onglet Modifier les menus, mettant en &eacute;vidence la section Ajouter des &eacute;l&eacute;ments de menu\" class=\"wp-image-21307\" title=\"Ajouter-des-&eacute;l&eacute;ments-de-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Ajouter-des-elements-de-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Ajouter-des-elements-de-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Ajouter-des-elements-de-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Ajouter-des-elements-de-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Les &eacute;l&eacute;ments de menu s&eacute;lectionn&eacute;s appara&icirc;tront dans la section <strong>Structure du menu<\/strong>. Il vous suffit de faire glisser et de d&eacute;poser les &eacute;l&eacute;ments et sous-&eacute;l&eacute;ments dans l&rsquo;ordre de votre choix.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"524\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-structure-du-menu.png\/public\" alt=\"La section Structure du menu qui affiche les &eacute;l&eacute;ments du menu et sous menu wordpress\" class=\"wp-image-21308\" title=\"section-structure-du-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-structure-du-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-structure-du-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-structure-du-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-structure-du-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>2. Styliser le menu<\/strong><\/p><p>Les menus d&eacute;roulants de WordPress sont personnalisables &agrave; l&rsquo;aide de CSS. Tout d&rsquo;abord, activez cette fonction en s&eacute;lectionnant le menu <strong>Options de l&rsquo;&eacute;cran <\/strong>dans le coin sup&eacute;rieur droit de la page <strong>Menus<\/strong> et en cochant la case <strong>Classes CSS<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"291\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Classes-CSS-menu-2.png\/public\" alt=\"La section Afficher les propri&eacute;t&eacute;s avanc&eacute;es du menu, en mettant en &eacute;vidence la case &agrave; cocher Classes CSS\" class=\"wp-image-21311\" title=\"Classes-CSS-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Classes-CSS-menu-2.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Classes-CSS-menu-2.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Classes-CSS-menu-2.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Classes-CSS-menu-2.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Si vous d&eacute;veloppez un &eacute;l&eacute;ment de menu, vous verrez une nouvelle zone de texte intitul&eacute;e <strong>Classes CSS.<\/strong> C&rsquo;est l&agrave; que vous ajoutez les classes CSS de WordPress pour personnaliser le style du menu d&eacute;roulant avec facilit&eacute;.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/classes-CSS-structure-du-menu.png\/public\" alt=\"Les classes CSS dans la section structure du menu\" class=\"wp-image-21312\" title=\"classes-CSS-structure-du-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/classes-CSS-structure-du-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/classes-CSS-structure-du-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/classes-CSS-structure-du-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/classes-CSS-structure-du-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p><strong>3. Publier le menu<\/strong><\/p><p>Pour modifier l&rsquo;emplacement du menu, vous pouvez choisir parmi les options disponibles dans la section <strong>R&eacute;glages du menu<\/strong> ou dans l&rsquo;onglet <strong>G&eacute;rer les emplacements<\/strong>. Une fois encore, les choix d&eacute;pendront de votre th&egrave;me WordPress actif.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"224\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-reglages-du-menu.png\/public\" alt=\"section r&eacute;glages du menu\" class=\"wp-image-21313\" title=\"section-r&eacute;glages-du-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-reglages-du-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-reglages-du-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-reglages-du-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/section-reglages-du-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Dans cet exemple, nous allons placer le menu en haut.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"458\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/menu-deroulant-wordpress.png\/public\" alt=\"Un exemple de menu deroulant wordpress ajout&eacute; en haut d'une page\" class=\"wp-image-21315\" title=\"menu-deroulant-wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/menu-deroulant-wordpress.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/menu-deroulant-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/menu-deroulant-wordpress.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/menu-deroulant-wordpress.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Cliquez sur le bouton <strong>Enregistrer le menu <\/strong>dans le coin inf&eacute;rieur droit pour enregistrer les modifications et publier le menu d&eacute;roulant.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"527\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bouton-Enregistrer-le-menu.png\/public\" alt=\"Le bouton Enregistrer le menu sue WordPress\" class=\"wp-image-21316\" title=\"bouton-Enregistrer-le-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bouton-Enregistrer-le-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bouton-Enregistrer-le-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bouton-Enregistrer-le-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/bouton-Enregistrer-le-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\" id=\"h-comment-creer-un-menu-deroulant-wordpress-avec-un-plugin\">Comment cr&eacute;er un menu d&eacute;roulant WordPress avec un plugin<\/h3><p>Une autre fa&ccedil;on de cr&eacute;er des menus d&eacute;roulants consiste &agrave; utiliser un plugin WordPress. Il existe de nombreux excellents plugins de menu disponibles dans le r&eacute;pertoire de plugins WordPress, alors choisissez le meilleur pour vous.<\/p><p>Nous allons vous montrer comment cr&eacute;er un menu d&eacute;roulant en utilisant <a href=\"https:\/\/fr.wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noopener\"><strong>Max Mega Menu<\/strong><\/a>:<\/p><p>1. <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-plugin-wordpress\"><strong>Installez et activez le plugin<\/strong><\/a>.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"813\" height=\"306\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/plugin-max-mega-menu.png\/public\" alt=\"Le plugin WordPress Max Mega Menu\" class=\"wp-image-21318\" title=\"plugin-Max-Mega-Menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/plugin-max-mega-menu.png\/w=813,fit=scale-down 813w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/plugin-max-mega-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/plugin-max-mega-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/plugin-max-mega-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 813px) 100vw, 813px\" \/><\/figure><p>2. Naviguez vers <strong>M&eacute;ga Menu<\/strong> depuis votre tableau de bord WordPress. Dans la section <strong>Emplacement de menu<\/strong>, cliquez sur votre menu principal et cochez la case pour activer la fonctionnalit&eacute; de menu d&eacute;roulant. Dans la m&ecirc;me section, choisissez l&rsquo;&eacute;v&eacute;nement qui d&eacute;clenche le sous-menu et l&rsquo;animation du menu d&eacute;roulant sur le bureau et le mobile et s&eacute;lectionnez <strong>Enregistrer les modifications<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"418\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/emplacement-de-menu-plugin-mega-menu.png\/public\" alt=\"L'onglet Emplacement de Menu du plugin Mega Menu\n\" class=\"wp-image-21332\" title=\"emplacement-de-menu-plugin-mega-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/emplacement-de-menu-plugin-mega-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/emplacement-de-menu-plugin-mega-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/emplacement-de-menu-plugin-mega-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/emplacement-de-menu-plugin-mega-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>3. Le plugin adopte le style de votre th&egrave;me par d&eacute;faut. Ouvrez l&rsquo;onglet <strong>Th&egrave;mes de menu<\/strong> si vous souhaitez modifier le style, l&rsquo;animation et la taille du menu. Assurez-vous que l&rsquo;option <strong>S&eacute;lectionner le th&egrave;me &agrave; &eacute;diter<\/strong> pointe vers votre menu principal.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/themes-de-menu.png\/public\" alt=\"l'option S&eacute;lectionner le th&egrave;me &agrave; &eacute;diter dans l'onglet Th&egrave;mes de menu.\" class=\"wp-image-21334\" title=\"Th&egrave;mes-de-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/themes-de-menu.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/themes-de-menu.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/themes-de-menu.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/themes-de-menu.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>4. Naviguez jusqu&rsquo;&agrave; <strong>Apparence<\/strong> &rarr; <strong>Menus<\/strong> et ajoutez des &eacute;l&eacute;ments au menu par d&eacute;faut ou primaire avec la fonctionnalit&eacute; Max Mega Menu activ&eacute;e. Cliquez sur <strong>Enregistrer le menu<\/strong> une fois que vous avez termin&eacute;.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1671\" height=\"718\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/public\" alt=\"Les param&egrave;tres du Max Mega Menu dans la page WordPress Menus.\" class=\"wp-image-21335\" title=\"param&egrave;tres-du-menu-Max-Mega\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/w=1671,fit=scale-down 1671w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/parametres-du-menu-Max-Mega.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1671px) 100vw, 1671px\" \/><\/figure><\/div><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conseils-pour-ameliorer-vos-menus-deroulants-sur-wordpress\">Conseils pour am&eacute;liorer vos menus d&eacute;roulants sur WordPress<\/h2><p>Vos menus de navigation font partie des premiers &eacute;l&eacute;ments de site Web que vos visiteurs verront. En plus d&rsquo;affecter le syst&egrave;me de navigation de l&rsquo;ensemble du site, les menus WordPress peuvent &eacute;galement faire ou d&eacute;faire l&rsquo;exp&eacute;rience utilisateur. Vous voulez une barre de menu qui aide les visiteurs &agrave; trouver rapidement les informations dont ils ont besoin.<\/p><p>Il est donc important que votre menu principal soit facile &agrave; utiliser et visuellement attrayant. Consultez les conseils suivants sur l&rsquo;optimisation de l&rsquo;utilisation des menus d&eacute;roulants pour une meilleure exp&eacute;rience utilisateur.<\/p><p><strong>Utilisez des &eacute;l&eacute;ments visuels<\/strong><\/p><p>L&rsquo;une des meilleures fa&ccedil;ons de rendre vos menus d&eacute;roulants plus interactifs est d&rsquo;ajouter des ic&ocirc;nes d&rsquo;image &agrave; leurs &eacute;l&eacute;ments &agrave; l&rsquo;aide d&rsquo;un plugin.<\/p><p>Le plugin <a href=\"https:\/\/fr.wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener\"><strong>Menu Image<\/strong><\/a>, par exemple, fournit une collection massive d&rsquo;ic&ocirc;nes FontAwesome et DashIcons parmi lesquelles vous pourrez choisir. Vous pouvez ajouter les &eacute;l&eacute;ments souhait&eacute;s au menu d&eacute;roulant dans diff&eacute;rentes positions ou les inclure sous forme d&rsquo;animations d&eacute;clench&eacute;es lors du survol de la souris.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"249\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-89.jpeg\/public\" alt=\"La banni&egrave;re du plugin Menu Image\" class=\"wp-image-35002\" title=\"plugin-Menu-Image\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-89.jpeg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-89.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-89.jpeg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div><p>&Eacute;vitez de surcharger l&rsquo;espace avec des ic&ocirc;nes inutiles, car cela peut nuire &agrave; la lisibilit&eacute; du menu et distraire les utilisateurs de l&rsquo;exploration de votre site WordPress.<\/p><p><strong>Ajoutez un CSS personnalis&eacute;<\/strong><\/p><p>Comme mentionn&eacute; ci-dessus, vous pouvez ajouter des classes CSS aux nouveaux menus. Envisagez d&rsquo;ajouter un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-ajouter-un-css-personnalise-a-wordpress\"><strong>CSS personnalis&eacute;<\/strong><\/a> pour styliser le menu selon vos pr&eacute;f&eacute;rences pour une personnalisation avanc&eacute;e.<\/p><p>Allez dans <strong>Apparence<\/strong> &rarr; <strong>Personnaliser<\/strong> depuis votre tableau de bord WordPress et utilisez la fonction <strong>CSS additionnel<\/strong> pour ajouter votre propre code. Dans cet exemple, nous avons chang&eacute; la couleur de la police du menu sup&eacute;rieur en bleu.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-90.jpeg\/public\" alt=\"La fonction CSS additionnel du personnalisateur WordPress\" class=\"wp-image-35003\" title=\"fonction-CSS-additionnel\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-90.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-90.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-90.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-90.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Utilisez l&rsquo;outil <strong>inspecter<\/strong> dans votre navigateur pour localiser le s&eacute;lecteur CSS <strong>#ID<\/strong> de votre th&egrave;me &ndash; vous en aurez besoin pour s&eacute;lectionner un &eacute;l&eacute;ment sp&eacute;cifique &agrave; personnaliser.<\/p><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"233\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-91.jpeg\/public\" alt=\"Le s&eacute;lecteur d'ID du th&egrave;me affich&eacute; via l'outil d'inspection de Google\" class=\"wp-image-35004\" title=\"s&eacute;lecteur-ID-du-th&egrave;me\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-91.jpeg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-91.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-91.jpeg\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-91.jpeg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Voici le code que nous avons utilis&eacute; pour modifier la couleur de la police :<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#top-menu li.menu-item a {\ncolor:#0051D7;\n}<\/pre><p>Il existe de nombreux tutoriels sur le <a href=\"https:\/\/www.hostinger.com\/fr\/design-de-site-web\"><strong>web design<\/strong><\/a> et les CSS dont vous pouvez tirer des enseignements en ligne. N&rsquo;h&eacute;sitez pas &agrave; exp&eacute;rimenter avec diff&eacute;rents styles CSS ou &agrave; utiliser du code pr&eacute;&eacute;tabli pour rationaliser le processus de conception.<\/p><p><strong>Activez les menus d&eacute;roulants multi-niveaux<\/strong><\/p><p>Le fait de placer un &eacute;l&eacute;ment &laquo; enfant &raquo; sous un &eacute;l&eacute;ment &laquo; parent &raquo; ou une page de niveau sup&eacute;rieur cr&eacute;era automatiquement une relation enfant-parent, permettant ainsi la fonctionnalit&eacute; de menu d&eacute;roulant &agrave; plusieurs niveaux.<\/p><p>Un &eacute;l&eacute;ment de menu parent peut avoir plusieurs sous-&eacute;l&eacute;ments. Cependant, nous recommandons de ne pas avoir plus de sept sous-&eacute;l&eacute;ments par &eacute;l&eacute;ment parent pour ne pas nuire &agrave; la navigation de votre site internet WordPress.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"418\" height=\"528\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-92.jpeg\/public\" alt=\"Un exemple de relation enfant-parent sur une liste d&eacute;roulante WordPress\" class=\"wp-image-35005\" title=\"relation-enfant-parent-menu-wordpress\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-92.jpeg\/w=418,fit=scale-down 418w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-92.jpeg\/w=238,fit=scale-down 238w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-92.jpeg\/w=119,fit=scale-down 119w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/figure><\/div><p><strong>Cr&eacute;ez un m&eacute;ga menu d&eacute;roulant<\/strong><\/p><p>Si vous souhaitez afficher un grand nombre d&rsquo;options dans un seul menu d&eacute;roulant, il est pr&eacute;f&eacute;rable de cr&eacute;er un m&eacute;ga menu. Contrairement aux menus d&eacute;roulants standard, les m&eacute;ga-menus contiennent g&eacute;n&eacute;ralement plus de liens et de sous-menus.<\/p><p>Comme ce type de menu affiche l&rsquo;ensemble de la structure de votre site Web, les visiteurs pourront acc&eacute;der &agrave; la partie la plus profonde du site &agrave; partir du menu principal. Les m&eacute;ga-menus sont id&eacute;aux pour les grands sites internet car ils raccourcissent le parcours de l&rsquo;utilisateur. <\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"311\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-93.jpeg\/public\" alt=\"Un exemple de m&eacute;ga menu construit &agrave; l'aide du plugin Max Mega Menu\" class=\"wp-image-35006\" title=\"m&eacute;ga-menu\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-93.jpeg\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-93.jpeg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2024\/09\/image-93.jpeg\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure><\/div><p>Il existe de nombreux plugins WordPress pour vous aider &agrave; cr&eacute;er un m&eacute;ga menu personnalis&eacute;. Nous avons con&ccedil;u l&rsquo;exemple de design de m&eacute;ga menu ci-dessus en utilisant le plugin Max Mega Menu.<\/p><p><strong>Activez l&rsquo;aper&ccedil;u en direct<\/strong><\/p><p>S&eacute;lectionnez le bouton <strong>G&eacute;rer avec la pr&eacute;visualisation en direct<\/strong> en haut de la page si vous avez besoin d&rsquo;une r&eacute;f&eacute;rence visuelle lorsque vous changez l&rsquo;emplacement des menus. Le mode d&rsquo;aper&ccedil;u en direct est particuli&egrave;rement utile lors de la cr&eacute;ation d&rsquo;un menu d&eacute;roulant complexe &agrave; plusieurs niveaux.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"328\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Gerer-avec-la-previsualisation-en-direct.png\/public\" alt=\"Le bouton G&eacute;rer avec la pr&eacute;visualisation en direct sur WordPress\" class=\"wp-image-21346\" title=\"G&eacute;rer-avec-la-pr&eacute;visualisation-en-direct\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Gerer-avec-la-previsualisation-en-direct.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Gerer-avec-la-previsualisation-en-direct.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Gerer-avec-la-previsualisation-en-direct.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/Gerer-avec-la-previsualisation-en-direct.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Dans ce mode, toutes les modifications apport&eacute;es avec le personnalisateur WordPress seront affich&eacute;es en temps r&eacute;el. Vous pouvez &eacute;galement publier le menu d&eacute;roulant &agrave; travers le mode d&rsquo;aper&ccedil;u en direct.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"481\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/mode-apercu-en-direct1.png\/public\" alt=\"apparence du personnalisateur WordPress via le mode aper&ccedil;u en direct\" class=\"wp-image-21349\" title=\"mode-aper&ccedil;u-en-direct\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/mode-apercu-en-direct1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/mode-apercu-en-direct1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/mode-apercu-en-direct1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/03\/mode-apercu-en-direct1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Le menu d&eacute;roulant de WordPress est un &eacute;l&eacute;ment crucial du syst&egrave;me de navigation d&rsquo;un site internet. Il facilite l&rsquo;exploration d&rsquo;un site web et, s&rsquo;il est cr&eacute;&eacute; correctement, il aide les robots d&rsquo;exploration des moteurs de recherche pour l&rsquo;indexation.<\/p><p>Cet article a couvert les &eacute;tapes pour cr&eacute;er un nouveau menu d&eacute;roulant dans WordPress, que ce soit manuellement ou en utilisant l&rsquo;&eacute;diteur de site ou un plugin. Nous avons &eacute;galement fourni quelques conseils pour optimiser vos menus d&eacute;roulants.<\/p><p>Nous esp&eacute;rons que cet article a r&eacute;pondu &agrave; toutes vos questions sur ce type de menu WordPress. Bonne chance !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le menu d&eacute;roulant WordPress contient une liste de liens imbriqu&eacute;s &agrave; l&rsquo;int&eacute;rieur qui s&rsquo;&eacute;tendront lors d&rsquo;un clic ou du survol de la souris. Les sites web ou les blogs WordPress utilisent g&eacute;n&eacute;ralement ce type de menu pour &eacute;conomiser de l&rsquo;espace et am&eacute;liorer la navigation du site, afin de ne pas encombrer la page d&rsquo;accueil et [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/menu-deroulant-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":355,"featured_media":20663,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment cr\u00e9er un menu d\u00e9roulant WordPress facilement","rank_math_description":"Un menu d\u00e9roulant WordPress am\u00e9liore l'exp\u00e9rience de l'utilisateur et facilite la navigation. Apprenez \u00e0 en cr\u00e9er un facilement.","rank_math_focus_keyword":"menu d\u00e9roulant wordpress","footnotes":""},"categories":[4777],"tags":[],"class_list":["post-20662","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/menu-dropdown-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/menu-deroulant-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/menu-desplegable-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-menu-di-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-dropwdown-menu","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/menu-rozwijane-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-dropdown-menu\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-create-a-wordpress-dropdown-menu-and-improve-site-navigation","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-crear-un-menu-desplegable-en-wordpress-y-mejorar-la-navegacion-de-tu-sitio-web","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/menu-dropdown-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-dropdown-menu","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-dropdown-menu","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/20662","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\/355"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=20662"}],"version-history":[{"count":18,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/20662\/revisions"}],"predecessor-version":[{"id":41413,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/20662\/revisions\/41413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media\/20663"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=20662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=20662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=20662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}