Grillitud Breadcrumb Navigation Menu kodeerimine CSS3-s
Navigeerimismenüüd ja lingid on tõenäoliselt veebi paigutuse kõige olulisemad liidese elemendid. Need on ainukesed turustusvõimalused kasutajatele reisimine lehtede vahel ja suhelda kogu loodud sisuga. Breadcrumb pakub sarnast funktsionaalsust, millele lisandub kasu teie praeguse asukoha jälgimine. Sul on võimalik kuvada kõik eelmised lingiteed kasutaja läbib teie saidi hierarhia.
Selles juhendis loome suurepärase navigatsioonimenüü, mis sisaldab mõningaid CSS3 efekte. Seda on testitud, et see toimiks kõigis suuremates CSS3-ühilduvates brauserites, isegi vanemad brauserid, mis ei toeta CSS3-d, muudavad selle enamikul juhtudel õigesti.
Enne kui me sukeldame koodi, räägime natuke meie leivakülvi funktsionaalsusest, täielikust õpetusest hüpates!
Trailide pakkumine
Leivakuulamisraja ei ole keerulisem kui ükski teine menüü. Meie stiilid kasutavad palju keerukamaid CSS-omadusi kui enamik näiteid, kuid meie paljaste luude mall on veel paigas, et suunata kasutajaid ühelt leheküljelt teisele.
Selles näites loome samasuguse stiili kui Google'i tugimenüü. Te saate vaadata nende menüüd Gmaili tugileheküljel, et saada ülevaade sellest, kuhu me liigume. Lõpuks tahame pakkuda meie kasutajatele parimat kasutajateavet, olenemata nende operatsioonisüsteemist või brauseri tarkvarast, olen seega ehitanud 2 erinevat koodi näidet, mis toetavad vanemate brauserite graatsilist halvenemist.
Esimene on ehitatud kasutades kohandatud taustpildid ja nõuetekohased CSS-joondused. Kõik hover-sündmused ja aktiivsed sündmused on eelnevalt ehitatud vaid mõne CSS-stiiliga, kuid välja lülitatud pilte ei saa need efektid kogeda! Sellepärast olen ehitanud ka sarnase välimuse menüü, millel on CSS-kalded, ümarad nurgad ja kasti varjud.
Kui olete närviline mõlema stiili toetamisel, saate valida oma saidi vahel. Enamik külastajaid kasutab vaikimisi pilte, kuid kaevab veebisaidi analüüsi tööriista, kui soovite täpsemaid külastajaandmeid.
Piisavad sõnad, hüpata projekti! Alustame HTML-i põhiraamistiku loomisest ja liigume erinevatesse stiiliefektidesse. Esiteks peate pildi alla laadima projekti jaoks vajalik.
Bare-Bones HTML
Ma alustan oma dokumendiga standardne HTML5 lehe mall. See hõlmab vaikimisi doctype'i, seotud CSS-i ja kõiki põhielemente. Kui soovid sel moel oma dokumenti alustada, lisasin allpool oleva koodi. Pange tähele, et see ei tohiks mõjutada teie leivakuulamise kuvamist, seega võite soovi korral kasutada oma lehe malli.
Vaikimisi lehekülg
Jaotan koodi kaheks erinevaks plokiks. Piltide esimene plokk on ehitatud veidi erinevalt, millele järgneb meie menüü ilma piltideta. Iga komplekt on omistatud ID et saaksime sisu palju lihtsamalt tuvastada. Kui olete ka jQuery fänn, saate seda kasutada #ID valija manipuleerida kõigi sisemiste DOM elementidega.
Kõigepealt on meil a sisaldab div id-ga “käru“. Demokataloogis olen kasutanud seda oma koodi eraldamiseks ja selle lisamiseks lehele mõne lisanduva marginaaliga. Sa võid selle välise divi eemaldada, kuid peate kõik uue kujunduse järgi sobitama. See ei ole tegelikult haiget jätta konteinerist, sest saate hõlpsamini positsioneerimist juhtida.
Sisemiselt olen ehitanud röstijad korrastamata nimekirja abil. Stiilseid HTML-nimekirju saab kohandada nii paljude ainulaadsete viisidega ja riivsai on vaid üks neist. Te võite märkida, et olen andnud esialgse nimekirjaelemendi a klassi of “esiteks“. See on vajalik mõnede täiendavate polstrite jaoks, et menüüelemente hoida. Lisaks väike span-plokk on lisatud nii, et meil on õige vasak äär, mis ei kattuks taustapildiga.
Peale selle istutatakse iga ankurlüli väheneva arvuga z-indeks vara. Kasutades pilte, mida peame kas kõik meie lingid kattuvad näidata noolenupu noolt õigesti. Lihtsaim viis selle saavutamiseks on z-indeksi reguleerimine nii et iga link katab järgmise. Ma alustasin 9 ja töötasid sealt alla, aga kui teil on menüüs rohkem linke, alustage lihtsalt kõrgema täisarvuga.
Menüü ilma piltideta
Et graatsiliselt halvendab meie leivapuru vajame HTML-loendite teisest kogumist. Kui üritate ühe navigeerimise korral tagasi pöörduda, saate kasutada jQueryt brauseri agendi avastamiseks ja ID rakendamiseks. Kahjuks ei ole see alati usaldusväärne (näiteks teatud mobiilikasutajatele). Teine lahendus on sisaldab IE-spetsiifilist laaditabelit ja peida või näidata, milline menüü toimib kõige paremini - kuid muidugi on see valik ainult Internet Exploreris.
breadcrumb2 on meie uus ID, mida kasutatakse menüü sihtimiseks ilma piltideta. Hoia seda mustrit, mida olen kasutanud helbed2 järjekorras olevate loendite klass. Pange tähele, et põhjus, miks me seda kasutame klassid on selle jaoks nende menüüde kordamine on lihtne, nii et kui sa tahad oma lehel mõnda erinevat leivapuru, siis need klassid ei muutu kunagi probleemiks.
Oleme hoidnud .esiteks klassi, kuid lisatud .viimaneklassi lõplikule loendisse. Ilma piltideta ei saa me navigeerimismenüü iga elemendi nooli dubleerida, nii et ma olen seda kasutanud ümardatud nurkadega sekundaarse menüü avamiseks. .esiteks klass ja .viimane manipuleerige piiriruudu meie menüü kõige servades, et luua tõeliselt lahe veebi 2.0-st stiil.
CSS Sliding Background Images
Mõningate lihtsamate efektide puhul ühendasin ma kinnisvarahoonete ehitamisel mõlemad korgid. See on kasulik, kuna see mitte ainult ei säästa ruumi, vaid ka stiilide redigeerimisel lihtsam kohandada oma välimust.
Mõlemale #breadcrumb ja # breadcrumb2 Olen seadnud list-style: mitte; nii et kõigil sisemistel üksustel ei ole markereid. Te võite neid jätta, kui sulle meeldib, aga leidsin, et HTML muutub ümberlöögiks väsitavaks ja see on palju lihtsam luua uusi ikoone. Alustame siis meie .helbed klassi.
.helbed kuva: plokk; .crumbs li kuva: inline; .crumbs li.first padding-left: 8x; .crumbs li a, .crumbs li a: link, .crumbs li a: külastatud color: # 666; kuva: plokk; float: vasakule; fondi suurus: 12px; margin-left: -13px; polsterdus: 7px 17px 11px 25px; positsioon: suhteline; teksti kaunistus: mitte; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); taustaproov: korduv; taustapositsioon: 100% 0; positsioon: suhteline; .crumbs li a: hover color: # 333; taustapositsioon: 100% -48px; kursor: pointer; .crumbs li a: aktiivne color: # 333; taustapositsioon: 100% -96px; .crumbs li.first a span height: 29px; laius: 3px; vasakpoolne: 1px tahke # d9d9d9; positsioon: absoluutne; top: 0px; vasakule: 0px; Me määrake meie järjestamata loend blokeeri nii ei muutu ümbruse ümber midagi muud. Pange tähele, et loendi üksused on kuvatakse inline igal ankurlülil on palju rohkem ruumi levitamiseks. Me tahame, et kõik meie menüü ruumid oleksid klõpsatavad, nii et see nõuab meie ankrute ehitamine plokkelemendina.
Ma olen kasutanud nimega pilti bg-crumbs.png taustal. Seda tuntakse lihtsa sprite lehena CSS-is või alternatiivselt a liuguksed tehnikat. See tähendab, kui kasutaja lingib või klõpsab lingil, nihutame taustasendi värskendatud stiili kuvamiseks. See üks pilt sisaldab kõiki 3 disainilahendust, mida me peame erinevatel positsioonidel leivakujunduse taustaks looma, et saaksime seda kasutada taustasend vara ümberpaigutamiseks kasutaja interaktsiooni alusel.
Kohandatud efektid CSS3-ga
Algne leivakarpide disain on palju lihtsam luua. See on märgatav, sest paljud CSS-i omadused on põhilisemad kui te kujutate ette, kuid nüüd hakkame keskenduma nende efektide kordamisele ainult CSS3-ga!
Individuaalsed stiilid võtavad palju ruumi, nii et ma jagun need kaheks koodiplokiks.
.crumbs2 kuva: plokk; margin-left: 27px; polster: 0; polster-top: 10px; .crumbs2 li kuva: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: külastatud color: # 666; kuva: plokk; float: vasakule; fondi suurus: 12px; polsterdus: 7px 16px 7px 19px; positsioon: suhteline; teksti kaunistus: mitte; piir: 1px tahke # d9d9d9; parempoolne laius: 0px; .crumbs2 li a taustapilt: -webkit-gradient (lineaarne, vasakpoolne, vasakul, värvipeatus (0.45, rgb (241,241,241)), värvipeatus (0,73, rgb (245,245,245))); taustapilt: -moz-lineaarne gradient (keskosas, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * 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 a border-right-width: 1px; piir-alt-parem raadius: 5 px; -moz-border-radius-bottomright: 5px; -webkit-piiri-alt-parem raadius: 5px;
The .helbed2 menüü kasutab CSS-kalded taustefektide dubleerimiseks. Kui te ei tunne neid, soovitan CSS trikke CSS3 gradientidel, mis peaksid saama CSS3 gradientide tõhusa kasutamise. Nad on lisanud veel mõned Microsofti ja Opera brauserite omadused, kuid neid ei toetata täielikult. Ma ei ole neid demokoodi siia lisanud - aga on hea mõista kõiki võimalusi.
-webkit-gradient ja -moz-lineaarne gradient on peamised lahendused, mis teevad suurema osa tööst. Olen lisanud vanemad versioonid Internet Exploreri vanematele versioonidele, kuid see pole garanteeritud kogu aeg õigesti kuvada (kasutame lõppkokkuvõttes võimsaid kujutiste renderdamise tehnikaid). Pange tähele, et olen määranud nii RGB kui ka heksade värvikoodid taustaparameetrite vahel. Kui sa oled mugavam, võiksite jääda ühele meetodile või teisele.
The raadius koodi rakendatakse ainult meie teisese leibkonna navigeerimisele. See annab meie kogu leivakujulise menüü paremal ja paremal üleval parema efekti. Tundub, et riba on lehelt peaaegu välja lülitatud - see on tõeliselt fantastiline mõju brauseritele, mis toetavad stiile, kuid need katavad ainult meie linkide vaikesätteid. Nüüd ehitame hoverefektid, mis on sarnased ülaltoodud piltidele.
CSS3 piirid ja varjud
Kui kasutaja liigub lingi üle, tahame värskendada mõningaid asju. Kõigepealt peame tumedaks meie aktiivse elemendi ülemise ja alumise serva värve. Seda võib näha ka piltidel nii hover- kui ka aktiivsetes riikides.
.crumbs2 li a: hover border-top-color: # c4c4c4; piir-alumine värv: # c4c4c4; taustapilt: -webkit-gradient (lineaarne, vasakpoolne, vasakul, värvipeatus (0,45, rgb (241,241,241)), värvipeatus (0,73, rgb (248,248,248))); taustapilt: -moz-lineaarne gradient (keskosas, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; värv: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktiivne border-top-color: # c4c4c4; piir-alumine värv: # c4c4c4; taustapilt: -webkit-gradient (lineaarne, vasakpoolne, vasakul, värvipeatus (0,45, rgb (224,224,224)), värvipeatus (0,73, rgb (235,235,235))); taustapilt: -moz-lineaarne gradiend (keskpõhi, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * 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 0px #dadada sisestatud; -moz-box-shadow: -1px 1px 0px #dadada inset; värv: # 333;
Ma kasutan täpselt sama gradientkoodi, mida kasutasime eespool, kuid seekord on värvid palju erinevad, kui märkate meie RGB väärtusi. Iga olek tumeneb teksti värvi # 333, veel muud kirjeldused on veidi muudetud, et need vastaksid kasutaja käskudele.
Hoveril näete a läikiv reljeefne efekt mis koos tumedamad piirid annab lehekülje hüpata stiilid. Kui klõpsate ja hoiate kinni, jõuad aktiivse olekusse, millel on a tumenenud tausta gradient. See efekt põhjustab nuppude otsimise “vajutada” lehel.
Me taotleme ka kast-vari uute CSS3 spetsifikatsioonide omadused. -webkit, -moz, ja vaikimisi stiili kasutatakse samade seadistustega. Hovering kuvab a valguse vari väljub valitud lingi alt. Kui aktiivne, moodustub vari ülemisele, paremale ja alumisele piirile. See efekt luuakse sisetükk märksõna lisatakse iga kasti-vari rea lõppu. Jällegi CSS Tricks on sinu parim sõber, kellel on fantastiline artikkel kasti varjus, kuna see räägib süntaksist ja selle nõuetekohasest kasutamisest CSS3-s.
Boonus: rohkem stiile
Lisaks juhendi koodile olen lisanud täiendavad taustpildid kohandatud värvilahendustega. Olen proovinud algsetest taustadest ja kasutasin Adobe Photoshopi, et luua mõned variatsioonid, mida võite oma veebisaidile rakendada.
Need boonusfailid lisatakse lähtefaili mida saate alla laadida .zip arhiivivormingus allpool olevas osas.
Võite vaadata ülalolevat pilti, et saada ettekujutus sellest, mida ma räägin. Kui vajate konkreetset värvilahendust, avage see Photoshop> Pilt> Kohandused> Hue / Saturation värvide skeemi muutmiseks, et see sobiks teie enda malliga, pidage meeles kontrollige suvandit Värvimine tooni / küllastuse paneelil, kui värv ei muutunud üldse.
Järeldus
See juhendaja oleks pidanud sa tundma mõningaid uuemaid CSS3 tehnikaid. Oleme loonud kaks fantastilist leivakasti menüüd, mis on kujundatud sarnasel viisil ja ehitanud selle nii, et see võib vanemates brauserites halastamatult halveneda. Lisaks olen pakkunud oma demokoodi ja mõned boonuskujutised, mida saate mängida.
Kas sulle meeldib just siin üles ehitatud stiilid? Või võib-olla teil on küsimusi või ideid juhendi koodi parandamiseks? Palun jaga oma mõtteid meiega allpool olevas arutelualas ja ärge unustage allalaadida lähtefaile, et saaksite demoga mängida!
Rohkem CSS3 juhendeid
Kas soovite rohkem CSS3? Allpool on meie artiklid, mis võimaldavad Teil mõista CSS3 teoreetiliselt ja praktiliselt!
- CSS3: RSS-voo logo loomine
- CSS3: otsinguvälja loomine
- CSS3: AJAXi kontaktvormi loomine
- CSS3: HTML5 / CSS3 veebilehtede loomine
