Comment créer un menu déroulant dans WordPress ?

Par : TutorialsGrey, le 08 Mai 2022

Les menus de navigation ont un petit moment sous les projecteurs. Des menus burger pour les mobiles aux méga-menus pour les magasins en passant par les menus collants pour une expérience utilisateur améliorée, il existe un grand choix dans la façon dont vous pouvez présenter votre menu de navigation sur votre site WordPress.

Mais que faire si vous souhaitez créer un menu simple avec quelques éléments de niveau supérieur et d'autres éléments qui descendent lorsque l'utilisateur les survole ?

Avant de vous lancer dans le codage de menus avancés comme les méga-menus et les menus burger, c'est une bonne idée d'apprendre à créer un menu déroulant. Cela s'avérera utile sur plus de sites que vous ne l'imaginez (tous les sites n'ont pas besoin d'un menu fantaisiste), et cela vous donnera les bases nécessaires pour commencer à créer des menus plus avancés.

 

Dans ce tutoriel, je vais vous montrer comment créer un menu déroulant dans votre thème WordPress, en utilisant les propriétés CSS pour cibler le HTML qui est produit par la fonction menu de WordPress. Ce tutoriel est conçu pour être utilisé dans un thème que vous codez vous-même, et non pour un thème tiers, qui aura déjà son propre menu. Toutefois, si vous travaillez avec un thème tiers dont le menu n'est pas déroulant et que vous souhaitez ajouter cette fonction, vous devrez créer un thème enfant et y ajouter le code de votre menu.

 

Prérequis : Ce dont vous aurez besoin

Pour suivre ce tutoriel, vous aurez besoin :

  • une installation de développement de WordPress
  • un thème que vous coderez vous-même, ou un thème enfant d'un thème tiers si vous souhaitez modifier le menu
  • un éditeur de code

 

La fonctionnalité de menu intégrée de WordPress

La première chose que vous devez comprendre est la façon dont WordPress génère les menus. Contrairement aux sites statiques, les menus ne sont pas codés en dur dans votre site. Au lieu de cela, WordPress utilise une fonction PHP pour interroger la base de données et récupérer les éléments du menu de navigation, puis les afficher dans la structure appropriée.

Chaque élément de votre menu de navigation est en fait un article dans la table wp_posts de votre base de données - pas un article normal, mais un type spécial d'article utilisé uniquement pour les éléments du menu de navigation, avec ses propres métadonnées comprenant le texte à afficher et la cible du lien.

Dans votre thème, ouvrez le fichier header.php. Vous devriez pouvoir trouver cette ligne :

wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) );

 

Votre fonction peut être légèrement différente en fonction des paramètres, mais décomposons l'exemple ci-dessus et voyons ce que fait chaque élément :

  • wp_nav_menu() est la fonction qui récupère un menu de navigation et le génère.
  • Les paramètres sont ensuite regroupés dans un tableau.
  • container_class est la classe CSS qui sera donnée au conteneur dans lequel le menu est enveloppé. Dans ce cas, il s'agit de main-nav. C'est ce que nous allons cibler avec notre CSS plus tard.
  • theme_location => primary indique à WordPress qu'il s'agit de la navigation principale. Si je crée un menu dans les écrans d'administration et que je coche la case Primary, alors ce menu sera utilisé à cet endroit dans le code.

Parfois, vous pouvez vouloir ajouter un menu de navigation ailleurs dans votre thème, par exemple dans le pied de page, auquel cas vous ne voulez pas utiliser theme_location => primary. Vous ne pouvez l'utiliser que pour un seul menu. Mais vous pouvez utiliser des paramètres supplémentaires, que vous pouvez trouver dans la page du manuel de WordPress sur wp_nav_menu().

Voici la case à cocher pour la navigation primaire dans l'écran d'administration des menus :

 

 

Code résultant de la fonction wp_nav_menu()

Avant de pouvoir ajouter le CSS pour créer le menu déroulant, il est utile de se familiariser avec le code que WordPress génère pour les menus.

Voici un menu typique pour une petite entreprise, affiché dans l'écran d'administration des menus :

Menu de navigation dans l'écran d'administration

Voici maintenant le résultat HTML pour ce menu :

