Hur du gör din egen klibbiga rubrik som MakeUseOf

Annons

För ungefär en månad sedan introducerade vi ett nytt gränssnittselement till MakeUseOf - en flytande navigations- och sökfält. Återkopplingen vi har fått är nästan helt positiv, den interna söktrafiken har rakat och några läsare har frågat hur man gör en för sin egen webbplats, så jag trodde att jag skulle dela.

Vi använder jQuery för att fästa fältet högst upp på skärmen - men bara förbi en viss punkt. Jag kommer att göra allt detta i standard WordPress-temat - Twenty Eleven, men det kan naturligtvis tillämpas på alla teman eller webbplatser som du tillräckligt förstår hur du ändrar.

HTML

Öppna först teman header.php och identifiera navigeringsfältet som vi kommer att göra klibbigt. Som sagt är koden nedan för standard tjugo-elva; din kan variera.

Lägg till en ny DIV-behållare som omger hela NAV-avsnittet.

Låt oss också flytta den standard sökfältet till här. Du kommer att märka att det läggs till som standard längst upp till höger i temat; hitta linjen php get_search_form (); och klistra in det i vårt navigationsavsnitt. Ta bort alla andra instanser av den 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 tar bort allt detta om en sekund.

CSS

Öppna filen main.css och hitta avsnittet för sökformuläret:

#branding #sökform {... }

Byt ut vad som finns inuti det (borde kunna ha cirka fyra rader, inklusive viss absolut positionering) med detta:

#branding #sökningsform { flyta till vänster; bakgrund: vit; marginal: 7px; }

Du kan justera färgen eller marginalen. Byt float om du hellre vill att det verkade till höger om fältet. I detta tema är sökningen inställd på att expandera när användaren klickar inuti den; som ligger utanför denna tutorials räckvidd, 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 detta är det enkelt: CSS är fixat och kan inte justeras dynamiskt. Vi kan använda CSS för att skapa en klibbig rubrik, men det måste vara det övre elementet på sidan. Problemet vi har är att vår meny inte är det bästa elementet, så vi kan inte börja med att den är klibbig. Det är här jQuery används; vi kan kontrollera när användaren går förbi en viss punkt; sedan, och först då, gör det klibbigt.

Börja med att lägga till jQuery till ditt tema. Ditt tema kanske redan har laddat det; om inte, inga bekymmer. Du kan antingen förlägga den genom att lägga till följande kod i dina funktioner.php, så här:

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

Eller så kan du helt enkelt kringgå WordPress och hardcore detta till rubrikfilen. Någonstans i ditt huvudavsnitt lägg bara till den här raden:

Om du använder den första metoden kommer den att laddas in noConflict läge, vilket innebär att du måste använda "jQuery" i din kod för att komma åt jQuery-funktioner. Om du använder den andra metoden för att direkt lägga till den i din rubrik kan du använda standard jQuery-accessorn till $. Jag antar den andra metoden i koden nedan.

Så för att lägga till någon faktisk jQuery-kod, placera följande någonstans i slutet av din header.php - Jag har placerat mitt strax före

Det första manuset gör är att ta reda på var navigeringsfältet börjar på och kommer ihåg det värdet. För det andra kopplar vi till rullningshändelsen - det betyder att varje gång användaren rullar på sidan kan vi köra detta blockkod. När koden körs finns det två sätt att gå:
1. Om fönstret har bläddrat förbi navigeringsfältet gör vi det till en fast CSS (detta är den "klibbiga" delen).
2. Om den övre delen av fönstret är högre än den ursprungliga positionen i navigeringsfältet (dvs. användaren rullas upp igen) sätter vi tillbaka det till den statiska standardpositionen.

Det är två punkter jag vill fästa er uppmärksamhet på:

• +288 är där för att fixa felet med att få en felaktig position; utan den utlöser fältet sitt klibbiga tillstånd för snart - ta bort det för att se vad jag menar. Detta kommer inte att vara nödvändigt i alla teman, och du kan förmodligen komma med en bättre lösning.
• För att lösa problemet med att navigeringsfältet ändrar bredd när det går i klibbigt tillstånd, redigera style.css, rad 550, för att läsa 1000px istället för 100%

Det är det, din navigationsfält bör nu vara snyggt klibbig.

Sammanfattning:

Hela ersättningen header.php kod för denna handledning kan hittas på den här pasten; och ersättningen style.csshär. Jag hoppades att du har haft den här lilla handledningen; om du har problem, skriv in kommentarerna, men kom ihåg att göra din webbplats offentligt tillgänglig så jag kan gå och titta själv. Om du är ny här, se till att kolla in alla våra andra bloggar och artiklar om webbutveckling.