Koda en Graceful Breadcrumb Navigation Meny i CSS3
Navigationsmenyer och länkar är möjligen de viktigaste gränssnittselementen till en webblayout. Dessa är de enda uttag för användare att resa mellan sidor och interagera med allt innehåll du har skapat. Breadcrumb erbjuder liknande funktioner med den extra fördelen av spårar din nuvarande position. Du kommer att kunna visa alla tidigare länkvägar som användaren går igenom din webbplatshierarki.
I denna handledning skapar vi en lysande breadcrumb navigeringsmeny med några CSS3 effekter. Detta har testats för att fungera i alla större CSS3-kompatibla webbläsare, även äldre webbläsare som inte stöder CSS3 kommer fortfarande att göra det ordentligt i de flesta fall.
Innan vi dyker in i kod talar vi lite om funktionaliteten i vår breadcrumb, full handledning vid ett hopp!
Erbjuder spåret
En brödbitspår är inte mer komplex än någon annan meny. Våra stilar kommer att använda mycket mer komplexa CSS-egenskaper än de flesta exempel, men vår mallbensmall är fortfarande på plats för att styra användare från en sida till en annan.
I det här exemplet kommer vi att återskapa en liknande stil som Googles supportmeny. Du kan se deras meny på supportsidan för Gmail för att få en bild av var vi är på väg. I slutändan vill vi ge vår bästa användarupplevelse för alla användare, oavsett operativsystem eller webbläsarprogramvara, så har jag byggt 2 olika kodexempel för att stödja graciös nedbrytning bland äldre webbläsare.
Den första är byggd med anpassade bakgrundsbilder och korrekta CSS-anpassningar. Alla svänghändelser och aktiva händelser är förbyggda med några få CSS-stilar, men användare som har bilder avstängda kommer inte att kunna uppleva dessa effekter! Därför har jag också byggt en liknande sökmeny med CSS-gradienter, rundade hörn och boxskuggor.
Om du är nervös för att stödja båda stilar kan du välja mellan dem för din egen webbplats. De flesta besökare kommer att använda bilder som standard, men gräva igenom ditt webbplatsanalysverktyg om du vill ha mer exakta besökardata.
Noga ord, låt oss hoppa in i projektet! Vi börjar med att bygga den grundläggande HTML-ramen och flytta in i olika stilingseffekter. För det första du behöver ladda ner bilden krävs för projektet.
Bare-Bones HTML
Jag börjar mitt dokument med standard HTML5-sidmall. Detta inkluderar standard doktyp, länkad CSS och alla grundläggande element. Jag har lagt till koden nedan om du vill starta ditt eget dokument på det här sättet. Observera att det inte skulle påverka hur din breadcrumb visas, så gärna använda din egen sidmall om du vill.
Standard sida
Jag delar upp koden i två olika block. Det första blocket med bilder är byggt på ett lite annorlunda sätt, följt av vår meny utan bilder. Varje uppsättning ges sin egen ID så vi kan identifiera innehållet mycket lättare. Om du också är en fan av jQuery kan du använda #ID-väljare att manipulera alla interna DOM-elementen.
Först har vi en innehållande div med id “brödsmula“. I demoversikten har jag använt detta för att skilja vår kod och flytta den över sidan med några tilläggsavgifter. Du kan ta bort denna yttre div, men du måste omforma allt för att passa den nya mallen. Det gör inte ont för att lämna en behållare eftersom du kan styra positioneringen mycket enklare.
Internt har jag byggt brödsmulorna med en orörd lista. Det finns så många unika sätt att anpassa stiliga HTML-listor, och brödsmulor är bara en av dem. Du kanske märker att jag har gett det ursprungliga listobjektet a klass av “först“. Detta behövs för lite extra vadderingar för att hålla menyalternativen in-line. Dessutom en liten span block läggs till så att vi har en rätt vänster gräns som inte överlappar bakgrundsbilden.
Dessutom planteras varje ankarlänk med ett minskande antal för z-index fast egendom. Använda bilder behöver vi har alla våra länkar överlappande för att visa breadcrumb-pilen korrekt. Det enklaste sättet att uppnå detta är justering av z-index så varje länk överlappar nästa. Jag började med 9 och arbetade ner därifrån, men om du har fler länkar i menyn börjar du bara med ett högre heltal.
Meny Utan Bilder
Till graciöst försämra vår breadcrumb Vi behöver en sekundär uppsättning HTML-listobjekt. Om du försöker återfalla på en enda navigering kan du använda jQuery för att upptäcka webbläsaren och ange ett ID i enlighet därmed. Tyvärr är det inte alltid pålitligt (för vissa mobila användare, till exempel). En annan lösning är att inkludera ett IE-specifikt formatark och göm eller visa vilken meny som fungerar bäst - men det här alternativet är naturligtvis bara för Internet Explorer.
breadcrumb2 är vårt nya ID används för att rikta in menyn utan bilder. Håller med det här mönstret jag har använt crumbs2 som klassen för den oordnade listan. Observera att anledningen till att vi använder klasser är för dess enkelhet att duplicera dessa menyer, så när du vill ha några olika brödsmulor på din sida, med dessa klasser kommer det aldrig att bli ett problem.
Vi har hållit .först klass men dessutom bifogas .sistaklassen på det slutliga listobjektet. Utan bilder kan vi inte duplicera pilarna för varje objekt i navigeringsmenyn, så jag har använt lite rundade hörn att krydda den sekundära menyn. .först klass och .sista manipulera gränslinjen vid själva kanterna på vår meny för att skapa en riktigt cool web 2.0-stil.
CSS-glidande bakgrundsbilder
För några av de enklare effekterna har jag kopplat båda brödsmulorna ihop vid byggnadsegenskaper. Detta är användbart eftersom det inte bara sparar något utrymme, men när du går tillbaka till redigera stilar är det lättare att anpassa ditt eget utseende.
För båda #brödsmula och # breadcrumb2 Jag har satt listestil: none; så alla interna objekt kommer inte att ha markörer. Du kan lämna dessa om du gillar effekten, men jag hittade HTML blir tröttsam för att fungera och det är mycket lättare att skapa nya ikoner. Så låt oss börja med vårt .smulor klass.
.smulor display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: länk, .crumbs li a: visited color: # 666; display: block; flyta till vänster; fontstorlek: 12px; marginal-vänster: -13px; vaddering: 7px 17px 11px 25px; position: relativ; text-dekoration: ingen; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); bakgrundsrepetition: nej-repetera; bakgrundsställning: 100% 0; position: relativ; .crumbs li a: hover color: # 333; bakgrundsställning: 100% -48px; markör: pekare; .crumbs li a: active color: # 333; bakgrundsställning: 100% -96px; .crumbs li.first a span height: 29px; bredd: 3px; gränsen till vänster: 1px solid # d9d9d9; position: absolut; topp: 0px; vänster: 0px; Vi sätt vår oorderade lista till blockera så inget annat skryter upp runt om i området. Observera att listobjekten är visas inline medan varje ankarlänk ges mycket mer utrymme att sprida ut. Vi vill att allt utrymme i vår meny ska kunna klickas så det behövs bygga våra ankare som blockelement.
Jag har använt en bild som heter bg-crumbs.png för bakgrunden. Detta är känt som ett enkelt sprite-ark i CSS, eller alternativt a skjutdörrar teknik. Det betyder att när användaren svävar eller klickar på en länk flyttar vi bakgrundsställningen för att visa den uppdaterade stilen. Denna enda bild innehåller alla 3 av de mönster vi behöver för att skapa bakgrunderna i olika lägen, så vi kan använda bakgrund-positionen fastighet att flytta utifrån användarens interaktion.
Anpassade effekter med CSS3
Den ursprungliga breadcrumb-designen är mycket enklare att skapa. Detta är märkbart eftersom många av CSS-egenskaperna är mer grundläggande än du skulle kunna föreställa dig, men nu börjar vi fokusera på att duplicera dessa effekter med endast CSS3!
De enskilda stilarna tar upp mycket utrymme så jag bryter ner dem i 2 kodblock.
.crumbs2 display: block; marginal-vänster: 27px; vaddering: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: länk, .crumbs2 li a: visited color: # 666; display: block; flyta till vänster; fontstorlek: 12px; vaddering: 7px 16px 7px 19px; position: relativ; text-dekoration: ingen; gränsen: 1px solid # d9d9d9; gränsen till höger bredd: 0px; .crumbs2 li a background-image: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0.45, rgb (241.241.241)), färgstopp (0.73, rgb (245.245.245))); bakgrundsbild: -moz-linjär-gradient (centrumbotten, rgb (241.241.241) 45%, rgb (245.245.245) 73%); / * För Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * För Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first en border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-gränsen-övre-vänstra radien: 5px; .crumbs2 li.last en border-right-width: 1px; gränsbotten-högra radie: 5px; -moz-gräns-radie-bottomright: 5px; -webkit-gräns-botten-högra radie: 5px;
De .crumbs2 menyn använder CSS-gradienter att duplicera bakgrundseffekterna. Om du inte är bekant med dessa rekommenderar jag starkt CSS Tricks 'guide på CSS3 Gradients vilket skulle hjälpa dig att använda CSS3 gradienten effektivt. De har inkluderat några fler egenskaper för Microsoft och Opera webbläsare, men dessa stöds inte fullt ut i alla fall. Jag har inte inkluderat dem i demokoden här - men det är bra att förstå alla alternativ.
-webkit-gradient och -moz-linjär-gradient är kärnlösningarna som gör det mesta av arbetet. Jag har inkluderat äldre kod för äldre versioner av Internet Explorer, men det är inte garanterat att visa korrekt hela tiden (vi använder trots allt kraftfulla bildåtergivningstekniker). Observera att jag har satt både RGB- och hex-färgkoder mellan bakgrundsegenskaperna. Du kan hålla fast vid en metod eller den andra om du är mer bekväm.
De gränsen radien koden tillämpas endast på vår sekundära breadcrumb-navigering. Detta ger en snygg effekt längst upp till vänster och längst ner till höger på hela vår breadcrumb-menyn. Linjen verkar nästan hoppa från sidan - verkligen en fantastisk effekt på webbläsare som stöder stilar, men de täcker bara standardstatus för våra länkar. Nu, låt oss bygga svängverkningar som liknar de bilder vi har använt ovan.
CSS3 gränser och skuggor
När en användare svänger över en länk vill vi uppdatera några saker. Först måste vi mörkare gränsfärgerna på toppen och botten av vårt aktiva element. Detta kan också ses i bilderna för både svävar och aktiva tillstånd.
.crumbs2 li a: svävar border-top-color: # c4c4c4; gränsbottenfärg: # c4c4c4; bakgrundsbild: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0.45, rgb (241.241.241)), färgstopp (0,73, rgb (248.248.248))); Bakgrundsbild: -moz-linjär-gradient (center botten, rgb (241.241.241) 45%, rgb (248.248.248) 73%); / * För Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * För Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; färg: # 333; -moz-box-skugga: 0px 2px 2px # e8e8e8; -webkit-box-skugga: 0px 2px 2px # e8e8e8; boxskugga: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktiv border-top-color: # c4c4c4; gränsbottenfärg: # c4c4c4; bakgrundsbild: -webkit-gradient (linjär, vänster botten, vänster topp, färgstopp (0,45, rgb (224,224,224)), färgstopp (0,73, rgb (235,235,235))); bakgrundsbild: -moz-linjär gradient (mittbotten, rgb (224.224.224) 45%, rgb (235.235.235) 73%); / * För Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * För Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; boxskugga: -1px 1px 1px 0px #dadada inlägg; -webkit-box-skugga: -1px 1px 1px 0px #dadada inset; -moz-box-skugga: -1px 1px 1px 0px #dadada inset; färg: # 333;
Jag använder exakt samma gradientkod som vi har använt ovan, men den här gången är färgerna mycket olika om du märkte våra RGB-värden. Vart och ett av staterna kommer att mörka textfärgen till # 333, men andra deskriptorer har ändrats något för att motsvara användarkommandon.
På svävaren ser du en blank präglad effekt vilket kopplas med mörka gränser ger sida popup stilar. Om du klickar och håller kommer du till det aktiva läget som innehåller a mörk bakgrundsgradient. Denna effekt får knapparna att se de är faktiskt “nedtryckt” på sidan.
Vi ansöker också box-shadow egenskaper från de nya CSS3-specifikationerna. -webkit, -moz, och standardstilar används med samma inställningar. Hovering visar a ljusskugga kommer ut från botten av den valda länken. När den är aktiv kommer skuggan att formas på de övre, högra och nedre gränserna. Denna effekt skapas med infälld sökord som läggs till i slutet av varje box-skuggegenskapslinje. Återigen är CSS Tricks din bästa vän här med en fantastisk artikel om boxskugga, eftersom det talar om syntaxen och dess korrekta användning i CSS3.
Bonus: Fler stilar
Förutom handledningskoden har jag tagit med extra bakgrundsbilder med anpassade färgscheman. Jag har samplat från originalbakgrunden och använt Adobe Photoshop för att skapa några variationer som du kan ansöka om på din egen webbplats.
Dessa bonusfiler ingår i källfilen som du kan ladda ner i .zip arkivformat i nedanstående avsnitt.
Du kan kolla in bilden ovan för att få en uppfattning om vad jag pratar om. Om du behöver ett specifikt färgschema öppnas pop Photoshop> Bild> Justeringar> Färgton / Mättnad att ändra färgschemat för att matcha din egen mall, kom ihåg att kolla alternativet Colorize i rutan Toner / Mättnad om färgen inte alls ändras.
Slutsats
Denna handledning borde ha blivit bekant med några av de nyare CSS3 teknikerna. Vi har skapat två fantastiska breadcrumb menyer stylade på ett liknande sätt och byggt det på sätt att det kan försämras graciöst i äldre webbläsare. Dessutom har jag erbjudit min demokod och några bonusbilder för dig att leka med.
Gillar du särskilt de stilar vi har byggt här? Eller kanske du har frågor eller idéer om hur du förbättrar handledningskoden? Vänligen dela dina tankar med oss i diskussionsområdet nedan och glöm inte att ladda ner källfilerna så att du kan spela med demo!
Fler CSS3 handledning
Craving för mer CSS3? Nedan finns våra artiklar för att du ska förstå CSS3 teoretiskt och praktiskt!
- CSS3: Skapa en RSS Feed Logo
- CSS3: Skapa ett sökfält
- CSS3: Skapa en AJAX-kontaktformulär
- CSS3: Bygga HTML5 / CSS3 webbsidor
