Koding av en Graceful Breadcrumb Navigasjonsmeny i CSS3
Navigasjonsmenyer og koblinger er muligens de viktigste grensesnittelementene til et weboppsett. Dette er de eneste uttakene for brukere å reise mellom sider og samhandle med alt innholdet du har opprettet. Breadcrumb tilbyr lignende funksjonalitet med den ekstra fordelen av sporer din nåværende posisjon. Du vil kunne vis alle forrige lenker som brukeren krysser nettstedets hierarki.
I denne opplæringen skaper vi en strålende breadcrumb navigasjonsmeny med noen CSS3 effekter. Dette har blitt testet for å fungere i alle de viktigste nettleserne CSS3-kompatible, enda de eldre nettleserne som ikke støtter CSS3 vil fortsatt gjøre det riktig i de fleste tilfeller.
Før vi dykker inn i koden, snakker vi litt om funksjonaliteten til vår breadcrumb, full opplæring på et hopp!
Tilbyr stien
En breadcrumb sti er ikke mer kompleks enn noen annen meny. Våre stiler vil utnytte mye mer komplekse CSS egenskaper enn de fleste eksempler, men vår bare-beinmal er fortsatt på plass for å lede brukere fra en side til en annen.
I dette eksemplet vil vi gjenskape en lignende stil som Google-støttemenyen. Du kan se på menyen på Gmail-støttesiden for å få en ide om hvor vi er på vei. Til slutt vil vi Gi vår beste brukeropplevelse for alle brukere, uansett operativsystem eller nettleser programvare, slik jeg har bygget 2 forskjellige kodeeksempler for å støtte grasiøs nedbrytning blant eldre nettlesere.
Den første er bygget med tilpassede bakgrunnsbilder og riktige CSS-justeringer. Alle svinghendelser og aktive hendelser er forhåndsbygd med bare noen få CSS-stiler, men brukere som har bilder slått av, vil ikke kunne oppleve disse effektene! Derfor har jeg også laget en lignende utseende meny med CSS-gradienter, avrundede hjørner og bokseskygger.
Hvis du er nervøs for å støtte begge stilene, kan du velge mellom dem for ditt eget nettsted. De fleste besøkende vil bruke bilder som standard, men grave gjennom nettstedet ditt analytics verktøy hvis du vil ha mer presis besøkende data.
Nok ord, la oss hoppe inn i prosjektet! Vi starter med å bygge den grunnleggende HTML-rammen og flytte inn i forskjellige stylingeffekter. Først av alt du må laste ned bildet kreves for prosjektet.
Bare-Bones HTML
Jeg starter dokumentet mitt med standard HTML5-side mal. Dette inkluderer standard doktype, koblet CSS og alle de grunnleggende elementene. Jeg har lagt til koden under hvis du vil starte ditt eget dokument på denne måten. Vær oppmerksom på at det ikke bør påvirke hvordan din breadcrumb vises, så vær så snill å bruke din egen sidemal hvis du ønsker det.
Standard side
Jeg deler koden i to forskjellige blokker. Den første blokk med bilder er bygget på en litt annen måte, etterfulgt av vår meny uten bilder. Hvert sett er gitt sitt eget ID slik at vi kan identifisere innholdet mye lettere. Hvis du også er fan av jQuery, kan du bruke #ID velger å manipulere alle interne DOM-elementene.
Først har vi a inneholder div med id “brødsmule“. I demo-filen har jeg brukt denne til å skille vår kode og flytte den over siden med noen ekstra marginer. Du kan fjerne denne ytre diven, men du må omforme alt for å passe den nye malen. Det gjør ikke vondt for å legge igjen en beholder siden du vil kunne styre posisjoneringen mye lettere.
Internt har jeg bygget breadcrumbs ved hjelp av en uordnet liste. Det er så mange unike måter å tilpasse stilte HTML-lister, og breadcrumbs er bare en av dem. Du kan legge merke til at jeg har gitt det opprinnelige listeposten a klasse av “først“. Dette er nødvendig for litt ekstra polstring for å holde menyelementene i bruk. I tillegg en liten span blokk er lagt til, så vi har en riktig venstre kant som ikke overlapper bakgrunnsbildet.
I tillegg plantes hver ankerlänk med et avtagende tall for z-indeks eiendom. Ved hjelp av bilder må vi ha hver av våre koblinger overlapper å vise breadcrumb-pilen riktig. Den enkleste måten å oppnå dette på er justerer z-indeksen så hver lenke overlays den neste. Jeg begynte med 9 og jobbet ned derfra, men hvis du har flere koblinger i menyen din, begynner du med et høyere heltall.
Meny uten bilder
Til graciøst degradere vår breadcrumb Vi trenger et sekundært sett med HTML-listeelementer. Hvis du prøver å falle tilbake på en enkelt navigasjon, kan du bruke jQuery til å oppdage nettleseragenten og søke en ID tilsvarende. Dessverre er dette ikke alltid pålitelig (for enkelte mobile brukere, for eksempel). En annen løsning er å inkludere et IE-spesifikt stilark og gjem eller vis hvilken meny som best fungerer - men selvfølgelig er dette alternativet bare for Internet Explorer.
breadcrumb2 er vår nye ID brukt til å målrette menyen uten bilder. Holde med dette mønsteret jeg har brukt crumbs2 som klassen for den uordnede listen. Legg merke til at grunnen vi bruker klasser er for sin Enkelhet å duplisere disse menyene, så når du vil ha et par forskjellige brødsmuler på siden din, vil det med disse klassene aldri bli et problem.
Vi har holdt .først klasse, men i tillegg vedlagt .sisteklassen på den endelige listeposten. Uten bilder kan vi ikke duplisere pilene for hvert element i navigasjonsmenyen, og derfor har jeg brukt noen avrundede hjørner å krydre den sekundære menyen. .først klasse og .siste Behandle grenseradiusen på kantene av menyen vår for å skape en veldig kul web 2.0-stil.
CSS Skyve bakgrunnsbilder
For noen av de enklere effektene har jeg koblet begge brødkrummer sammen når de bygger egenskaper. Dette er nyttig fordi det sparer ikke bare plass, men når du går tilbake til redigering av stiler, er det enklere å tilpasse ditt eget utseende.
For begge #brødsmule og # breadcrumb2 Jeg har satt listestil: none; så alle interne elementer vil ikke ha markører. Du kan forlate disse hvis du liker effekten, men jeg fant HTML blir kjedelig å jobbe rundt, og det er mye enklere å lage nye ikoner. Så la oss starte med vår .smuler klasse.
.krummer display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: visited color: # 666; skjerm: blokk; flyte: venstre; skriftstørrelse: 12px; margin-venstre: -13px; polstring: 7px 17px 11px 25px; posisjon: relativ; tekst-dekorasjon: ingen; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); Bakgrunn-gjenta: nei-gjenta; bakgrunnsposisjon: 100% 0; posisjon: relativ; .crumbs li a: hover color: # 333; bakgrunnsposisjon: 100% -48px; markør: pointer; .crumbs li a: active color: # 333; bakgrunnsposisjon: 100% -96px; .crumbs li.first et span height: 29px; bredde: 3px; border-left: 1px solid # d9d9d9; posisjon: absolutt; topp: 0px; venstre: 0px; Vi sett vår uordnede liste til blokkere slik at ingenting annet kryper opp rundt i området. Legg merke til at listepostene er vises inline mens hver ankerlänk blir gitt mye mer plass til å spre seg ut. Vi vil at hele plassen i menyen vår skal kunne klikkes slik at dette krever bygge våre ankre som blokkelementer.
Jeg har brukt et bilde som heter bg-crumbs.png for bakgrunnen. Dette er kjent som et enkelt sprite-ark i CSS, eller alternativt a skyvedører teknikk. Dette betyr at når brukeren svinger eller klikker på en kobling, skifter vi bakgrunnsposisjonen for å vise den oppdaterte stilen. Dette enkeltbildet inneholder alle 3 av designene vi trenger for å lage breadcrumb-bakgrunnene på forskjellige stillinger, slik at vi kan bruke Bakgrunnen-stilling eiendom som skal flyttes basert på brukerinteraksjon.
Egendefinerte effekter med CSS3
Den originale breadcrumb-designen er mye enklere å lage. Dette er merkbart siden mange av CSS-egenskapene er mer grunnleggende enn du kan tenke deg, men nå begynner vi å fokusere på å duplisere disse effektene med bare CSS3!
De enkelte stilene tar opp mye plass, så jeg brer dem ned i 2 kodeblokker.
.crumbs2 display: block; margin-venstre: 27px; polstring: 0; polstring: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: visited color: # 666; skjerm: blokk; flyte: venstre; skriftstørrelse: 12px; polstring: 7px 16px 7px 19px; posisjon: relativ; tekst-dekorasjon: ingen; grense: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0.45, rgb (241.241.241)), fargestopp (0.73, rgb (245.245.245))); bakgrunnsbilde: -moz-lineær gradient (senterbunn, rgb (241.241.241) 45%, rgb (245.245.245) 73%); / * For Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * For 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-grense-topp-venstre-radius: 5px; .crumbs2 li.last en border-right-width: 1px; grense bunn-høyre-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-grense-bunn-høyre-radius: 5px;
De .crumbs2 menyen bruker CSS-gradienter å duplisere bakgrunnseffekter. Hvis du ikke er kjent med disse, anbefaler jeg sterkt CSS Tricks 'guide på CSS3 Gradients som skal gi deg opp til å bruke CSS3 gradientene effektivt. De har tatt med noen få flere egenskaper for Microsoft og Opera nettlesere, men disse støttes ikke i alle tilfeller. Jeg har ikke tatt med dem i demo koden her - men det er godt å forstå alle alternativene.
-webkit-gradient og -moz-lineær-gradient er kjerneløsningene som gjør det meste av arbeidet. Jeg har tatt med arvskode for eldre versjoner av Internet Explorer, men det er ikke garantert å vise riktig hele tiden (vi bruker likevel kraftige bildegengivelsesteknikker, tross alt). Legg merke til at jeg har satt både RGB- og hex-fargekoder mellom bakgrunnsegenskapene. Du kan holde fast ved en metode eller den andre hvis du er mer komfortabel.
De grense radius kode er kun brukt på vår sekundære breadcrumb navigasjon. Dette gir en fin effekt øverst til venstre og nederst til høyre på hele vår breadcrumb-meny. Baren ser ut til å nesten komme seg bort fra siden - virkelig en fantastisk effekt på nettlesere som støtter stilene, men disse dekker bare standardstatusene for våre lenker. La oss nå bygge sveveeffekter som ligner på bildene vi har brukt ovenfor.
CSS3 grenser og skygger
Når en bruker svinger over en lenke, vil vi oppdatere noen få ting. Først må vi mørk kantlinjene på toppen og bunnen av vårt aktive element. Dette kan også ses i bildene for både hover og aktive stater.
.crumbs2 li a: hover border-top-color: # c4c4c4; border-bottom-farge: # c4c4c4; bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0.45, rgb (241.241.241)), fargestopp (0.73, rgb (248.248.248))); bakgrunnsbilde: -moz-lineær gradient (senterbunn, rgb (241.241.241) 45%, rgb (248.248.248) 73%); / * For Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * For Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; farge: # 333; -moz-box-skygge: 0px 2px 2px # e8e8e8; -webkit-boks-skygge: 0px 2px 2px # e8e8e8; boks-skygge: 0px 2px 2px # e8e8e8; .crumbs2 li a: active border-top-color: # c4c4c4; border-bottom-farge: # c4c4c4; bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0.45, rgb (224.224.224)), fargestopp (0.73, rgb (235.235.235))); bakgrunnsbilde: -moz-lineær gradient (senterbunn, rgb (224.224.224) 45%, rgb (235.235.235) 73%); / * For Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * For Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; boks-skygge: -1px 1px 1px 0px #dadada innsett; -webkit-boks-skygge: -1px 1px 1px 0px #dadada innsett; -moz-box-shadow: -1px 1px 1px 0px #dadada-innsett; farge: # 333;
Jeg bruker nøyaktig samme gradientkode som vi har brukt ovenfor, men denne gangen er fargene mye forskjellige hvis du la merke til våre RGB-verdier. Hver av statene vil mørke tekstfarge til # 333, men andre deskriptorer har blitt endret litt for å korrespondere med brukerkommandoer.
På hover vil du se en skinnende preget effekt som kombinert med mørkede grenser gir siden popup stiler. Hvis du klikker og holder, kommer du inn i aktiv tilstand som har a mørk bakgrunnsgradient. Denne effekten får knappene til å se de faktisk er “presset” på siden.
Vi søker også box-shadow egenskaper fra de nye CSS3-spesifikasjonene. -webkit, -moz, og standardstilene brukes med de samme innstillingene. Hovering viser a lys skygge kommer ut fra bunnen av den valgte lenken. Når det er aktivt, blir skyggen dannet på toppen, høyre og nederste kant. Denne effekten er opprettet med innfelt Søkeord lagt til i slutten av hver boksskyggeegenskapslinje. Igjen CSS Tricks er din beste venn her med en fantastisk artikkel på bokseskygge, som det snakker om syntaksen og riktig bruk i CSS3.
Bonus: Flere stiler
I tillegg til veiledningskoden har jeg tatt med ekstra bakgrunnsbilder med tilpassede fargeskjemaer. Jeg har samplet fra den opprinnelige bakgrunnen og brukt Adobe Photoshop til å lage noen få variasjoner som du kan søke inn på ditt eget nettsted.
Disse bonusfiler er inkludert i kildefilen som du kan laste ned i .zip arkivformat i delen nedenfor.
Du kan sjekke ut bildet ovenfor for å få en ide om hva jeg snakker om. Hvis du trenger en bestemt fargevalg, åpnes du Photoshop> Bilde> Justeringer> Fargetone / Metning å endre fargeskjemaet for å matche din egen mal, husk å sjekk alternativet Colorize i fargetone / mattefeltet hvis fargen ikke endret i det hele tatt.
Konklusjon
Denne opplæringen burde ha fått deg kjent med noen av de nyere CSS3-teknikkene. Vi har laget to fantastiske breadcrumb menyer stylet på samme måte og bygget den på den måten at den kan bryte ned grasiøst i eldre nettlesere. I tillegg har jeg tilbudt demokoden og noen bonusbilder for deg å leke med.
Liker du spesielt stilene vi har konstruert her? Eller kanskje du har spørsmål eller ideer om hvordan du forbedrer veiledningskoden? Vennligst del dine tanker med oss i diskusjonsområdet under, og ikke glem å laste ned kildefilene slik at du kan spille med demoen!
Flere CSS3 opplæringsprogrammer
Trenger mer CSS3? Nedenfor er våre artikler for deg å forstå CSS3 teoretisk og praktisk!
- CSS3: Lag en RSS Feed Logo
- CSS3: Opprett et søkefelt
- CSS3: Opprett en AJAX-kontaktskjema
- CSS3: Bygg HTML5 / CSS3 nettsider
