Petite astuce comment coder une barre de navigation déroulante

Vous les avez donc vues sur les sites Web d'autres personnes et vous voulez savoir comment vous pouvez en avoir un aussi? Le menu de navigation qui défile sur de nombreux sites Web est très facile à reproduire dans WordPress. Aidez vos lecteurs, laissez-les cliquer sur le menu à n’importe quel point de la page. Voici comment…


Étape 1 Ajouter une nouvelle zone de menu à functions.php

Tout d'abord, vous avez besoin d'un menu pour pouvoir l'afficher sur la page. Créons un nouveau appelé 'navigation de fond'. Voici le code le plus élémentaire pour configurer ce menu dans votre functions.php fichier:

 register_nav_menus (array ('topnavigation' => __ ('Navigation du haut', 'VOTRE NOM DU THÈME VA ICI')));

Si vous avez déjà un register_nav_menus fonction mise en place, ajoutez le 'navigation de fond'ligne de menu à cette fonction.


Étape 2: Remplissez vos bottes (et votre menu)

Allez dans votre tableau de bord, ouvrez l'onglet des menus. Créez un nouveau menu et assignez-le à l'espace que vous venez d'appeler "Navigation principale". Puis remplissez le menu avec des pages. Je viens de partir pour une maison, un magasin, des événements et un blog - vous utilisez ce que vous voulez.


Étape 3 Appelez votre menu

Vous devez appeler votre menu tout en haut de votre corps dans le header.php fichier. Il est très important que vous enveloppiez ce menu dans un wrapper div de votre choix. J'ai choisi un div appelé navigation de fond. Nous aurons besoin de tout faire dans cette div déplacer avec la page plus tard. C'est le moyen le plus simple de le faire.

Utilisez le code suivant dans header.php:

 
«topnavigation»)); ?>

Cela devrait vous donner quelque chose qui ressemble à ceci sur votre page:

Bien sûr, votre thème sera différent. Le mien est juste une installation de base underscores.me avec une grille simple de Get Skeleton.


Étape 4 Donnons-lui un peu de style.css

Après cela, nous pouvons commencer à styliser. Pour que nous puissions voir ce que nous faisons, commençons par ajouter un peu de CSS pour lui donner une couleur d’arrière-plan. Nous voulons qu’il soit 100% largeur afin qu’il ne paraisse pas bizarre lorsque nous le faisons défiler immédiatement..

Utilisez le code suivant dans style.css ou quelle que soit votre feuille de style s'appelle:

 #topnavigation width: 100%; couleur de fond: # 999; 

Actualisez votre page et vous verrez (si vous avez suivi) ceci:


Étape 5: le placer au centre

Maintenant, nous voulons nous assurer que nos liens vont au centre de cette barre grise. Nous allons donc créer un élément de navigation autour du menu de navigation:

 

Ensuite, nous devons donner du style à cette nouvelle navigation. On peut faire ça comme ça:

 #topnavigation nav width: 940px; // la largeur de votre conteneur div peut être différente margin: 0 auto;  #topnavigation li display: inline; rembourrage: 10px; marge: 20px 0; 

Ces deux éléments combinés feront en sorte que le menu de navigation de votre page ressemble à ceci:


Étape 6: Fixer pour faire défiler

Enfin, nous sommes prêts à le faire défiler. La meilleure façon de le faire est de le fixer en haut de la fenêtre, puis de le placer au dessus de tous les autres éléments de la page..

Mettez à jour votre #topnavigation style à ressembler à ceci:

 #topnavigation width: 100%; couleur de fond: # 999; position: fixe; // Collez-le en haut de la fenêtre z-index: 1; // Faites-le flotter au-dessus de tous les autres éléments height: 50px; // nous donne un point de référence pour la dernière chose

Mais si vous rechargez votre fenêtre, vous remarquerez que, du fait que la navigation est flottante, tous les autres contenus sont autorisés à passer en dessous..

Pour résoudre ce problème, ajoutez une marge en haut du conteneur. div avec tout le reste dedans. Dans mon modèle, cela div est appelé #page. Je vais donc ajouter ceci à mon fichier CSS:

 #page padding-top: 60px; // La hauteur de mon div topnavigation plus un peu de rembourrage supplémentaire pour le plaisir visuel

Cela vous laissera avec ceci:

Après cela, vous pouvez personnaliser la navigation à votre guise!