När du utformar ett navigationssystem för din webbplats är det viktigt att överväga dynamiska förändringar för hantering av mobilt stöd och lyhörda mönster. Men ett annat systematiskt tillvägagångssätt är att hålla dina besökare i full kontroll under hela visningen. Detta kräver ofta en snabbåtkomstmeny eller dropdown-område för att dra länkar till andra webbsidor.
I denna handledning kommer jag att bygga en toppnavigationsfält som bara visas efter att ha flyttat bortom sidhuvudnavigeringen. Denna effekt är bra om du har några sidor som oftast nås av besökare. Den klibbiga navbaren håller sig fast längst upp på skärmen och försvinner bara när du går in i header nav-zonen. För att få en uppfattning om vad vi ska göra, kolla in mitt live demo exempel efter hopp!
Live Demo - Hämta källkod
Strukturera dokumentet
Först bör vi skapa projektets arbetsyta och bygga den ursprungliga HTML-koden. Det är värt att notera att vi kommer att behöva använda några mycket grundläggande jQuery tillsammans med CSS-effekterna.
Skapa en ny uppsättning dokument som heter index.html och styles.css inom samma katalog. Jag använder en anpassad bakgrundsbild och logotypbanner i rubrikavsnittet. Du kan hämta dessa resurser tillsammans med min källkod om du vill spara tid. Nu i huvudindexfilen behöver vi konfigurera en HTML5-doktyp plus lägga till de relaterade länkarna.
Lyckligtvis kan en hel del av de resurser vi behöver vara värd externt. Vårt anpassade Google-webbfonto med namnet Capriola utformar huvudtexten och vi behöver också en kopia av det senaste jQuery-biblioteket som är värd från Googles kod-CDN. Det mesta av detta borde vara bekant, låt oss nu hoppa in i kroppsinnehållet.
HTML byggblock
Layouten är inte så komplicerad som du kanske tänker. Högst upp efter att ha öppnat kroppstaggen behöver vi konfigurera den fasta navigeringsfältet. Detta element kommer att använda display: none; För att börja med att vara dold tills du bläddrar lite ner på sidan.
Det inre UL-elementet kommer att centrera alla länkar så att de ligger på samma plats som huvudinnehållet. Därefter under denna navbar installerar vi den huvudsakliga wrapper div som centrerar sidan vid 710px bredd, minus 30px för vaddering. Totalen kommer ut till 680px vilket är den perfekta storleken för Pontus Johansson's freebie som används i bannerdesignen.
Huvudnavigationsfältet har exakt samma länkar som vi håller i den fasta rubriken. Detta gjordes av design, men du kan ändra saker och placera bara de viktigaste länkarna i din fasta navigering. Sidhuvudet kan innehålla nedrullningar som också känner sig oskadliga i en glidande fast navbar.
Anpassa CSS
Innan du hanterar det korta formuläret för JavaScript, låt mig förklara hur vi kan ställa in hela den här koden. Först använder jag en mer anpassad stil med återställningar utifrån Eric Meyers ursprungliga stilark. Jag har definierat box-dimensionering egendom som border-box så att exakta breddvärden inkluderar marginal / vaddering och inte expandera, liksom standardbeteendet.
Bakgrundsbilden använder Debut Dark från webbplatsen Subtil Patterns. Det finns många fantastiska repeterande texturer som du kan ladda ner gratis för att förbättra kvaliteten på dina layouter. Men att flytta på kärnstrukturen behöver vi installera en förpackningsbehållare så det fyller naturligt i mittinnehållet. Bakgrunden ska också vara vit i innehållsområdet men inte i hela rubrikavsnittet.
Jag har setup en mycket färgstark upprepande bakgrundsgradient på huvudnavigeringsmenyn. Även med en fast höjd för stapeln kan vi ställa in samma fasta värde för radavstånd egenskaper på listobjekten. Detta tvingar all text att centreras vertikalt i navelbehållaren. Jag har tagit med några CSS3-övergångsegenskaper för hantering av ett snyggare sveptillstånd.
Fixing the Hidden Navbar
Längst ner i vårt CSS stilark hittar du alla koder relaterade till vår fasta toppnavigering. Behållaren sträcker sig 100% av sidbredd så att vi ser stapeln visas över hela skärmen. Men det interna UL-objektet håller alla länkar centrerade i samma position som vårt innehåll. Bakgrundsfärgen appliceras också med hjälp av rgba () syntax för alfabetisk genomskinlighet.
Återigen kan vi se en fast höjd på 80px vilket är ganska stor i jämförelse med originalet. Men det tar din uppmärksamhet och länkarna är väldigt lätta att manövrera. Jag ville behålla en liknande animationseffekt med CSS3-övergångar på svävaren. Så länkarna fyller i en annan 30% bakgrund som visas mörkare, men fortfarande transparent för innehållet bakom det.
Hantera JavaScript-animationer
Jag tittar längst ner i vår index.html-fil innan den sista stängningen märka. Här vill jag lägga till en liten bit av JavaScript som hanterar rullningseffekterna för att visa och dölja den fasta navbaren. Vi kan bryta ner det i linje för de mer komplicerade sakerna.
Det typiska jQuery-samtalet pausar körningen för DOM för att avsluta rendering innan du kör några koder. Vi kan också ignorera det första blocket som använder linjen e.preventDefault (); för att stoppa ankarlänkarna från lastning. De viktigaste sakerna hanteras inuti händelselyssnaren för $ (Fönster) .På (scroll) som skjuter en ny funktion varje gång användaren rullar upp eller ner.
Variabeln? Scrolltop? innehåller värdet i pixlar längst upp på skärmen. Detta uppdateras varje gång användaren bläddrar till en ny plats. Med hjälp av detta värde kan vi kontrollera om användaren har rullat bortom 215px och i så fall visar den dolda navbaren. Å andra sidan om de rullar upp på 210px eller mindre, så vet vi att huvudnavigationsfältet kommer att synas, så vi gömmer den fasta navbarmen och rensar skärmutrymmet.
Live Demo - Hämta källkod
Slutgiltiga tankar
Även om det här är en relativt enkel effekt kan koden vara förvirrande om du inte känner till JavaScript. Tillbringa lite tid på att gå över mina snippets för att du ska förstå hur vi visar och döljer menyn. Du kan också ladda ner en kopia av min projektkodkod och leksak runt på egen hand. Om du vill släppa några frågor eller kommentarer på den här handledningen kan du meddela oss i diskussionsgänget.