Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter un menu diapositif dans les thèmes WordPress

L’Ajout d’un menu diapositif à votre site WordPress peut améliorer la navigation, en particulier sur les appareils mobiles. Cette fonctionnalité offre une belle animation fluide lorsque les utilisateurs/utilisatrices tapent sur l’icône du menu.

Un menu responsive permet aux internautes d’explorer plus facilement votre site sur leur téléphone ou leur tablette. Il garantit une expérience de navigation transparente et maintient l’intérêt de votre public.

Dans cet article, nous vous guiderons dans l’ajout d’un menu diapositif à votre thème WordPress. Mieux encore, vous pouvez le faire sans écrire de code.

How to Add a Slide Panel Menu in WordPress Themes

Pourquoi ajouter un menu diapositif dans les thèmes WordPress ?

Des menus bien conçus aident vos internautes à trouver leur chemin sur votre site WordPress. Beaucoup de vos visiteurs utiliseront des appareils mobiles, il est donc important de prévisualiser la version mobile de votre site WordPress pour voir comment votre menu de navigation se présente sur des écrans plus petits.

Version, de nombreux thèmes WordPress sont dotés de styles intégrés qui affichent automatiquement des menus adaptés aux mobiles lorsqu’ils sont vus sur un petit écran.

Toutefois, vous souhaiterez peut-être personnaliser encore davantage votre navigation mobile et ajouter un menu responsive en plein écran ou un menu diapositif animé.

Dans cette optique, voyons comment ajouter un menu diapositif dans les thèmes WordPress.

Comment ajouter un menu diapositif dans les thèmes WordPress

La première chose à faire est d’installer et d’activer le plugin Responsive Menu. Si vous en avez besoin, alors vous pouvez consulter notre guide étape par étape sur l’installation d’un plugin WordPress.

Il existe une version premium de l’extension Responsive Menu avec des thèmes supplémentaires et des fonctionnalités avant comme la logique conditionnelle. Mais pour ce tutoriel, nous utiliserons l’extension gratuite.

Une fois activé, naviguons vers Responsive Menu  » Menus depuis votre tableau de bord WordPress. Une fois là, vous devez cliquer sur le bouton  » Créer un nouveau menu  » en haut de l’écran.

Create a New Responsive Menu

Vous verrez ensuite 4 thèmes que vous pouvez utiliser pour votre nouveau menu responsive. Des thèmes supplémentaires sont disponibles à l’achat.

Pour ce tutoriel, nous utiliserons le thème sélectionné automatiquement. Vous pouvez ensuite cliquer sur le bouton « Suivant ».

Select a Theme for Your Responsive Menu

Vous accédez à la page « Réglages du menu ».

Ici, vous pouvez saisir un nom pour votre menu responsive et sélectionner le menu WordPress que vous souhaitez voir s’afficher dans le panneau. Par exemple, nous avons choisi le menu « Navigation ».

Si vous avez besoin de créer un nouveau menu, alors vous pouvez apprendre à le faire en suivant notre guide sur l’ajout d’un menu de navigation dans WordPress.

Give the Menu a Name and Link It With the WordPress Menu You Wish to Use

Vous pouvez également masquer le menu normal fourni avec votre thème WordPress afin que vos utilisateurs/utilisatrices voient uniquement le nouveau menu diapositif. Pour ce faire, saisissez le code CSS dans le champ « Masquer le menu du thème ».

Le code que vous devez saisir ici varie d’un thème à l’autre, et vous pouvez obtenir plus de détails en cliquant sur le lien « En savoir plus ».

Note : Les utilisateurs/utilisatrices de la version Pro disposent de quelques réglages supplémentaires. Par exemple, les utilisateurs/utilisatrices Pro peuvent sélectionner les appareils et les pages où le menu doit être affiché.

Une fois que vous êtes satisfait des réglages, cliquez sur le bouton « Créer un menu » en bas de la page. Vous accéderez ainsi à une page où vous pourrez personnaliser votre menu.

Vous verrez une Prévisualisation de votre site sur la droite de l’écran, et il y a des boutons en bas pour basculer entre les vues du téléphone, de la tablette et de l’ordinateur. Vous trouverez également des options de personnalisation sur la gauche.

You Can Now Customize Your Responsive Menu

Vous remarquerez peut-être qu’un texte s’affiche au-dessus du menu. Il s’agit du titre du menu et d’une ligne de texte que l’extension appelle « contenu supplémentaire ».

