Comment faire un menu déroulant dans WordPress-tutoriel CSS-php.cn

Vous souhaitez créer un menu déroulant dans WordPress? Vous êtes venu au bon endroit! Dans ce tutoriel, je vais vous apprendre à créer une conception professionnelle de menu déroulant.

Les menus de navigation ont un petit moment sous les projecteurs. Des menus de hamburger pour mobile via des méga menus pour les magasins aux menus collants pour une expérience utilisateur améliorée, il y a un excellent choix dans la façon dont vous pouvez présenter votre menu de navigation sur votre site WordPress.

Mais que se passe-t-il si vous voulez créer un menu déroulant directement pour les gobelettes pour les WordPress avec quelques-uns de haut niveau? Menus comme Mega Menus et Burger Menus, c'est une bonne idée d'apprendre à créer un menu déroulant. Cela sera utile sur plus de sites que vous ne l'imaginez (tous les sites n'ont pas besoin d'un menu de fantaisie), et cela vous donnera les bases dont vous avez besoin pour commencer à créer des menus plus avancés.

Si vous préférez regarder notre vidéo sur la création d'un menu déroulant dans HTML pour WordPress, je vais simplement vous montrer. CSS pour cibler le HTML qui est sorti par la fonction de menu WordPress. Ceci est conçu pour être utilisé dans un thème que vous codiez vous-même, et non pour un thème tiers, qui aura déjà son propre menu. Cependant, si vous travaillez avec un thème tiers dont le menu n'est pas déroulant et que vous souhaitez l'ajouter, alors vous devrez créer un thème d'enfant et ajouter votre code de menu à cela.

Voici ce que vous apprendrez dans ce tutoriel de conception de menu déroulant

Comment faire un menu déroulant dans WordPress

Comprenez comment les menus déroulants WordPress travaillent avec la fonction de menu intégrée. en html.

Créez votre conception de menu déroulant.

De ce dont vous aurez besoin pour créer un menu de navigation déroulant en HTML sur WordPress
pour suivre ce didacticiel, vous aurez besoin:

un thème que vous codiez vous-même éditeur

1. Fonctionnalité de menu intégrée de WordPress

La première chose que vous devrez comprendre est le fonctionnement des menus déroulants WordPress. 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 bonne structure.
Chaque élément de votre menu de navigation est en fait un message dans le tableau WP_Posts dans votre base de données, pas un post normal, mais un type spécial de publication uniquement pour la cible.
Dans votre thème, ouvrez le fichier header.php . Vous devriez être en mesure de trouver cette ligne:
```
wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); 
```
Copier après la connexion
Copier après la connexion
Votre fonction peut sembler un peu différente en fonction des paramètres, mais décomposons l'exemple ci-dessus et voyons ce que chaque élément fait:
- Container_class est la classe CSS qui sera donnée au conteneur dans lequel le menu est enlevé. Dans ce cas, c'est le NAV principal. C'est ce que nous viserons avec notre CSS plus tard.
- thème_location = & gt; primaire . Vous ne pouvez l'utiliser que pour un seul menu. But you may want to use additional parameters, which you can find in the WordPress handbook page on wp_nav_menu() Function
 Before we can add CSS for our dropdown menu, it helps to be familiar with the code that WordPress generates for menus.
 
 Here's a typical drop-down menu example for a small business, shown in the Menus admin Écran:
 
 Maintenant, voici le menu de navigation déroulante en html:
