Dela med sig:
Så här gör du din egen klibbiga huvudrad som MakeUseOf
För ungefär en månad sedan introducerade vi ett nytt gränssnittselement till MakeUseOf - en flytande navigations- och sökfält. Feedbacken vi har fått är nästan helt positiv, intern söktrafik har racketat och vissa läsare har frågat om hur man gör en till sin egen webbplats, så jag trodde jag skulle dela.
Vi använder jQuery för att hålla stången överst på skärmen - men bara förbi en viss punkt. Jag gör allt detta i standard WordPress-tema - tjugofem, men det kan naturligtvis tillämpas på alla teman eller webbplatser som du tillräckligt förstår hur man ändrar.
HTML
Först upp, öppna teman header.php och identifiera navigeringsfältet som vi klarar av. Som jag sa är koden nedan för standard tjugo elva; din kan variera.
För det första lägg till en ny DIV-behållare som omger hela NAV-sektionen.
Låt oss också flytta den här standardfältet till här. Du märker att den läggs till som standard högst upp till höger om temat; hitta linjen och klistra in det i vår navigationssektion. Ta bort alla andra instanser i den här filen.
Om du sparar och uppdaterar nu ser du att sökformuläret inte visas i navigeringsfältet - det visas fortfarande högst upp till höger. Det beror på att det har placerats absolut med CSS, och vi kommer att radera allt det på en sekund.
CSS
Öppna den största style.css-filen och hitta sektionen för sökformuläret:
#branding #searchform ...
Byt ut vad som är inom det (ska kunna ha fyra linjer, inklusive viss absolut positionering) med följande:
#branding #searchform float: left; bakgrund: vitt; marginal: 7px;
Gärna ändra färg eller marginal. Byt float om du hellre skulle dyka upp på höger om baren. I det här temat är sökningen utökad när användaren klickar inuti den; Det ligger inte under denna handledning, men du kan se en liknande effekt på vår MakeUseOf-sökning.
jQuery
Om du undrar varför vi använder jQuery för att göra det här är det enkelt: CSS är fast, och kan inte justeras dynamiskt. Medan vi skulle kunna använda CSS för att göra en klibbig header, skulle det behöva vara toppelementet på sidan. Problemet vi har är att vår meny inte är toppelementet, så vi kan inte börja med att det är klibbigt. Här används jQuery; vi kan kontrollera när användaren går över en viss punkt då, och först då, gör det klibbigt.
Börja med att lägga till jQuery på ditt tema. Ditt tema kan redan ha det laddat Om inte, inga bekymmer. Du kan antingen förneka det genom att lägga till följande kod till dina funktioner.php, som så:
Eller du kan helt enkelt förbikoppa WordPress helt och hardcore detta i huvudfilen. Någonstans i huvuddelen, lägg bara till den här raden:
Om du använder den första metoden laddas den in noConflict läge, vilket innebär att du måste använda “jQuery” i din kod för att komma åt jQuery-funktionerna. Om du använder den andra metoden för att direkt lägga till den i din rubrik, kan du använda standard jQuery accessor av $. Jag antar den andra metoden i koden nedan.
Så, för att lägga till en viss jQuery-kod, placera följande någonstans i slutet av din header.php - Jag har placerat min strax före
Det första skriptet gör är att ta reda på var navigeringsfältet startar, och minns det värdet. För det andra bifogar vi till rullningsevenemanget - det betyder att varje gång användaren rullar sidan kan vi köra det här kvarteret. När koden körs finns det två sätt att gå:
1. Om fönstret har rullat förbi navigeringsfältet, gör vi det till en fast CSS (detta är “klibbig” del).
2. Om toppen av fönstret är högre än navigeringsfältets ursprungliga position (det vill säga användaren rullade upp igen), sätter vi den tillbaka till standard statisk position.
Det finns två punkter som jag vill uppmärksamma dig på:
- +288 finns där för att fixa felet för att få en felaktig position; utan det triggar baren sitt klibbiga tillstånd för tidigt - ta bort det för att se vad jag menar. Det här är inte nödvändigt i alla teman, och du kan förmodligen komma fram till en bättre lösning.
- För att åtgärda problemet med navigeringsfältet som ändrar bredden när det går i klibbigt tillstånd, redigerar du style.css, rad 550, för att läsa 1000px istället för 100%
Det är så, din navigeringsfält ska nu vara snyggt kladdig.
Sammanfattning:
Den fulla ersättningen header.php kod för denna handledning finns på denna pastebin; och ersättningen style.css här. Jag hoppades att du har haft den här lilla handledningen. Om du har problem, skicka in i kommentarerna eller fråga bort på MakeUseOf Answers, men kom ihåg att göra din webbplats offentligt tillgänglig så att jag kan gå och titta själv. Om du är ny här, var noga med att kolla in alla våra bloggar och webbutvecklingsartiklar.
Utforska mer om: Webbdesign, webbutveckling, Wordpress-teman.