<div class="main-nav">
    <ul id="menu-navbar" class="menu">
        <li id="menu-item-610" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-609 current_page_item menu-item-610"><a href="https://121interviewcoaching.co.uk/">Home</a></li>
        <li id="menu-item-613" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-613"><a href="https://121interviewcoaching.co.uk/about/">About Me</a></li>
        <li id="menu-item-615" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-615"><a href="https://121interviewcoaching.co.uk/services/">Services</a>
            <ul class="sub-menu">
                <li id="menu-item-618" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-618"><a href="https://121interviewcoaching.co.uk/services/services-for-individuals/">Preparing for interviews / individuals</a></li>
                <li id="menu-item-617" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-617"><a href="https://121interviewcoaching.co.uk/services/services-for-groups/">Preparing for interviews / groups</a></li>
                <li id="menu-item-619" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-619"><a href="https://121interviewcoaching.co.uk/services/conducting-interviews/">Conducting interviews</a></li>
            </ul>
        </li>
        <li id="menu-item-30780" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30780"><a href="https://121interviewcoaching.co.uk/succeed-at-your-next-job-interview/">My Book</a></li>
        <li id="menu-item-614" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-614"><a href="https://121interviewcoaching.co.uk/clients-2/">Clients</a></li>
        <li id="menu-item-616" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-616"><a href="https://121interviewcoaching.co.uk/interview-tips/">Interview Tips</a></li>
        <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="https://121interviewcoaching.co.uk/where-i-work/">Areas covered</a></li>
        <li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://121interviewcoaching.co.uk/contact/">Contact &#038; Links</a></li>
    </ul>
</div><!-- #main-nav -->

Si vous examinez ce code, vous verrez qu'il se compose de :

  • Un div avec la classe main-nav, définie dans la fonction wp_nav_menu().
  • A l'intérieur de celle-ci, un ul avec l'ID menu-navbar et la classe menu. Ce sont des valeurs par défaut définies par WordPress.
  • À l'intérieur, un certain nombre d'éléments li, chacun avec la classe menu-item menu-item-type-post_type, plus d'autres classes spécifiques au type d'article auquel l'élément de menu mène et l'état de cet élément de menu à ce moment-là. Chacun d'entre eux possède également un ID unique, dont le numéro correspond à l'ID du post de l'élément de menu de navigation dans la base de données.
  • À l'intérieur de l'un des éléments li se trouve un autre ul contenant ses propres éléments li - les éléments de menu de deuxième niveau. C'est ce dernier que nous voulons faire apparaître lorsque l'utilisateur survole l'élément de menu de premier niveau.

 

Codage du CSS pour créer le menu déroulant

Maintenant que nous connaissons les résultats obtenus par WordPress, nous pouvons déterminer les éléments que nous voulons cibler avec notre CSS.

Nous voulons réaliser deux choses :

  • Lorsque la page est ouverte, les éléments du menu de second niveau sont masqués.
  • Lorsque l'utilisateur survole un élément de premier niveau, les éléments de second niveau situés en dessous apparaissent.

 

Masquage par défaut des éléments de second niveau

Dans la feuille de style de votre thème, commencez par masquer les éléments de second niveau par défaut.

Ajoutez ceci :

main-nav ul ul {
    display: none;
}

Cela permet de masquer l'élément ul à l'intérieur d'un autre élément ul dans l'élément main-nav. Cependant, elle ne masquera pas un élément ul de niveau supérieur, car il faut qu'un élément ul soit imbriqué dans un autre élément ul à l'intérieur du menu.

Maintenant, si vous ouvrez la page et essayez d'afficher les éléments de second niveau, ce ne sera pas possible - ils seront cachés. Corrigeons cela.

 

Faire apparaître les éléments de second niveau au survol de la souris

Nous devons maintenant nous assurer que le ul imbriqué dans le li de premier niveau s'affiche lorsque le li de premier niveau est survolé.

Ajoutez ceci à votre feuille de style :

.main-nav ul li:hover > ul {
    display: block;
}

Maintenant, lorsque vous passez votre souris sur l'élément de niveau supérieur, la liste située en dessous apparaît. Mais vous constaterez qu'elle ne s'affichera pas comme vous le souhaitez. Plus précisément, elle repousse vers le bas le contenu situé sous le menu. Nous voulons qu'il apparaisse comme s'il flottait au-dessus du contenu. Pour résoudre ce problème, nous devons ajouter un style de mise en page à notre élément ul ul.

 

Ajout d'un style de mise en page à la liste de second niveau

Ouvrez votre feuille de style et trouvez la ligne contenant display : none. Modifiez ce bloc pour ajouter un style de mise en page :

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 3em;
    left: 0;
    z-index: 99999;
    width: 180px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
}

Vous devez également donner à l'élément de liste de niveau supérieur un positionnement relatif :

.main-nav li {
    position: relative;
}

Voyons ce que fait ce code :

  • position : absolute donne à la liste de deuxième niveau un positionnement absolu, la sortant du flux des éléments de la page. Pour l'élément de niveau supérieur, position : relative place la liste de niveau supérieur dans le flux de la page et permet de placer un élément positionné de manière absolue à l'intérieur de celle-ci.
  • top : 3em positionne le haut de la liste par rapport au haut de l'élément qu'elle contient, à savoir l'élément de liste de niveau supérieur. Cette valeur de 3em reflète la hauteur de la barre de navigation de premier niveau. Modifiez la vôtre si votre barre de navigation de premier niveau a une hauteur différente.
  • left : 0 place la liste à gauche, par rapport à l'élément qui la précède.
  • z-index : 99999 définit l'emplacement de l'élément dans un modèle tridimensionnel de la page. Une valeur élevée de 99999 garantit l'affichage de l'élément au-dessus de tout le reste.
  • Le reste du code donne de la largeur à la liste et lui ajoute du style d'affichage, notamment une ombre pour donner l'impression qu'elle se trouve en haut de la page.

