Kodning af en Graceful Breadcrumb Navigation Menu i CSS3
Navigationsmenuer og links er muligvis de vigtigste grænsefladeelementer til et weblayout. Disse er de eneste afsætningsmuligheder for brugere rejse mellem sider og interagere med alt det indhold, du har oprettet. Breadcrumb tilbyder lignende funktionalitet med den ekstra fordel af sporer din nuværende position. Du vil kunne Vis alle tidligere linkveje som brugeren krydser dit webstedshierarki.
I denne vejledning skaber vi en strålende breadcrumb navigationsmenu med nogle CSS3 effekter. Dette er blevet testet for at fungere i alle større CSS3-kompatible browsere, selv de ældre browsere, der ikke understøtter CSS3, vil stadig gøre det korrekt i de fleste tilfælde.
Før vi dykker ind i kode, snakker vi lidt om funktionaliteten af vores breadcrumb, fuld tutorial på et spring!
Tilbyder stien
En breadcrumb trail er ikke mere kompleks end nogen anden menu. Vores stilarter vil udnytte langt mere komplekse CSS egenskaber end de fleste eksempler, men vores skabelonmaler er stadig på plads for at lede brugere fra den ene side til den anden.
I dette eksempel genskabes en lignende stil som Googles supportmenu. Du kan se deres menu på Gmail-supportsiden for at få en ide om, hvor vi er på vej. I sidste ende vil vi give vores bedste brugeroplevelse for alle brugere, uanset deres operativsystem eller browser software, således har jeg bygget 2 forskellige kodeeksempler til understøttelse af yndefulde nedbrydning blandt ældre browsere.
Den første er bygget ved hjælp af brugerdefinerede baggrundsbilleder og korrekte CSS justeringer. Alle svævebegivenheder og aktive begivenheder er præbygget med kun få CSS-stilarter, men brugere, der har billeder slukket, vil ikke kunne opleve disse effekter! Derfor har jeg også opbygget en lignende udseende menu med CSS gradienter, afrundede hjørner og boks skygger.
Hvis du er nervøs for at støtte begge stilarter, kan du vælge mellem dem til dit eget websted. De fleste besøgende bruger som standard billeder, men graver gennem dit website analytics værktøj, hvis du vil have mere præcise besøgsdata.
Nok ord, lad os hoppe ind i projektet! Vi starter med at opbygge de grundlæggende HTML-rammer og flytte ind i forskellige stilingseffekter. Først og fremmest du skal downloade billedet kræves for projektet.
Bare-Bones HTML
Jeg starter mit dokument med standard HTML5-side skabelon. Dette inkluderer standard doktype, koblet CSS og alle de grundlæggende elementer. Jeg har tilføjet koden nedenfor, hvis du vil starte dit eget dokument på denne måde. Bemærk, at det ikke bør påvirke, hvordan din breadcrumb vises, så vær så velkommen til at bruge din egen sideskabelon, hvis du ønsker det.
Standard side
Jeg deler koden i to forskellige blokke. Den første blok med billeder er bygget på en lidt anderledes måde, efterfulgt af vores menu uden billeder. Hvert sæt er givet sin egen ID så vi kan identificere indholdet meget lettere. Hvis du også er fan af jQuery, kan du bruge #ID vælger at manipulere alle de interne DOM elementer.
Først har vi en indeholdende div med id “brødkrumme“. I demo-filen har jeg brugt dette til at adskille vores kode og flytte den på tværs af siden med nogle tilføjede margener. Du kan fjerne denne ydre div, men du skal omforme alt for at passe til den nye skabelon. Det gør virkelig ikke ondt for at forlade en container, da du vil kunne styre positioneringen meget lettere.
Internt har jeg bygget brødkrummerne ved hjælp af en uordnet liste. Der er så mange unikke måder at tilpasse stiliserede HTML-lister til, og brødkrummer er kun en af dem. Du kan måske bemærke, at jeg har givet det oprindelige lister a klasse af “først“. Dette er nødvendigt for nogle ekstra polstring for at holde menupunkterne in-line. Derudover en lille span blok er tilføjet, så vi har en ordentlig venstre grænse, som ikke overlapper baggrundsbilledet.
Derudover plantes hvert ankerlink med et faldende tal for z-index ejendom. Brug billeder vi skal bruge har hver af vores links overlappende for at vise breadcrumb-pilen korrekt. Den nemmeste måde at opnå dette på er justering z-indeks så hvert link overlays det næste. Jeg begyndte med 9 og arbejdet ned derfra, men hvis du har flere links i din menu, begynder du med et højere heltal.
Menu uden billeder
Til graciøst nedbryde vores breadcrumb vi har brug for et sekundært sæt af HTML-listeelementer. Hvis du forsøger at falde tilbage på en enkelt navigation, kan du bruge jQuery til at registrere browseragenten og anvende et ID i overensstemmelse hermed. Desværre er dette ikke altid pålideligt (for visse mobile brugere, for eksempel). En anden løsning er at inkludere et IE-specifikt stilark og skjul eller vis hvilken menu der fungerer bedst - men selvfølgelig er denne mulighed kun for Internet Explorer.
breadcrumb2 er vores nye ID brugt til at målrette menuen uden billeder. Holder med dette mønster, jeg har brugt crumbs2 som klassen for den uordnede liste. Bemærk, at årsagen til, at vi bruger klasser er for sin enkelhed at duplikere disse menuer, så når du vil have et par forskellige brødkrummer på din side, vil det med disse klasser aldrig blive et problem.
Vi har holdt .først klasse men derudover tilføjet .sidstklasse på den endelige listepost. Uden billeder kan vi ikke duplikere pilene for hvert element i navigationsmenuen, så jeg har brugt nogle afrundede hjørner at krydre den sekundære menu. .først klasse og .sidst manipulere grænsen radius i selve kanterne af vores menu for at skabe en virkelig cool web 2.0-stil.
CSS Sliding Baggrundsbilleder
For nogle af de enklere virkninger har jeg sammenkoblet begge brødkrummer, når de bygger egenskaber. Dette er nyttigt, da det ikke kun sparer noget plads, men når du går tilbage til at redigere stilarter, er det nemmere at tilpasse dit eget udseende.
For begge #brødkrumme og # breadcrumb2 Jeg har sat listestil: none; så alle interne elementer vil ikke have markører. Du kan forlade disse, hvis du kan lide effekten, men jeg fandt HTML bliver trættende at arbejde rundt, og det er meget nemmere at oprette nye ikoner. Så lad os starte med vores .krummer klasse.
.krummer display: block; .crumbs li display: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: besøgte farve: # 666; display: blok; flyde: venstre; skrifttypestørrelse: 12px; margin-venstre: -13px; polstring: 7px 17px 11px 25px; stilling: relativ; tekst dekoration: ingen; .crumbs li a background-image: url ('... /img/bg-crumbs.png'); background-repeat: no-repeat; baggrundsstilling: 100% 0; stilling: relativ; .crumbs li a: hover color: # 333; baggrundsstilling: 100% -48px; markør: pointer; .crumbs li a: active color: # 333; baggrundsstilling: 100% -96px; .crumbs li.first et span height: 29px; bredde: 3px; grænse-venstre: 1px solid # d9d9d9; position: absolut; top: 0px; venstre: 0px; Vi sæt vores uordnede liste til blok så intet andet krøb op omkring området. Bemærk, at listeposterne er vises inline mens hvert ankerlink får mere plads til at sprede sig ud. Vi vil have hele rummet i vores menu for at kunne klikkes, så det kræver det opbygge vores ankre som blokelementer.
Jeg har brugt et billede kaldet bg-crumbs.png til baggrunden. Dette er kendt som et simpelt spriteark i CSS, eller alternativt a skydedøre teknik. Dette betyder, at når brugeren svæver eller klikker på et link, skifter vi baggrundsstillingen for at vise den opdaterede stil. Dette enkeltbillede indeholder alle 3 af de designs, vi har brug for til at skabe breadcrumb baggrunde i forskellige positioner, så vi kan bruge baggrund-stillingen ejendom, der skal flyttes ud fra brugerens interaktion.
Brugerdefinerede effekter med CSS3
Det originale breadcrumb design er meget enklere at skabe. Dette er mærkbart, da mange af CSS-egenskaberne er mere grundlæggende end du kunne forestille dig, men nu begynder vi at fokusere på at duplikere disse effekter med kun CSS3!
De enkelte stilarter tager meget plads, så jeg brækker dem ned i 2 kodeblokke.
.crumbs2 display: block; margin-venstre: 27px; polstring: 0; polstring-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: besøgte farve: # 666; display: blok; flyde: venstre; skrifttypestørrelse: 12px; polstring: 7px 16px 7px 19px; stilling: relativ; tekst dekoration: ingen; grænse: 1px solid # d9d9d9; grænse-højre bredde: 0px; .crumbs2 li a background-image: -webkit-gradient (lineær, venstre bund, venstre top, farve stop (0.45, rgb (241.241.241)), farve stop (0.73, rgb (245.245.245))); baggrundsbilde: -moz-lineær gradient (center bund, 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 grænse-top-venstre-radius: 5px; -moz-grænse-radius-topleft: 5px; -webkit-grænse-top-venstre-radius: 5px; .crumbs2 li.last en grænse-højre bredde: 1px; grænse-bund-højre-radius: 5px; -moz-grænse-radius-bottomright: 5px; -webkit-grænse-bund-højre-radius: 5px;
Det .crumbs2 menuen bruger CSS gradienter at duplikere baggrundseffekterne. Hvis du ikke er bekendt med disse, anbefaler jeg stærkt CSS Tricks 'guide til CSS3 Gradients, som skal give dig mulighed for effektivt at bruge CSS3-gradienter. De har inkluderet et par flere egenskaber til Microsoft og Opera browsere, men disse understøttes ikke fuldt ud i alle tilfælde. Jeg har ikke medtaget dem i demokoden her - men det er godt at forstå alle mulighederne.
-webkit-gradient og -Moz-lineær-gradient er de vigtigste løsninger, der gør det meste af arbejdet. Jeg har inkluderet ældre kode til ældre versioner af Internet Explorer, men det er ikke garanteret at vise korrekt hele tiden (vi bruger alligevel kraftige billedgengivelsesteknikker). Bemærk, at jeg har indstillet både RGB- og hex-farvekoder mellem baggrundsegenskaberne. Du kan holde fast ved en metode eller den anden, hvis du er mere komfortabel.
Det grænseradius kode anvendes kun på vores sekundære breadcrumb navigation. Dette giver en pæn effekt øverst til venstre og nederst til højre på hele vores breadcrumb menu. Linjen ser ud til at komme næsten væk fra siden - virkelig en fantastisk effekt på browsere, der understøtter stilarterne, men disse dækker kun standardtilstande for vores links. Lad os nu bygge hovereffekter svarende til de billeder, vi har brugt ovenfor.
CSS3 grænser og skygger
Når en bruger svæver over et link, ønsker vi at opdatere et par ting. Først skal vi mørk kantfarverne på toppen og bunden af vores aktive element. Dette kan også ses i billederne for både hover og aktive tilstande.
.crumbs2 li a: svinger border-top-color: # c4c4c4; border-bottom-farve: # c4c4c4; baggrundsbillede: -webkit-gradient (lineær, venstre bund, venstre top, farve stop (0,45, rgb (241.241.241)), farve stop (0.73, rgb (248.248.248))); baggrundsbilde: -moz-lineær gradient (center bund, 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)"; farve: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-boks-skygge: 0px 2px 2px # e8e8e8; box-skygge: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktiv border-top-farve: # c4c4c4; border-bottom-farve: # c4c4c4; baggrundsbillede: -webkit-gradient (lineær, venstre bund, venstre top, farve stop (0,45, rgb (224.224.224)), farve stop (0,73, rgb (235,235,235))); baggrundsbilde: -moz-lineær gradient (center bund, 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)"; box-skygge: -1px 1px 1px 0px #dadada input; -webkit-box-skygge: -1px 1px 1px 0px #dadada input; -moz-box-shadow: -1px 1px 1px 0px #dadada input; farve: # 333;
Jeg bruger den nøjagtige samme gradientkode som vi har brugt ovenfor, men denne gang er farverne meget forskellige, hvis du har bemærket vores RGB-værdier. Hver af staterne vil mørke tekstfarve til # 333, men andre deskriptorer er blevet ændret lidt for at svare til brugerkommandoer.
På svævefly vil du se en skinnende præget effekt som kombineret med mørkede grænser giver side popup stilarter. Hvis du klikker og holder, kommer du ind i den aktive tilstand, som indeholder a mørk baggrundsgradient. Denne effekt får knapperne til at se de er faktisk “presset” på siden.
Vi søger også box-shadow egenskaber fra de nye CSS3-specifikationer. -webKit, -Moz, og standardstile bruges med de samme indstillinger. Hovering viser a lys skygge kommer ud fra bunden af det valgte link. Når det er aktivt, dannes skyggen på toppen, højre og nederste kant. Denne effekt er oprettet med nedfældning søgeord tilføjet til slutningen af hver boksskyggeegenskabslinje. Igen er CSS Tricks din bedste ven her med en fantastisk artikel om boksskygge, da det fortæller om syntaksen og dens korrekte brug i CSS3.
Bonus: Flere stilarter
Ud over selvstudiekoden har jeg inkluderet ekstra baggrundsbilder med tilpassede farveskemaer. Jeg har samplet fra de oprindelige baggrunde og brugt Adobe Photoshop til at oprette nogle få variationer, som du kan anvende på din egen hjemmeside.
Disse bonusfiler er inkluderet i kildefilen som du kan downloade i .zip arkivformat i afsnittet nedenfor.
Du kan tjekke billedet ovenfor for at få en ide om, hvad jeg taler om. Hvis du har brug for et specifikt farveskema, skal du åbne Photoshop> Billede> Justeringer> Farve / Mætning at ændre farveskemaet for at matche din egen skabelon, husk at Kontroller indstillingen Farve i farven til farvetone / farvning, hvis farven slet ikke ændres.
Konklusion
Denne vejledning skulle have fået dig bekendt med nogle af de nyere CSS3 teknikker. Vi har lavet to fantastiske breadcrumb-menuer, der er stylet på en lignende måde og bygget den på den måde, at den kan nedbrydes graciøst i ældre browsere. Derudover har jeg tilbudt min demokode og nogle bonusbilleder, som du kan lege med.
Kan du især lide de stilarter, vi har konstrueret her? Eller måske har du spørgsmål eller ideer til, hvordan du forbedrer vejledningskoden? Del venligst dine tanker med os i diskussionsområdet nedenfor, og glem ikke at downloade kildefilerne, så du kan spille med demoen!
Flere CSS3 Tutorials
Trænger til mere CSS3? Nedenfor er vores artikler for dig at forstå CSS3 teoretisk og praktisk!
- CSS3: Opret et RSS Feed Logo
- CSS3: Opret et søgefelt
- CSS3: Opret en AJAX-kontaktformular
- CSS3: Opbygning af HTML5 / CSS3 websider
