Webbsidespagination är en viktig aspekt för varje layout med upprepande innehåll. Bloggar är ofta övervägande, men även portföljförteckningar eller relaterade nyheter / matningslänkar eller andra typer av arkiv. Att organisera ett blogginlägg på många sidor bidrar till att minska avläsningstiden - speciellt med särskilt djupgående artiklar.
I denna handledning vill jag demonstrera en samling CSS-tekniker för att utforma pagination. När du kombinerar dessa mönster med innehållssystem som WordPress kan du se hur gränssnitt verkligen fungerar i åtgärd. För att få en uppfattning om slutprodukten ta en titt på min live-provdemo nedan.
Live Demo - Hämta källkod
Komma igång
Denna handledning kräver ingen JavaScript-kod, så det finns inga filberoende alls. Jag vill börja med att beskriva den enkla sidlayouten. Varje paginerad länk går till en annan HTML-sida med en lista på totalt 5.
Du märker snabbt kommentaren som visar en tidigare knapp för att flytta mellan sidor. Jag har bara visat den här länken inom de andra layouterna eftersom på första sidan kan vi inte navigera tillbaka till en föregående sida. Också det första listobjektet .enda har ingen ankarlänk, det visar bara aktuellt sidnummer och totalt antal sidor.
Exemplet ovan är kopierat från index-2.html som visar den andra sidan. Du hittar att varje enskild numerisk sida inte har ett ankare som leder tillbaka till sig själv. I stället tillämpar vi en klass av .nuvarande på listobjektet för ett annat utseende.
Allmänna sidstilar
Jag har delat upp formatarket i segment tillsammans med den typiska sidan återställs. Detta gör det enklare att kopiera och klistra in den exakta stilen av paginationslänkar du vill arbeta med.
Ingenting för annorlunda här jämfört med mina andra handledning. Använda den yttre .paginera klass på den oordnade listan betyder att detta kommer att gälla för varje UL på alla sidor. Det ökar den generiska teckensnittsstorleken samtidigt som listan säkerställer att hela bredden på förälderbehållaren spänner över.
Direkt under denna kod hittar du de övriga 5 blocken för var och en av paginationssektionerna. Detta är ett exempel från min första designidé. Behållaren .paginate.pag1 har inga standardstilar, men om du vill tillämpa något direkt på denna obestämda lista kan du göra det genom att rikta in individuella paginationsstilar.
Länkarna använder en platt färgbakgrund tillsammans med några rutaskuggor som uppdateras när de klickas. Det är en enkel design som verkligen kan passa in i alla webbsidor, förutsatt att du uppdaterar färgschemat lite.
Ytterligare pagineringsstilar
Titta på min andra design kan du märka att det här byggdes runt Minimal Pagination PSD släppt på Pixels Daily. Jag gav skuggorna mer längd och behöll skriftstorlekarna mindre. Men det är en fantastisk mall du kan börja anpassa väldigt snabbt.
En annan cool release från Pixels Daily heter Slick Pagination Links innehåller en PSD och CSS kopia. Min tredje demo är baserad på denna design, men jag har skrivit all CSS-koden själv.Jag försökte matcha liknande färger i lutningen men använde en tjockare kant runt varje länk.
Det kommer troligen att vara bäst på en ljusare bakgrund eller inslagna i en lätt UL-behållare. Men att uppdatera gränsen och bakgrundsgradienterna skulle inte ta mycket arbete med hjälp av en färgschemaläggare. Aktiva och svävarstater uppdaterar helt enkelt bakgrunden och jag har hållit mig borta från att ändra boxskuggorna.
Alla dessa mönster kan utvidgas till att omfatta olika typer av teckensnitt, ikoner, vadderingar och andra CSS-funktioner. All min kod är skriven till den lägsta gemensamma nämnaren, så att dessa stilar förhoppningsvis kan fungera snyggt med någon webbsida.
Avrundade Navlänkar
Mina sista två sidor använder samma typ av design, men vänd bara färgschemat från ljus till mörkt. Jag visar bara de mörkare CSS-koderna eftersom de har fler ändringar. Alla bildskärmsegenskaper borde passa perfekt bortsett från färgerna.
Denna speciella design baseras på en premium PSD kallad Flat Pagination Interface, även från Pixels Daily. Genom att titta på skärmdumpen ser du att den har en mindre lista och den använder ellipsen för att ligga mellan sidor. Det här är vanligt när du har 10 + sidor i listan och vill inte visa dem på en gång.
Jag nämnde tidigare att vi kan rikta oss till den yttre oorderade listan genom att använda sitt klassnamn som .paginate.pag5. Det hjälper till att demoera länkar, men det är nog inte användbart på en levande webbplats om du inte planerar att använda olika pagineringstyp.
Var och en av dessa två sista stilar inkluderar CSS3-övergångar för svävartillstånd. Det är en trevlig extrafunktion du kan välja att behålla, men det ser inte alltid bra ut i alla fall.Både de ljusa och mörka färgschemanen innehåller höjdpunkter i grönt för att matcha sidlayouten. Om du gillar denna design, leksak runt med färgerna och se om det ljusa eller mörka gränssnittet ser bättre ut för ditt projekt.
Live Demo - Hämta källkod
Stängning
Många av dessa tekniker kan anpassas med dina egna stilar för att skapa unik webbplatspagination. Det är inte en viktig aspekt för varje webbplats, men blir omedelbart viktigt om du har en stor mängd innehåll.
Känn dig fri att ladda ner en kopia av min källkod och använd dessa CSS-stilar för någon webbsida pagination. Också om du har frågor eller relaterade förslag kan du dela med oss i diskussionsområdet nedan.