Voyons maintenant ce que nous obtenons lorsque nous survolons l'élément de premier niveau :

Survoler le menu

Cela fonctionne ! Lorsque je passe la souris sur l'élément de premier niveau, le menu déroulant s'affiche maintenant.

 

 

Adaptation de votre menu déroulant aux téléphones portables

Le code ci-dessus est parfait pour la version de bureau du site, mais la réalité est que la plupart des gens visiteront votre site sur un téléphone portable.

Le menu est trop grand pour tenir sur un petit écran. La meilleure solution consiste donc à modifier le CSS pour les petits écrans et à utiliser un peu de JavaScript pour créer un menu de type burger.

Voici comment procéder.

 

Ajout d'une icône de menu à la bannière

Tout d'abord, ajoutez l'icône sur laquelle les utilisateurs devront appuyer pour accéder au menu sur un petit écran.

Ajoutez-la au fichier header.php, à l'endroit où vous souhaitez placer l'icône du menu :

<a class="toggle-nav" href=“#">&#9776;</a>

Le symbole du hamburger s'affichera, en utilisant le code HTML du symbole, dans un élément avec une classe que nous utiliserons pour le masquer sur les écrans plus grands.

 

Ajout du CSS pour le menu Burger

Vous devez maintenant ajouter le CSS à votre feuille de style. Tout d'abord, masquez l'icône sur les grands écrans :

.toggle-nav {
 
    display: none !important;
 
}

Maintenant, dans une requête média, ajoutez le CSS pour le menu :

@media screen and ( max-width: 550px) {
     
    
    a.toggle-nav {
        float: right;
        margin: 0 0 0.5em 0.5em;
        display: inline-block !important;
        color: #fff;
        transition: color linear 0.15s;
    }
     
    a.toggle-nav:hover, a.toggle-nav:active {
        text-decoration: none;
        color: #fff;
    } 
    
    .menu-header {
        display: inline-block;
        position: relative;
        margin: 0;
        width: 100%;
    }
     
    #access .menu-header ul {
        display: none;
        position: absolute;
        top: 80%;
        right: 0px;
        min-width: 200px;
        background-color: #7B3D84;
        font-size: 1.2em;
    }
     
    #access .menu-header li {
        display: block;
        float: none;
        padding-right: 2%;
        text-align: right;
    }
    #access ul li:hover > ul {
        display: none;
    }
          
}

Notez que vous devrez modifier ces paramètres si vous utilisez des classes et des identifiants différents dans votre thème.

 

Ajout du JavaScript

L'étape finale consiste à ajouter un script pour faire apparaître le menu lorsqu'un utilisateur appuie sur l'icône. Créez un dossier dans votre thème appelé scripts, et à l'intérieur de celui-ci, un nouveau fichier appelé burger-menu.js, et ajoutez-y ceci :

jQuery(document).ready(function() {
    jQuery('.toggle-nav').click(function(e) {
        jQuery('.menu-header ul.menu').slideToggle(500);
  
        e.preventDefault();
    });
     
});

Assurez-vous maintenant que le script est appelé par le thème. Dans le fichier functions.php de votre thème, ajoutez une fonction pour mettre en file d'attente le script :

function tutsplus_burger_menu_scripts() {
     
    wp_enqueue_script( 'burger-menu-script', get_stylesheet_directory_uri() . '/scripts/burger-menu.js', array( 'jquery' ) );
  
}
add_action( 'wp_enqueue_scripts', 'tutsplus_burger_menu_scripts' );

Maintenant, sauvegardez tous vos fichiers, et vous aurez un menu de burger sur les petits écrans.

menu burger

 

Conclusion

Les menus déroulants sont utiles pour les petits menus à plusieurs niveaux

Lorsque votre site a besoin d'un menu à plusieurs niveaux mais que vous n'avez pas besoin de beaucoup de liens en dehors de votre menu de premier niveau, un menu déroulant est le moyen le plus simple d'y parvenir. Le site que j'ai utilisé pour cette démonstration ne comporte qu'un seul élément dans son menu, avec d'autres éléments en dessous, et il n'y en a que trois. Utiliser un méga-menu serait excessif, et un menu à un seul niveau ne me permettrait pas d'afficher tout ce que je veux.

La possibilité d'ajouter un tel menu à vos thèmes vous donnera plus de flexibilité avec vos menus et améliorera l'expérience utilisateur. Et vous pouvez le faire avec seulement quelques lignes de CSS.