Vid konstruktion av en enkel webbsida kan det ofta vara meningsfullt att passa innehållet i en enda layout i stället för flera sidor. Dessa webbsidor är fördelaktiga när du har ett litet projekt eller en portfölj som behöver lite online-närvaro. Om du delar upp innehåll i snygga avsnitt kan besökare använda en liten glidnavigering för att snabbt gå vidare längs sidan.
I denna handledning vill jag visa hur du kan skapa en anpassad glidnavigering med jQuery. Det finns många alternativa plugins som ger dessa funktioner och kommer också att spara tid. Men jag vill visa hur vi kan göra denna effekt med bara jQuery och scrollTo-plugin för optimerad prestanda. Kolla in min live-demo för att få en glimt av vad vi ska göra.
Live Demo - Hämta källkod
Komma igång
Först har jag laddat ner en lokal kopia av jQuery för att hålla med de andra skriptfilerna. Vi behöver också en kopia av pluginet jQuery.scrollTo som är en enda .js-fil. Jag har skapat två alternativa filer index.html och styles.css för sidstrukturen. Vi kan bryta ner huvudinnehållet först.
Rubrikinnehållet ska vara enkelt med inget alltför komplicerat. Indexfilen använder en HTML5-doktyp tillsammans med stilarket och de två JS-filerna som vi hämtade. Självklart finns det alternativ för att anpassa rullningseffekten, men i den här situationen är det mycket lättare att implementera ett plugin. Inne i sidan HTML kan vi se hur navigeringen är inställd.
Hela sidan finns inne i ett omslag med ID #W. En annan div #innehåll markerar det inre innehållet på sidan. Den här fasta navigationen hålls inom sidinnehållet för min demo, men du kan teoretiskt flytta det här någon annanstans som passar bra. Eftersom det kommer att lösas kan du alltid få menyn att rulla längs med användaren oavsett placering.
Behållaren #stickynav används för att hålla alla de inre elementen ovanpå sidinnehållet. Jag använder CSS z-index egenskapen tillsammans med interna floats på alla listobjekt. Notera HREF-värdena alla pekar mot ett hash-tecken placerade någon annanstans på sidan. Vi kan använda det här värdet för att avgöra var vår reglage ska gå.
Internt innehåll
Efter stängning av navigeringsblocket hittar vi ett litet antal innehållsavsnitt. Det finns mycket extra avstånd mellan innehåll, bara så att du kan se hur det skulle uppträda på en vanlig webbsida. Varje blockbehållare använder HTML5
element tillsammans med ett klassnamn .sektion.
Klassen används för dubbla stilar som finns i var och en av innehållsområdena. Det sparar utrymme i stilarket när du kopierar över flera egenskaper för varje element. Genom att rikta in avsnittet ID kunde vi tillämpa unika bakgrunder, textfärger, boxskuggor och andra liknande effekter.
Den här metoden kan innehålla så många interna innehållssektioner som du behöver. Även navigeringsmenyn kan så småningom bli för bred. I det här fallet kan det också placeras högst upp som en fast navbar. Jag höll det inom innehållsdelen så vi kan se hur lösningen fungerar byggd kring en sidmall. Låt oss hoppa in i CSS-stilar för mer detaljer.
CSS Siddesign
Jag ville verkligen skilja mellan toppstången och den här fasta klibbiga navigeringen. Vi kunde ha fixat den allra bästa brun navbaren som också har en länk, men det här kan äta upp en liten del av layouten. Istället har jag skapat en ny oorderad lista och utformat varje länk för att flyta längs varandra - håller menyn snabbare och kompaktare.
Titta på behållaren #stickynav Du kommer märka att detta kommer att spänna över hela sidbredden. Med en genomskinlig bakgrund är det verkligen inte märkbart, men kom ihåg det eftersom du kan expandera navigationen ännu bredare för att fylla den yttre sidomappen.
En annan intressant del av mitt stylesheet har formuläringångarna och sidbehållarna. Dessa regler finns alla längst ner i filen tillsammans med typografiuppdateringar. Lägg märke till hur varje huvud är centrerad på sidan för att erbjuda utrymme till sidan för dessa navigeringsobjekt. Det skulle inte vara svårt att ändra dessa rubriker till höger och ge ännu mer utrymme för navigeringslänkar.
Jag har inte kontaktformuläret skickar någonstans men jag ville ha det att ha några anständiga anpassade stilar. Visst inget speciellt men det återställer standardfonter och färger. Också om du behöver expandera det centrala innehållsområdet hittar du bredden: 750px fastighet som är fäst på ytterförpackningen. Ingenting är vanligt men det är bra att förstå dessa grundläggande stilar.
Glatt rullning med jQuery
Nu är det här sista kvarteret ganska enkelt även om du knappast förstår skript. Jag har lagt till en ny tagg innan min stängning som riktar sig mot de fasta nav-ankarlänkarna. När en användare klickar drar vi ut hashvärdet och bläddrar omedelbart till sidans avsnitt.
Metoden jQuery .click () innehåller en parameter för händelsehanteraren. Med denna parameter avbryter vi standardbeteendet så att webbläsaren inte kommer att hoppa ner på sidan. Då körs jQuery scrollTo med inriktning på det aktuella länkvärdet this.hash.
Effekten är enkel men ändå praktisk eftersom du kan implementera sidkonceptet mycket snabbt. Jag är säker på att det finns andra liknande plugins relaterade till jQuery scrollTo, och om du har tid kan det vara roligt att leka runt med alternativ.
Live Demo - Hämta källkod
Slutgiltiga tankar
Enklare webbplatser kräver inte ett försvunnet menysystem och användandet av tekniker som detta kan hjälpa till när man organiserar innehåll. Jag hoppas att denna handledning kan ge lite användarvänlighet för utvecklare som skapar en enkel webbsidayta. jQuery är mycket utökningsbar och det är enkelt att expandera den här kodbasen i ditt eget plugin för jQuery. Du kan ladda ner en kopia av min källkod och se om du kan integrera denna effekt med eventuella framtida projekt.