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…
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.
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.
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.
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:
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:
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!