Comment faire votre propre barre d`en-tête collante comme makeuseof

Il y a un mois, nous avons introduit un nouvel élément d`interface à MakeUseOf - une navigation flottante et barre de recherche. Les commentaires que nous avons reçu est presque entièrement positif, le trafic de recherche interne est monté en flèche, et certains lecteurs ayant posé des questions sur la façon de faire un pour leur propre site, donc je pensais que je partage.

Nous allons utiliser jQuery pour coller la barre en haut de l`écran - mais seulement passé un certain point. Je ferai tout cela dans le thème par défaut WordPress - Vingt Eleven, mais bien sûr, il peut être appliqué à un thème ou site web que vous comprenez suffisamment comment modifier.

le code HTML

Tout d`abord, ouvrez les thèmes header.php et identifient la barre de navigation que nous allons faire collante. Comme je l`ai dit, le code ci-dessous est la valeur par défaut vingt-onze heures vôtre peut varier.

Tout d`abord, ajouter un nouveau conteneur DIV entourant toute cette section de NAV.

En outre, nous allons passer cette barre de recherche par défaut dans ici. Vous remarquerez qu`il est ajouté par défaut en haut à droite de la THEME- trouver la ligne ? Lt; php get_search_form () - gt?; et le coller dans notre section de navigation. Supprimez toutes les autres instances de celui-ci dans ce fichier.

Video: DIY : Recycler Vos Boîtes de Conserve - Rangement Make up - Make up storage

Si vous enregistrez et rafraîchissez maintenant, vous verrez le formulaire de recherche ne semble pas réellement dans la barre de navigation - il montre toujours en haut à droite. C`est parce qu`il a été positionné tout à fait avec CSS, et nous supprimerons tout cela dans une seconde.

le CSS

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

#branding #searchform {...}

Remplacer tout ce qui est à l`intérieur qui (devrait être en mesure d`environ quatre lignes, y compris un certain positionnement absolu) avec ceci:

#branding #searchform {float: left-fond: marge blanche: 7px -}

Sentez-vous libre d`ajuster la couleur ou de la marge. Changer le flotteur si vous préférez qu`il était sur la droite de la barre. Dans ce thème, la recherche va se développer lorsque l`utilisateur clique à l`intérieur it- qui est hors de portée de ce tutoriel, mais vous pouvez voir un effet similaire sur notre MakeUseOf Search.

jQuery

Si vous vous demandez pourquoi nous utilisons jQuery pour ce faire, il est simple: CSS est fixe et ne peut pas être ajustée de façon dynamique. Alors que nous pourrions utiliser les CSS pour faire une tête collante, il devrait être l`élément supérieur de la page. Le problème que nous avons est que notre menu n`est pas l`élément supérieur, donc nous ne pouvons pas commencer avec elle être collant. C`est là que jQuery est utilisé- nous pouvons vérifier lorsque l`utilisateur passe devant un certain Point- alors, et alors seulement, le rendre collant.

Commencez par ajouter jQuery à votre thème. Votre thème peut avoir déjà loaded- sinon, pas de soucis. Vous pouvez enqueue il, en ajoutant le code suivant à votre functions.php, comme ceci:

lt;? phpfunction 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`) - gt?;

Ou vous pouvez simplement contourner WordPress en tout et hardcore ce dans le fichier d`en-tête. Quelque part dans votre section de tête, il suffit d`ajouter cette ligne:

Si vous utilisez la première méthode, il sera chargé dans noConflict le mode, ce qui signifie que vous aurez besoin d`utiliser « jQuery » dans votre code pour accéder aux fonctions jQuery. Si vous utilisez la deuxième méthode directement l`ajouter à votre tête, vous pouvez utiliser l`accesseur norme jQuery de $. Je suppose que la deuxième méthode dans le code ci-dessous.

Donc, pour ajouter un peu de code jQuery réel, placez l`endroit suivant à la fin de votre header.php - Je le mien ai placé juste avant la

Video: GIANT CANDY ВЫЗОВ! | We Are The Davises

La première chose que le script fait est de savoir où la barre de navigation commence à, et se souvient de cette valeur. D`autre part, nous attachons à l`événement de défilement - cela signifie que chaque fois que l`utilisateur fait défiler la page, nous pouvons exécuter ce bloc de code. Lorsque le code est exécuté, il y a deux façons dont il peut aller:
1. Si la fenêtre a passé la barre défile de navigation, nous faisons un CSS fixe (ce qui est la partie « collante »).
2. Si le haut de la fenêtre est supérieure à la position initiale de la barre de navigation (par exemple, l`utilisateur a fait défiler revenir à nouveau), nous l`avons mis à la position statique par défaut.

Video: «ЯПОНСКИЙ КОНКУРС ВКУСОВ» | Мы Дэвис

Il y a deux points que je veux attirer votre attention sur:

• 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 - enlever pour voir ce que je veux dire. Ce ne sera pas neccessary dans tous les thèmes, et vous pouvez probablement trouver une meilleure solution.
• Pour résoudre le problème de la largeur de changer la barre de navigation quand il passe à l`état collant, modifier la style.css, ligne 550, à lire 1000px au lieu de 100%

Ca y est, votre barre de navigation devrait maintenant être bien collant.

Résumé:

Le remplacement complet header.php On peut trouver le code pour ce tutoriel à ce pastebin- et le remplacement style.css ici . J`espérais que vous avez apprécié ce petit tutorial- si vous avez des problèmes, ne postez dans les commentaires ou demander à l`écart Réponses MakeUseOf, mais s`il vous plaît rappelez-vous de rendre votre site accessible au public afin que je puisse aller de pair et ont moi-même chercher. Si vous êtes nouveau ici, assurez-vous de vérifier tous nos autres blogueur et articles de développement web.