```
<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> 
```
 Copier après la connexion
 Copier après la connexion
 Création d'un menu déroulant dans HTML se compose d'un code que nous devons comprendre avant de commencer avec notre menu déroulant pour WordPress:
 - une Div avec le WP_NAV_MEUM Cela, un menu-navbar et les éléments de classe li
 - est un autre éléments li à l'intérieur - les éléments de menu de deuxième niveau. C'est cela que nous voulons abaisser lorsque l'utilisateur plane sur l'élément de menu de niveau supérieur.
 Donc, nous savons maintenant ce qui est sorti par WordPress, nous pouvons déterminer les éléments que nous voulons cibler avec notre CSS pour le menu Drop-Down. Choses:
 
 Lorsque la page est ouverte, les éléments de menu de deuxième niveau sont masqués.
 
 Lorsque l'utilisateur plane sur un élément de haut niveau, les éléments de deuxième niveau ci-dessous apparaissent. Les éléments de deuxième niveau par défaut.
 - Cela masquera l'élément ul
 , cependant, car il nécessite un ul
 à l'intérieur du menu. Il sera maintenant caché. Corrigeons cela.
 
 Conception du menu déroulant: création d'éléments de deuxième niveau qui apparaissent sur le survol
```
main-nav ul ul { display: none; } 
```
 Copier après la connexion
 Copier après la connexion
 Nous devons maintenant nous assurer que le LI
 sera affiché lorsque l'élément UL UL de niveau supérieur.
 
 Ajout de style de mise en page à la liste de deuxième niveau
 
 Ouvrez votre feuille de style et trouvez la ligne avec position: Absolute donne la liste de deuxième niveau de positionnement absolu, le retirant du flux d'éléments dans la page. Pour l'élément de niveau supérieur, en haut: 3EM positionne le haut de la liste par rapport au haut de l'élément dans lequel il est à l'intérieur, à savoir l'élément de liste de niveau supérieur. Ceci à gauche: 0 place la liste à gauche, par rapport à l'élément ci-dessus.
- 99999 s'assure qu'il est affiché en plus de tout le reste. Voyez lorsque nous survons sur l'élément de niveau supérieur:
3. Making Your Drop-Down Menu Mobile-Friendly
The simple drop-down menu code above is great for the desktop version of the site, but the reality is that most people will be visiting your site on a mobile phone.
The menu here is too big to fit onto a small screen, so the best solution is to edit the CSS for our drop-down menu on small screens and use some JavaScript to create a burger menu.

Voici comment le faire.

Ajout d'une icône de menu à la bannière d'un menu déroulant sur WordPress

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

Ajoutez ce Allez:

qui sortira le symbole du burger, en utilisant le code HTML pour le symbole, à l'intérieur d'un élément avec une classe que nous utiliserons pour le cacher sur des écrans plus grands.

Ajoutant du CSS pour le menu Burger Vous devez maintenant ajouter le CSS à votre feuille de style. Tout d'abord, cachez l'icône sur les écrans plus grands:
```
wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); 
```
Copier après la connexion
Copier après la connexion
Maintenant, dans une requête multimédia, ajoutez le CSS pour le menu:

Remarque que vous devrez modifier cela si vous utilisez différentes classes et ID dans votre thème.

Ajout de la JavaScript
```
<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> 
```
Copier après la connexion
Copier après la connexion
L'étape finale est d'ajouter un script pour faire apparaître le menu lors de la circulation. Créez un dossier dans votre thème appelé
scripts
```
main-nav ul ul { display: none; } 
```
Copier après la connexion
Copier après la connexion
, et à l'intérieur, un nouveau fichier appelé
burger-menu.js
, et ajoutez-y:

Assurez-vous maintenant que le script est appelé par le thème. Dans le fichier functions.php

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

Lorsque votre site a besoin d'un menu avec plusieurs niveaux, mais vous n'avez pas besoin de beaucoup de liens en dehors de votre menu de niveau supérieur, un menu déroulant est le moyen le plus simple pour y parvenir. Le site que j'ai utilisé pour démontrer que cela n'a qu'un seul élément dans son menu avec d'autres éléments en dessous, et il n'y en a que trois. L'utilisation d'un mega menu serait exagérée, et un menu à un seul niveau ne me permettrait pas d'afficher tout ce que je veux.

C'est tout! C'est comment faire un menu déroulant dans HTML

Pouvoir ajouter un menu comme celui-ci à vos thèmes vous donnera plus de flexibilité avec vos menus et améliorer l'expérience utilisateur. Et vous pouvez le faire avec seulement quelques lignes de CSS.