Hoe u uw eigen kleverige koptekstbalk maakt, zoals MakeUseOf

Advertentie

Ongeveer een maand geleden introduceerden we een nieuw interface-element in MakeUseOf - een zwevende navigatie- en zoekbalk. De feedback die we hebben gekregen is bijna volledig positief, het interne zoekverkeer is enorm gestegen en sommige lezers hebben gevraagd hoe ze er een voor hun eigen site kunnen maken, dus ik dacht dat ik het zou delen.

We gebruiken jQuery om de balk boven aan het scherm te plakken, maar pas na een bepaald punt. Ik doe dit allemaal in het standaard WordPress-thema - Twenty Eleven, hoewel het natuurlijk kan worden toegepast op elk thema of elke website waarvan u voldoende begrijpt hoe u deze kunt wijzigen.

De HTML

Open eerst de thema's header.php en identificeer de navigatiebalk die we gaan plakken. Zoals ik al zei, de onderstaande code is voor de standaard elfentwintig; die van jou kan variëren.

Voeg eerst een nieuwe DIV-container toe rond deze hele NAV-sectie.

Laten we ook die standaardzoekbalk hiernaartoe verplaatsen. Je zult merken dat het standaard wordt toegevoegd aan de rechterbovenhoek van het thema; vind de lijn

php get_search_form (); en plak het in onze navigatie sectie. Verwijder alle andere instanties ervan in dit bestand.

Als u nu opslaat en vernieuwt, ziet u dat het zoekformulier niet echt in de navigatiebalk wordt weergegeven - het wordt nog steeds in de rechterbovenhoek weergegeven. Dat komt omdat het absoluut met CSS is gepositioneerd, en we zullen dat binnen een seconde verwijderen.

De CSS

Open het hoofdbestand style.css en zoek de sectie voor het zoekformulier:

#branding #searchform {... }

Vervang alles wat erin zit (zou in staat moeten zijn over vier lijnen, inclusief enkele absolute positionering) hiermee:

#branding #zoekformulier { drijven: links; achtergrond: wit; marge: 7px; }

Voel je vrij om de kleur of marge aan te passen. Wijzig de vlotter als u liever wilt dat deze rechts van de balk wordt weergegeven. In dit thema wordt de zoekopdracht uitgebreid wanneer de gebruiker erin klikt; dat valt buiten het bereik van deze tutorial, maar je kunt een soortgelijk effect zien op onze MakeUseOf Search.

jQuery

Als je je afvraagt ​​waarom we jQuery hiervoor gebruiken, is het eenvoudig: CSS is opgelost en kan niet dynamisch worden aangepast. Hoewel we CSS kunnen gebruiken om een ​​plakkerige koptekst te maken, zou dit het bovenste element op de pagina moeten zijn. Het probleem dat we hebben is dat ons menu niet het bovenste element is, dus we kunnen niet beginnen met plakkerigheid. Dit is waar de jQuery wordt gebruikt; we kunnen controleren wanneer de gebruiker een bepaald punt voorbij gaat; en dan, en pas dan, plak het.

Begin met het toevoegen van jQuery aan je thema. Uw thema is mogelijk al geladen; zo niet, geen zorgen. Je kunt het ofwel in de wachtrij plaatsen door de volgende code toe te voegen aan je functies.php, zoals zo:

php. functie 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');

Of je kunt WordPress gewoon helemaal omzeilen en dit hardcore in het headerbestand plaatsen. Voeg ergens in je hoofdgedeelte deze regel toe:

Als je de eerste methode gebruikt, wordt deze geladen geen conflict modus, wat betekent dat u "jQuery" in uw code moet gebruiken om toegang te krijgen tot jQuery-functies. Als u de tweede methode gebruikt om deze rechtstreeks aan uw koptekst toe te voegen, kunt u de standaard jQuery-accessor van gebruiken $. Ik ga uit van de tweede methode in de onderstaande code.

Dus, om een ​​echte jQuery-code toe te voegen, plaatst u het volgende ergens aan het einde van uw header.php - Ik heb de mijne net voor de

Het eerste dat het script doet, is uitzoeken waar de navigatiebalk begint en onthoudt die waarde. Ten tweede hechten we aan de scroll-gebeurtenis - dit betekent dat elke keer dat de gebruiker door de pagina scrolt, we dit codeblok kunnen uitvoeren. Wanneer de code wordt uitgevoerd, zijn er twee manieren waarop deze kan worden gebruikt:
1. Als het venster voorbij de navigatiebalk is gescrold, maken we er een vaste CSS van (dit is het "plakkerige" deel).
2. Als de bovenkant van het venster hoger is dan de oorspronkelijke positie van de navigatiebalk (dwz de gebruiker scrolt weer omhoog), zetten we deze terug naar de standaard statische positie.

Er zijn twee punten waarop ik uw aandacht wil vestigen:

• De +288 zit erin om de fout van het krijgen van een verkeerde positie op te lossen; zonder dit veroorzaakt de balk te snel zijn plakkerige toestand - verwijder hem om te zien wat ik bedoel. Dit is niet voor alle thema's nodig en u kunt waarschijnlijk met een betere oplossing komen.
• Om het probleem van de veranderende breedte van de navigatiebalk wanneer het in de plakkerige toestand gaat te verhelpen, bewerkt u de style.css, regel 550, om te lezen 1000 px in plaats van 100%

Dat is alles, uw navigatiebalk zou nu mooi plakkerig moeten zijn.

Overzicht:

De volledige vervanging header.php code voor deze tutorial is te vinden op deze pastebin; en de vervanging style.csshier. Ik hoopte dat je deze kleine tutorial leuk vond; als je problemen ondervindt, plaats dit dan in de reacties, maar vergeet niet om je site openbaar toegankelijk te maken, zodat ik zelf kan gaan kijken. Als je hier nieuw bent, bekijk dan zeker al onze andere blogger en webontwikkelingsartikelen.