Vous pouvez modifier ou masquer le texte en cliquant sur « Menu mobile » puis sur « Conteneur » dans le menu situé à gauche de la page.

Customize or Hide the Text Shown at the Top of Your Menu

En outre, vous pouvez taper ce que vous voulez dans le champ « Texte du titre », par exemple « Menu principal » ou « Navigation ». Si vous ne souhaitez pas afficher de titre, il vous suffit de diapositive l’interrupteur « Titre » en position inactive.

Ensuite, vous devez défiler vers le bas jusqu’au réglage « Contenu supplémentaire ».

À partir de là, vous pouvez désactiver ce réglage ou saisir un autre contenu. Dans la capture d’écran ci-dessous, vous remarquerez que le commutateur a été désactivé, de sorte que les mots « Add more content here… » sont désormais masqués.

Customize or Hide the Additional Content for Your Menu

Une fois que vous êtes satisfait des réglages du menu, assurez-vous de cliquer sur le bouton « Mettre à jour » au bas de la page pour stocker vos réglages.

L’extension Responsive Menu offre de nombreuses autres options pour modifier le comportement et l’apparence de votre menu diapositif. Vous pouvez explorer ces options sur la page des réglages du plugin et les ajuster selon vos besoins.

Vous pouvez maintenant visiter votre site pour voir le menu en action. Voici ce que cela donne sur notre site de démonstration. Notez que si la page en cours figure dans le menu, elle est mise en évidence par une bande de couleur.

Animation of a Slide Panel Menu in WordPress

Astuce d’expert : Le style de votre menu de navigation WordPress peut améliorer l’apparence et la convivialité de votre site. Un menu bien conçu aide les internautes à trouver facilement ce dont ils ont besoin et encourage les clics. Pour en savoir plus sur ce Sujet, consultez notre guide sur les différentes façons de styliser votre menu de navigation WordPress.

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter un menu diapositif dans les thèmes WordPress. Ensuite, vous voudrez peut-être aussi apprendre comment créer un menu déroulant et comment afficher différents menus aux utilisateurs/utilisatrices connectés dans WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

16 commentairesLaisser une réponse

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mohammad Kashif

    Awesome!
    Can i add close button in the popout?

  3. Luke Marshall

    I’m still waiting on a support ticket reply from you guys regarding this exact need! the one you offer is on the right side only with no apparent way to change it to the left, I’m glad I’ve found this.

    • Cynthia

      Change the function « left » to « right » in the two spots it is used in the function code.

  4. Ru

    Do you have demo for this?
    I want to check it before

  5. Ann

    Hi, this code works perfectly when I run my website locally but not once it’s live. Is there any possible explanation to this? I updated the image links not sure what else needs to be updated as the folders have not changed.

  6. Mattia

    Hi, interesting article… Do you have a DEMO of this, or a URL to an online site in which you implemented it? It would be interesting to see it in a real case, before trying to use it! Many thanks

  7. Jim

    Is it possible to show how the script could be modified so the close event can be triggered by clicking anywhere else but on the navigation?

    In other words, so the user doesn’t need to just click on the toggle menu icon to close the navigation sidebar?

    Thanks.

  8. Karl

    I am searching high and low for a plugin or the ability to implement the type of menu you have currently running at the top of your page. You have a « Play » button on the right side of your header. Upon pressing it a content area slides out from your header section. I really want to use this type of menu in my site. If you could point me even to a link where this type of menu is explained I’ll take it from there and thanks. This is an awesome tutorial!

    • WPBeginner Support

      Karl you can right click on the play button and select inspect element and study our source code. We will also try to cover it soon at WPBeginner as a tutorial.

      Administrateur

      • Shubham Dubey

        Sorry for replying here,(Comments is not available)

        Hey! I’m using Genesis framework, with its child theme, i’m unable to find header.php file there,

        i just copied the header.php file from genesis to my child themes folder, but after opening header.php file didn’t found any lines :(

        hOW TO DO THIS WITH CHILD THEMES, PLEASE EXPLAIN.

  9. Jim

    Excellent guide. I’m almost there with a test implementation, however I’m wondering…can I use a relative path in the sidepanel.js file instead of the absolute path?

    I’ve tried to do so but I cannot figure it out. Should the relative path be relative to the html file calling the javascript?

    Thanks

  10. krish

    It’s good and useful content. The screenshot and coding easily understand and apply to my website. Good job man!!!

  11. Håkon Stillingen

    Interesting article. How would I go about replacing default header in Genesis Framework?

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.