Comment faire votre propre barre d'en-tête collante comme MakeUseOf

Publicité

Il y a environ un mois, nous avons introduit un nouvel élément d'interface dans MakeUseOf - une barre de navigation et de recherche flottante. Les commentaires que nous avons reçus sont presque entièrement positifs, le trafic de recherche interne a explosé et certains lecteurs ont demandé comment en créer un pour leur propre site. J'ai donc pensé partager.

Nous utiliserons jQuery pour coller la barre en haut de l'écran, mais seulement au-delà d'un certain point. Je ferai tout cela dans le thème WordPress par défaut - Twenty Eleven, mais bien sûr, il peut être appliqué à n'importe quel thème ou site Web que vous comprenez suffisamment comment modifier.

Le HTML

Tout d'abord, ouvrez le thème header.php et identifiez la barre de navigation que nous allons rendre collante. Comme je l'ai dit, le code ci-dessous est pour le vingt-onze par défaut; le vôtre peut varier.

Tout d'abord, ajoutez un nouveau conteneur DIV entourant toute cette section NAV.

Déplacez également cette barre de recherche par défaut ici. Vous remarquerez qu'il est ajouté par défaut en haut à droite du thème; trouver la ligne

php get_search_form (); et collez-le dans notre section de navigation. Supprimez toutes ses autres instances dans ce fichier.

Si vous enregistrez et actualisez maintenant, vous verrez que le formulaire de recherche n'apparaît pas réellement dans la barre de navigation - il apparaît toujours en haut à droite. C'est parce qu'il a été positionné absolument avec CSS, et nous allons supprimer tout cela dans une seconde.

Le CSS

Ouvrez le fichier principal style.css et recherchez la section du formulaire de recherche:

#branding #searchform {... }

Remplacez tout ce qui se trouve à l'intérieur (devrait pouvoir contenir environ quatre lignes, y compris un positionnement absolu) par ceci:

#branding #searchform { flotteur: gauche; fond: blanc; marge: 7px; }

N'hésitez pas à ajuster la couleur ou la marge. Modifiez le flotteur si vous préférez qu'il apparaisse à droite de la barre. Dans ce thème, la recherche est définie pour s'étendre lorsque l'utilisateur clique à l'intérieur; cela sort du cadre de ce didacticiel, mais vous pouvez voir un effet similaire sur notre recherche MakeUseOf.

jQuery

Si vous vous demandez pourquoi nous utilisons jQuery pour ce faire, c'est simple: CSS est fixe et ne peut pas être ajusté dynamiquement. Bien que nous puissions utiliser CSS pour créer un en-tête collant, il faudrait que ce soit l'élément supérieur de la page. Le problème que nous avons, c'est que notre menu n'est pas l'élément supérieur, donc nous ne pouvons pas commencer par être collant. C'est là que jQuery est utilisé; nous pouvons vérifier quand l'utilisateur dépasse un certain point; alors, et alors seulement, rendez-le collant.

Commencez par ajouter jQuery à votre thème. Votre thème l'a peut-être déjà chargé; sinon, pas de soucis. Vous pouvez soit le mettre en file d'attente, en ajoutant le code suivant à votre functions.php, comme ceci:

php. function my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Ou vous pouvez simplement contourner complètement WordPress et l'intégrer dans le fichier d'en-tête. Quelque part dans votre section de tête, ajoutez simplement cette ligne:

Si vous utilisez la première méthode, elle sera chargée dans pas de conflit mode, ce qui signifie que vous devrez utiliser "jQuery" dans votre code pour accéder aux fonctions jQuery. Si vous utilisez la deuxième méthode pour l'ajouter directement à votre en-tête, vous pouvez utiliser l'accesseur jQuery standard de $. Je suppose que la deuxième méthode dans le code ci-dessous.

Donc, pour ajouter du code jQuery réel, placez ce qui suit quelque part à la fin de votre header.php - J'ai placé le mien juste avant le

La première chose que fait le script est de déterminer où commence la barre de navigation et de se souvenir de cette valeur. Deuxièmement, nous attachons à l'événement scroll - cela signifie que chaque fois que l'utilisateur fait défiler la page, nous pouvons exécuter ce bloc de code. Lorsque le code s'exécute, il y a deux façons de procéder:
1. Si la fenêtre a défilé devant la barre de navigation, nous en faisons un CSS fixe (c'est la partie «collante»).
2. Si le haut de la fenêtre est plus élevé que la position d'origine de la barre de navigation (c'est-à-dire que l'utilisateur a fait défiler à nouveau), nous la remettons à la position statique par défaut.

Je voudrais attirer votre attention sur deux points:

• Le +288 est là pour corriger le bug d'obtenir une position incorrecte; sans elle, la barre déclenche son état collant trop tôt - retirez-la pour voir ce que je veux dire. Cela ne sera pas nécessaire dans tous les thèmes, et vous pouvez probablement trouver une meilleure solution.
• Pour résoudre le problème de la modification de la largeur de la barre de navigation lorsqu'elle passe à l'état collant, modifiez le style.css, ligne 550, pour lire 1000px au lieu de 100%

Voilà, votre barre de navigation devrait maintenant être bien collante.

Sommaire:

Le remplacement complet header.php le code de ce didacticiel se trouve à l'adresse cette boîte à pâte; et le remplacement style.cssici. J'espère que vous avez apprécié ce petit tutoriel; si vous rencontrez des problèmes, publiez-les dans les commentaires, mais n'oubliez pas de rendre votre site accessible au public afin que je puisse y aller moi-même. Si vous êtes nouveau ici, assurez-vous de consulter tous nos autres articles de blogueur et de développement Web.