Grubaus Breadcrumb navigacijos meniu kodavimas CSS3
Naršymo meniu ir nuorodos galbūt yra svarbiausi sąsajos elementai tinklapio išdėstymui. Tai yra vienintelė vartotojų rinka keliauti tarp puslapių ir bendrauti su visu sukurtu turiniu. „Breadcrumb“ siūlo panašias funkcijas su papildoma nauda stebėti dabartinę padėtį. Galėsite rodyti visus ankstesnius nuorodų kelius kai vartotojas perkelia jūsų svetainės hierarchiją.
Šioje instrukcijoje mes sukursime puikų naršymo meniu su kai kuriais CSS3 efektais. Tai buvo išbandyta, kad veiktų visose pagrindinėse CSS3 atitinkančiose naršyklėse, net senesnės naršyklės, kurios nepalaiko CSS3, daugeliu atvejų bus tinkamos..
Prieš nardydami į kodą, mes šiek tiek kalbėsime apie mūsų skanėstų funkcionalumą, visą pamoką šokinėjant!
Siūlomas takas
Grūdų takas nėra sudėtingesnis nei bet kuris kitas meniu. Mūsų stiliai panaudos daug sudėtingesnes CSS savybes nei dauguma pavyzdžių, tačiau mūsų kaulų kaulų šablonas vis dar veikia, kad naudotojai būtų nukreipti iš vieno puslapio į kitą.
Šiame pavyzdyje mes atkursime panašų stilių kaip „Google“ palaikymo meniu. Jų meniu galite peržiūrėti „Gmail“ palaikymo puslapyje, kad galėtumėte sužinoti, kur mes einame. Galiausiai norime suteikti visiems naudotojams geriausią mūsų naudotojų patirtį, nepriklausomai nuo jų operacinės sistemos ar naršyklės programinės įrangos, todėl aš sukūriau 2 skirtingi kodų pavyzdžiai, kuriais remiamas grakštus degradavimas tarp senesnių naršyklių.
Pirmasis pastatytas naudojant pasirinktiniai fono paveikslėliai ir tinkamas CSS derinimas. Visi renginiai ir aktyvūs įvykiai yra iš anksto sukonstruoti tik keliais CSS stiliais, tačiau naudotojai, turintys išjungtus vaizdus, negalės patirti šių efektų! Štai kodėl aš taip pat sukūriau panašų išvaizdos meniu su CSS gradientais, suapvalintais kampais ir dėžutės šešėliais.
Jei būsite nervingi dėl abiejų stilių palaikymo, galite pasirinkti iš jų savo svetainėje. Dauguma lankytojų naudos vaizdus pagal numatytuosius nustatymus, tačiau, jei norite gauti tikslesnius lankytojų duomenis, naudokite savo svetainės analizės įrankį.
Pakanka žodžių, pereikime prie projekto! Pradėsime statydami pagrindinę HTML sistemą ir pereisime prie skirtingų stiliaus efektų. Pirmiausia reikia atsisiųsti vaizdą reikalingi projektui.
Bare-Bones HTML
Aš pradedu dokumentą su standartinis HTML5 puslapio šablonas. Tai apima numatytąjį doctype, susietą CSS ir visus pagrindinius elementus. Jei norite tokiu būdu pradėti savo dokumentą, pridėjau toliau pateiktą kodą. Atkreipkite dėmesį, kad jis neturėtų turėti įtakos, kaip rodomas jūsų skydelis, todėl, jei norite, naudokite savo puslapio šabloną.
Numatytasis puslapis
Aš padalysiu kodą į du skirtingus blokus. Pirmasis blokas su vaizdais yra pastatytas šiek tiek kitaip, o mūsų meniu be vaizdų. Kiekvienam rinkiniui suteikiamas pats ID todėl galime lengviau nustatyti turinį. Jei taip pat esate „jQuery“ gerbėjas, galite naudoti #ID selektorius valdyti visus vidinius DOM elementus.
Pirmiausia turime kurių sudėtyje yra div su ID “rupiniai“. Demonstraciniame faile naudoju šį kodą atskirti ir perkelti jį į puslapį su tam tikrais papildomais parašais. Galite pašalinti šį išorinį disko, bet viską reikės iš naujo keisti, kad atitiktų naująjį šabloną. Iš tikrųjų tai nepavojinga palikti konteinerį, nes galėsite daug lengviau valdyti padėties nustatymą.
Viduje aš sukūriau duonos skrebučius naudodamiesi neregistruotu sąrašu. Yra tiek daug unikalių būdų, kaip pritaikyti stiliaus HTML sąrašus, ir duonos riešutai yra tik vienas iš jų. Galite pastebėti, kad aš pateikiau pradinį sąrašo elementą a klasė apie “Pirmas“. Tai reikalinga kai kurioms papildomoms paminkštoms, kad meniu elementai būtų išlaikyti eilutėje. Be to, mažas span blokas yra pridėtas, todėl turime tinkamą kairiąją sieną, kuri nesutampa su fono vaizdu.
Be to, kiekviena inkarų jungtis yra pasodinta su mažėjančiu skaičiumi z-indeksas nuosavybė. Naudojant vaizdus, kuriuos reikia kiekvienas mūsų ryšys sutampa rodoma, ar rodyklė rodoma tinkamai. Lengviausias būdas tai pasiekti koreguojant z-indeksą taigi kiekviena nuoroda perdengia kitą. Aš pradėjau 9 ir iš ten dirbo, bet jei jūsų meniu yra daugiau nuorodų, pradėkite nuo didesnio sveikojo skaičiaus.
Meniu be vaizdų
Į grakštus degraduoja mūsų duoną mums reikia antrinio HTML sąrašo elementų rinkinio. Jei bandote grįžti prie vienos navigacijos, galite naudoti jQuery, kad aptiktų naršyklės agentą ir atitinkamai pritaikytumėte ID. Deja, tai ne visada patikima (pvz., Tam tikriems mobiliesiems vartotojams). Kitas sprendimas yra įtraukti IE specifinę stilių lentelę ir slėpti arba rodyti, kuris meniu geriausiai veikia - tačiau, žinoma, ši parinktis skirta tik „Internet Explorer“.
breadcrumb2 yra mūsų naujas ID, naudojamas norint nukreipti meniu be vaizdų. Laikydamiesi šio modelio, kurį naudoju trupiniai2 kaip nereguliuojamo sąrašo klasė. Atminkite, kad priežastis, dėl kurios naudojatės klasės yra jos paprastumas, kad būtų galima kopijuoti šiuos meniu, taigi, kai norite, kad jūsų puslapyje būtų keletas skirtingų skrudintų kukurūzų, su šiomis klasėmis tai niekada nebus problema.
Mes išlaikėme .Pirmas klasė, bet papildomai pridedama .paskutinisį galutinį sąrašo elementą. Be vaizdų mes negalime dubliuoti kiekvieno naršymo meniu elemento rodyklių, taigi aš naudoju kai kuriuos apvalūs kampai pridėti antrinį meniu. .Pirmas klasės ir .paskutinis manipuliuoti pasienio spinduliu pačiame mūsų meniu krašte, kad sukurtumėte tikrai kietą interneto 2.0 stilių.
CSS slankios fono nuotraukos
Kai kuriuos paprastesnius efektus, statydami savybes, sujungiau abu rupinius. Tai naudinga, nes ji ne tik taupo tam tikrą erdvę, bet ir grįždama prie redagavimo stilių lengviau pritaikyti savo išvaizdą.
Abiems #breadcrumb ir # breadcrumb2 Aš nustatiau sąrašo stilius: nėra; todėl visi vidiniai elementai neturės žymeklių. Jūs galite palikti šiuos, jei jums patinka šis efektas, bet sužinojau, kad HTML tampa varginantis, kad galėtų dirbti aplink, ir daug lengviau sukurti naujas piktogramas. Taigi pradėkime nuo mūsų .trupinius klasė.
.trupiniai ekranas: blokas; .crumbs li display: inline; .crumbs li.first kairėje pusėje: 8px; .crumbs li a, .crumbs li a: nuoroda, .crumbs li a: aplankė spalva: # 666; ekranas: blokas; plūdė: kairė; šrifto dydis: 12px; margin-left: -13px; pagalvėlė: 7px 17px 11px 25px; pozicija: santykinis; teksto apdaila: nėra; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); fono kartojimas: ne kartoti; fono padėtis: 100% 0; pozicija: santykinis; .crumbs li a: hover color: # 333; fono padėtis: 100% -48px; žymeklis: žymeklis; .crumbs li a: aktyvus spalva: # 333; fono padėtis: 100% -96px; .crumbs li.first a span height: 29px; plotis: 3px; kairėje: 1px kietas # d9d9d9; pozicija: absoliutus; viršuje: 0px; kairėje: 0px; Mes nustatyti mūsų neregistruotą sąrašą blokuoti taigi niekas daugiau neišlenda aplink vietovę. Atkreipkite dėmesį į sąrašo elementus rodoma eilutėje kai kiekviena inkarų sąsaja suteikiama daug daugiau erdvės, kurią galima išskleisti. Norime, kad visa mūsų meniu erdvė būtų paspaudžiama, kad tai būtų reikalinga statyti mūsų inkarus kaip blokinius elementus.
Aš naudoju skambintą vaizdą bg-crumbs.png fone. Tai žinoma kaip paprastas sprite lapas CSS, arba alternatyviai a stumdomos durys technika. Tai reiškia, kai vartotojas paslepia arba spusteli ant nuorodos, perkeliame fono padėtį, kad būtų rodomas atnaujintas stilius. Šiame viename atvaizde yra visi 3 dizainai, kuriuos reikia sukurti norėdami sukurti skirtingų pozicijų riešutų fonus, kad galėtume naudoti fono padėtis perkelti, remiantis vartotojo sąveika.
Pasirinktiniai efektai su CSS3
Originalus skonio dizainas yra kur kas paprastesnis. Tai pastebima, nes daugelis CSS savybių yra paprastesnės, nei galėtumėte įsivaizduoti, bet dabar mes pradėsime sutelkti dėmesį į šių efektų dubliavimą tik su CSS3!
Individualūs stiliai užima daug vietos, todėl juos suskirstysiu į 2 kodų blokus.
.trupiniai2 ekranas: blokas; margas kairėje: 27px; įdėklas: 0; įdėklas: 10px; .crumbs2 li ekranas: inline; .crumbs2 li a, .crumbs2 li a: nuoroda, .crumbs2 li a: aplankė spalva: # 666; ekranas: blokas; plūdė: kairė; šrifto dydis: 12px; pagalvėlė: 7px 16px 7px 19px; pozicija: santykinis; teksto apdaila: nėra; siena: 1px kietas # d9d9d9; kraštinės-dešinės pločio: 0px; .crumbs2 li a background-image: -webkit-gradientas (linijinis, kairysis apačioje, kairėje viršuje, spalvų sustojimas (0,45, rgb (241,241,241)), spalvų stabdymas (0,73, rgb (245,245,245))); fono vaizdas: -moz-linijinis gradientas (vidurinis dugnas, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Internet Explorer 5.5 - 7 * / filtrui: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 * / -ms filtrui: "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 a border-right-width: 1px; apatinis dešinysis spindulys: 5px; -moz-border-radius-bottomright: 5px; -webkit-riba-apačioje dešinysis spindulys: 5px;
The .trupiniai2 meniu naudojamas CSS gradientai kopijuoti foninius efektus. Jei nesate susipažinę su šiais, aš labai rekomenduoju CSS Tricks vadovą CSS3 gradientuose, kurie turėtų efektyviai naudoti CSS3 gradientus. Jie įtraukė dar keletą „Microsoft“ ir „Opera“ naršyklių savybių, tačiau visais atvejais jie nėra visiškai palaikomi. Aš jų neįtraukiau į demo kodą - bet gerai suprasti visas parinktis.
-webkit-gradientas ir -moza-linijinis gradientas yra pagrindiniai sprendimai, kurie daro didžiąją dalį darbo. Įtraukiau senesnius „Internet Explorer“ versijų kodus, tačiau tai nėra garantuota tinkamai rodyti visą laiką (galiausiai naudojame galingas vaizdo atvaizdavimo technologijas). Atkreipkite dėmesį, kad tarp fono savybių nustatiau tiek RGB, tiek šešių spalvų kodus. Jūs galite laikytis vieno metodo ar kito, jei esate patogesnis.
The pasienio spindulys kodas yra taikomas tik mūsų antrinei bukleto navigacijai. Tai suteikia tvarkingą efektą viršutiniame kairiajame ir apatiniame dešiniajame meniu mūsų meniu. Atrodo, kad juosta beveik išjungia puslapį - tai tikrai fantastinis efektas naršyklėms, kurios palaiko stilius, tačiau jos apima tik mūsų nuorodų numatytuosius nustatymus. Dabar, kurkime hover efektus, panašius į anksčiau naudotus vaizdus.
CSS3 sienos ir šešėliai
Kai naudotojas persijungia į nuorodą, norime atnaujinti keletą dalykų. Pirmiausia turime tamsinti pasienio spalvas aktyvaus elemento viršuje ir apačioje. Tai galima matyti ir vaizduose, tiek su judančiomis, ir aktyviomis būsenomis.
.trupiniai2 li a: hover border-top-color: # c4c4c4; krašto apačios spalva: # c4c4c4; fono paveikslėlis: -webkit-gradientas (linijinis, kairysis apačioje, kairysis viršuje, spalvų sustojimas (0.45, rgb (241,241,241)), spalvų stabdymas (0,73, rgb (248,248,248))); fono vaizdas: -moz-linijinis gradientas (vidurinis dugnas, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Internet Explorer 5.5 - 7 * / filtrui: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms filtrui: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; spalva: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; dėžutės šešėlis: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktyvus border-top-color: # c4c4c4; krašto apačios spalva: # c4c4c4; fono paveikslėlis: -webkit-gradientas (tiesinis, kairysis apačioje, kairysis viršuje, spalvų sustojimas (0.45, rgb (224,224,224)), spalvų stabdymas (0,73, rgb (235,235,235))); fono vaizdas: -moz-linijinis gradientas (centrinis dugnas, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Internet Explorer 5.5 - 7 * / filtrui: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8 * / -ms filtrui: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; dėžutės šešėlis: -1px 1px 1px 0px #dadada intarpas; -webkit-box-shadow: -1px 1px 1px 0px #dadada intarpas; -moz-box-shadow: -1px 1px 0px #dadada intarpas; spalva: # 333;
Aš naudoju tą patį gradiento kodą, kaip ir anksčiau, bet šį kartą spalvos yra labai skirtingos, jei pastebėjote mūsų RGB reikšmes. Kiekviena būsena tamsės teksto spalvą # 333, tačiau kiti aprašai buvo šiek tiek pakeisti, kad atitiktų vartotojo komandas.
Užvažiuodami pamatysite a blizgus reljefinis efektas sujungta su tamsesnės sienos suteikia puslapio iššokimo stilius. Jei spustelėsite ir laikysite, įsijungsite į aktyvią būseną, kurioje yra a tamsintas fono gradientas. Šis efektas sukelia mygtukus, kad jie atrodytų “paspaudžiamas” puslapyje.
Mes taip pat kreipiamės langelis-šešėlis naujų CSS3 specifikacijų savybės. -žiniatinklio rinkinys, -moz, ir numatytieji stiliai naudojami su tais pačiais nustatymais. Lankstymo rodmenys a šviesus šešėlis išeina iš pasirinktos nuorodos apačios. Kai aktyvus, šešėlis bus suformuotas viršutinėje, dešinėje ir apačioje. Šis efektas sukuriamas su įdėklas raktinis žodis pridedamas prie kiekvieno langelio-šešėlio turto eilutės pabaigos. Vėlgi „CSS Tricks“ yra geriausias jūsų draugas, turintis nuostabų straipsnį apie „box-shadow“, nes jis kalba apie sintaksę ir jos tinkamą naudojimą CSS3.
Premija: daugiau stilių
Be pamokos kodo, aš įtraukiau papildomus fono paveikslėlius su pritaikytomis spalvų schemomis. Mėginius paėmiau iš originalių fonų ir naudoju Adobe Photoshop, kad sukurtumėte keletą variantų, kuriuos galite taikyti savo svetainėje.
Šie premijos failai yra įtraukti į šaltinio failą kurį galite atsisiųsti .zip archyvo formatu toliau esančiame skyriuje.
Galite peržiūrėti aukščiau esantį vaizdą, kad galėtumėte sužinoti, apie ką kalbu. Jei jums reikia specialios spalvų schemos, atidarykite Photoshop> Vaizdas> Koregavimai> Hue / Saturation pakeisti spalvų schemą, kad ji atitiktų jūsų šabloną, nepamirškite patikrinkite parinktį Colorize „Hue / Saturation“ (atspalvio / prisotinimo) srityje, jei spalva visai nepasikeitė.
Išvada
Ši pamoka turėtų būti susipažinusi su kai kuriais naujesniais CSS3 metodais. Mes sukūrėme du fantastiškus riešutų meniu, sukurtus panašiu būdu, ir pastatėme taip, kad senesniuose naršyklėse jis gali blogėti. Be to, aš pasiūliau savo demo kodą ir kai kuriuos papildomus vaizdus, kad galėtumėte žaisti.
Ar jums ypač patinka čia sukurti stiliai? O gal turite klausimų ar idėjų, kaip patobulinti pamokų kodą? Pasidalinkite savo mintimis su mumis toliau pateikiamoje diskusijų srityje ir nepamirškite atsisiųsti šaltinio failų, kad galėtumėte žaisti su demo!
Daugiau CSS3 pamokų
Ar norite daugiau CSS3? Toliau pateikiami mūsų straipsniai, kuriais galite suprasti CSS3 teoriškai ir praktiškai!
- CSS3: sukurti RSS srauto logotipą
- CSS3: sukurkite paieškos lauką
- CSS3: sukurkite AJAX kontaktinę formą
- CSS3: HTML5 / CSS3 tinklalapių kūrimas
