Kodiranje elegantnega navigacijskega menija za kratek križ v CSS3
Navigacijski meniji in povezave so morda najpomembnejši elementi vmesnika za spletno postavitev. To so edini trgi za uporabnike potovanje med stranmi in interakcijo z vso vsebino, ki ste jo ustvarili. Breadcrumb ponuja podobno funkcionalnost z dodatno prednostjo sledenje trenutnemu položaju. Lahko prikaže vse prejšnje poti povezave ko uporabnik prečka vašo hierarhijo spletnega mesta.
V tej vadnici bomo ustvarili briljantni navigacijski meni z nekaterimi učinki CSS3. To je bilo preizkušeno, da deluje v vseh večjih brskalnikih, ki so skladni s standardom CSS3, tudi starejši brskalniki, ki ne podpirajo CSS3, ga bodo v večini primerov še vedno pravilno prikazali..
Preden se potopimo v kodo, se bomo malo pogovorili o funkcionalnosti našega krušne drobtine, celotni vadnici ob skoku!
Ponudba poti
Pohodna pot ni bolj kompleksna kot kateri koli drug meni. Naši slogi bodo uporabljali veliko bolj zapletene lastnosti CSS kot večina primerov, vendar pa je predloge za golo kosto še vedno na voljo za usmerjanje uporabnikov iz ene strani na drugo..
V tem primeru bomo ponovno ustvarili podoben slog kot Google meni za podporo. Njihov meni na strani za podporo Gmailu si lahko ogledate, da dobite idejo, kam gremo. Na koncu želimo nudimo najboljšo uporabniško izkušnjo vsem uporabnikom, ne glede na njihov operacijski sistem ali programsko opremo brskalnika, zato sem zgradil 2 različna primera kode, ki podpirajo elegantno degradacijo med starejšimi brskalniki.
Prva je zgrajena z uporabo slike ozadja po meri in pravilno poravnavo CSS. Vsi dogodki hover in aktivni dogodki so vnaprej zgrajeni s samo nekaj stilov CSS, vendar uporabniki, ki imajo izklopljene slike, ne bodo mogli doživeti teh učinkov! Zato sem izdelal tudi podoben meni z CSS gradienti, zaobljenimi vogali in senčili.
Če ste nervozni glede podpore obeh stilov, lahko izbirate med njimi za svoje spletno mesto. Večina obiskovalcev bo privzeto uporabljala slike, toda če želite natančnejše podatke o obiskovalcih, si poglejte orodje za analizo spletnega mesta.
Dovolj besed, skočimo v projekt! Začeli bomo z izdelavo osnovnega okvira HTML in prešli na različne učinke oblikovanja. Najprej morate prenesti sliko potrebno za projekt.
Bare-Bones HTML
Dokument začenjam z standardni predlogi strani HTML5. To vključuje privzeti doctype, povezane CSS in vse osnovne elemente. Spodnjo kodo sem dodal, če želite na ta način zagnati lasten dokument. Upoštevajte, da ne bo vplivalo na to, kako je prikazana vaša drobtinica, zato lahko po želji uporabite lastno predlogo strani.
Privzeta stran
Razdelil bom kodo na dva različna bloka. Prvi blok s slikami je zgrajen z nekoliko drugačnim načinom, sledi naš meni brez slik. Vsak komplet ima svoj ID tako da lahko vsebino veliko lažje prepoznamo. Če ste tudi ljubitelj jQuery, lahko uporabite #ID selektor za manipulacijo vseh notranjih elementov DOM.
Najprej imamo a ki vsebuje div z id “drobtina“. V demo datoteki sem to uporabil, da ločim kodo in jo premaknem po strani z nekaj dodatnimi robovi. Ta zunanji div lahko odstranite, vendar boste morali ponovno oblikovati vse, da bo ustrezalo novi predlogi. Res ne boli, če pustimo zabojnik, saj boste lahko pozicioniranje veliko lažje nadzorovali.
Interno sem naredil drobtine z neurejenim seznamom. Obstaja toliko edinstvenih načinov, da prilagodite stilizirane sezname HTML in drobtine so le ena od njih. Morda boste opazili, da sem dal prvotno točko seznama a razred od “prvi“. To je potrebno za nekatere dodatne oblazinjenje, da ohranite elemente menija v vrstici. Dodatno majhna kalibrirni blok je dodana, tako da imamo pravilno levo obrobo, ki ne prekriva slike ozadja.
Poleg tega se vsaka sidrna povezava zasadi s padajočim številom za z-indeks nepremičnine. Uporaba slik, ki jih bomo morali se vsaka od naših povezav prekriva da pravilno prikažete puščico. To je najlažje doseči prilagajanje z-indeksa zato vsaka povezava prekriva naslednje. Začel sem z 9 in delal od tam, vendar če imate več povezav v vašem meniju šele začeti z višjim celo število.
Meni Brez slik
Za graceful degradirajte našo drobtino potrebujemo sekundarni niz elementov seznama HTML. Če poskušate zamenjati eno samo navigacijo, lahko z jQuery odkrijete agent brskalnika in ustrezno uporabite ID. Žal to ni vedno zanesljivo (na primer za nekatere mobilne uporabnike). Druga rešitev je, da vključuje poseben slog slogov IE in skrij ali pokaži, kateri meni najbolje deluje - Seveda pa je ta možnost samo za Internet Explorer.
breadcrumb2 je naš novi ID, ki se uporablja za ciljanje menija brez slik. Ohranjanje tega vzorca sem uporabila drobtine2 kot razred za neurejen seznam. Upoštevajte, da razlog, ki ga uporabljamo razredi je za njegovo preprosto podvojiti te menije, tako da, ko želite na vaši strani nekaj različnih drobtin, s temi razredi to ne bo nikoli problem.
Ohranili smo .prvi razredu, vendar dodatno .zadnjina končni seznam. Brez slik ne moremo podvojiti puščic za vsak element navigacijskega menija, zato sem jih uporabil zaobljeni vogali začiniti sekundarni meni. .prvi razred in .zadnji manipulirajte obmejni polmer na samih robovih našega menija, da ustvarite resnično kul splet 2.0 videza.
CSS drsne ozadne slike
Pri nekaterih enostavnejših učinkih sem združil obe krušni drobtini skupaj pri gradnji lastnosti. To je uporabno, saj ne samo, da prihrani nekaj prostora, ampak se vrne na urejanje slogov lažje prilagodite svoj pogled.
Za oba #breadcrumb in # breadcrumb2 Sem nastavil list-style: noben; zato vsi notranji elementi ne bodo imeli oznak. Lahko jih pustite, če vam je všeč učinek, vendar sem ugotovil, da je HTML utrujen, da bi delal okoli in veliko lažje je ustvariti nove ikone. Začnimo torej z našo .drobtine razred.
.drobtine prikaz: blok; .crumbs li prikaz: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: povezava, .crumbs li a: obiskana color: # 666; prikaz: blok; plovec: levo; velikost pisave: 12px; margina levo: -13px; oblazinjenje: 7px 17px 11px 25px; položaj: relativna; dekoracija besedila: nobena; .crumbs li a ozadje-slika: url ('… /img/bg-crumbs.png'); ponovitev v ozadju: brez ponovitve; položaj ozadja: 100% 0; položaj: relativna; .crumbs li a: hover color: # 333; položaj ozadja: 100% -48px; kazalec: kazalec; .crumbs li a: aktivno color: # 333; položaj ozadja: 100% -96px; .crumbs li.first a span height: 29px; širina: 3px; meja levo: 1px trdna # d9d9d9; položaj: absolutno; vrh: 0px; levo: 0px; Mi nastavite naš neurejen seznam blok tako da se nič drugega ne mudi po okolici. Obvestilo o seznamu je prikazano v vrstici medtem ko ima vsak sidrni člen veliko več prostora za širjenje. Želimo, da bi bilo mogoče ves prostor v našem meniju klikniti, tako da je to potrebno gradimo sidra kot blokovne elemente.
Uporabil sem sliko, ki jo kličem bg-crumbs.png za ozadje. To je znano kot preprosta sprite lista v CSS-ju ali pa a drsna vrata tehniko. To pomeni, da ko uporabnik obrne ali klikne povezavo, premaknemo pozicijo ozadja, da prikažemo posodobljen slog. Ta posamezna slika vsebuje vse tri modele, ki jih potrebujemo za ustvarjanje drobnih ozadij na različnih položajih, tako da lahko uporabimo položaj ozadja premestitev glede na interakcijo uporabnika.
Učinki po meri s CSS3
Izvirno oblikovanje krušne drobtine je veliko lažje ustvariti. To je opazno, saj je veliko lastnosti CSS bolj osnovno, kot si lahko predstavljate, zdaj pa se začenjamo osredotočati na podvajanje teh učinkov samo s CSS3!
Posamezni slogi zavzemajo veliko prostora, zato jih bom razdelil v 2 kodna bloka.
.crumbs2 display: block; margin-left: 27px; oblazinjenje: 0; padding-top: 10px; .crumbs2 li prikaz: inline; .crumbs2 li a, .crumbs2 li a: povezava, .crumbs2 li a: obiskana color: # 666; prikaz: blok; plovec: levo; velikost pisave: 12px; oblazinjenje: 7px 16px 7px 19px; položaj: relativna; dekoracija besedila: nobena; obroba: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a ozadje-slika: -webkit-gradient (linearno, levo spodaj, levo zgoraj, barvno stop (0,45, rgb (241,241,241)), barvno stop (0,73, rgb (245,245,245))); background-image: -moz-linear-gradient (sredinsko dno, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Za Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last border-right-width: 1px; polmer meje-spodaj-desno: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
The .drobtine2 meni CSS gradienti podvajati učinke ozadja. Če niste seznanjeni s temi, vam zelo priporočam vodnik CSS Tricks na CSS3 gradientih, ki naj bi vam omogočil učinkovito uporabo CSS3 gradientov. V brskalnike Microsoft in Opera so vključili še nekaj lastnosti, ki pa v vseh primerih niso v celoti podprte. Tukaj jih nisem vključil v demo kodo - vendar je dobro razumeti vse možnosti.
-webkit-gradient in -moz-linearni gradient so temeljne rešitve, ki opravljajo večino dela. Za starejše različice Internet Explorerja sem vključil starejšo kodo ni zagotovljena za pravilno prikazovanje ves čas (navsezadnje uporabljamo zmogljive tehnike upodabljanja slik). Opazite, da sem med lastnostmi ozadja nastavil RGB in hex barvne kode. Lahko se držite ene ali druge metode, če ste bolj udobni.
The polmer meje Koda se uporablja samo za našo sekundarno navigacijo. To daje čeden učinek na zgornjem levem in spodnjem desnem delu celotnega menija. Vrstica se zdi, da skoraj pop-up stran - resnično fantastičen učinek na brskalnike, ki podpirajo sloge, vendar le zajemajo privzeta stanja za naše povezave. Zdaj bomo gradili učinke hover, podobno kot slike, ki smo jih uporabili zgoraj.
CSS3 Meje in sence
Kadarkoli uporabnik dvigne preko povezave, želimo posodobiti nekaj stvari. Najprej moramo zatemnite barve obrobe na vrhu in dnu našega aktivnega elementa. To je mogoče videti tudi na slikah, tako za hover kot za aktivna stanja.
.crumbs2 li a: hover border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linearno, levo spodaj, levo zgoraj, barvno stop (0,45, rgb (241,241,241)), barvno stop (0,73, rgb (248,248,248))); background-image: -moz-linear-gradient (sredinsko dno, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Za Internet Explorer 8 * / -ms filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; barva: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktivno border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; background-image: -webkit-gradient (linearno, levo spodaj, levo zgoraj, barvno stop (0,45, rgb (224,224,224)), barvno stop (0,73, rgb (235,235,235))); background-image: -moz-linear-gradient (sredinsko dno, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Za Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Za Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; barva: # 333;
Uporabljam enako gradientno kodo, kot smo jo uporabili zgoraj, toda tokrat so barve precej drugačne, če ste opazili naše RGB vrednosti. Vsaka država bo potemnila barvo besedila na # 333, drugi deskriptorji so bili rahlo spremenjeni, da ustrezajo ukazi uporabnikov.
Na hover boste videli a sijoč reliefni učinek skupaj z zatemnjene meje daje strani popup sloge. Če kliknete in držite, boste v aktivno stanje, ki vsebuje a temen gradient ozadja. Ta učinek povzroči, da so gumbi videti “pritisnjeno” na strani.
Prijavljamo se tudi box-shadow lastnosti iz novih specifikacij CSS3. -webkit, -moz, privzeti slogi se uporabljajo z enakimi nastavitvami. Med lebdenjem se prikaže a svetla senca izhaja iz dna izbrane povezave. Ko je aktivna, se bo senca oblikovala na zgornji, desni in spodnji meji. Ta učinek se ustvari z inset ključna beseda je dodana na konec vsake vrstice lastnosti lastnosti box-shadow. Tudi CSS Tricks je vaš najboljši prijatelj s čudovitim člankom o box-shadowu, saj govori o skladnji in njeni pravilni uporabi v CSS3.
Bonus: Več slogov
Poleg tutorske kode sem vključil dodatne slike ozadja s prilagojenimi barvnimi shemami. Sem vzorčil iz izvirnega ozadja in uporabljal Adobe Photoshop za ustvarjanje nekaj različic, ki jih lahko uporabite v svoji spletni strani.
To Bonusne datoteke so vključene v izvorno datoteko ki jih lahko prenesete v obliki zapisa .zip v spodnjem razdelku.
Ogledate si lahko zgornjo sliko, da dobite idejo o tem, o čem govorim. Če potrebujete posebno barvno shemo, odprite Photoshop> Slika> Prilagoditve> Odtenek / nasičenost Če želite spremeniti barvno shemo, da se bo ujemala z vašo lastno predlogo, ne pozabite označite možnost Colorize v podoknu Hue / Saturation, če se barva sploh ne spremeni.
Zaključek
Ta vadnica bi vas morala seznaniti z nekaterimi novejšimi CSS3 tehnikami. Ustvarili smo dva fantastična menija, ki sta bila oblikovana na podoben način in ju izdelala tako, da se lahko v starejših brskalnikih degradira. Poleg tega sem vam ponudil demo kodo in nekaj bonus slik, s katerimi se lahko igrate.
Ali vam je všeč predvsem stil, ki smo ga izdelali tukaj? Ali pa morda imate vprašanja ali ideje o tem, kako izboljšati kodo vadnice? Prosimo, delite svoje misli z nami v spodnjem razpravnem prostoru in ne pozabite prenesti izvornih datotek, da se lahko igrate z demo!
Več vaj CSS3
Želja po več CSS3? Spodaj so naši članki za vas, da razumete CSS3 teoretično in praktično!
- CSS3: Ustvarite logotip vira RSS
- CSS3: Ustvari iskalno polje
- CSS3: Ustvarite kontaktni obrazec AJAX
- CSS3: Izdelava spletnih strani HTML5 / CSS3
