Kódovanie ladnej navigačnej ponuky Breadcrumb v CSS3
Navigačné ponuky a odkazy sú pravdepodobne najdôležitejšími prvkami rozhrania webového rozloženia. Toto sú jediné odbytiská pre používateľov cestovať medzi stranami a spolupracovať so všetkým obsahom, ktorý ste vytvorili. Breadcrumb ponúka podobnú funkčnosť s pridanou výhodou sledovanie vašej aktuálnej pozície. Budete to môcť zobraziť všetky predchádzajúce cesty odkazov ako používateľ prechádza vašou hierarchiou stránok.
V tomto návode vytvoríme brilantné navigačné menu s niektorými funkciami CSS3. Bolo testované, aby fungovalo vo všetkých hlavných prehliadačoch kompatibilných s CSS3, aj staršie prehliadače, ktoré nepodporujú CSS3, ho stále budú vo väčšine prípadov správne zobrazovať.
Skôr ako sa ponoríme do kódu, trochu sa porozprávame o funkciách nášho breadcrumbu, plného návodu na skok!
Ponúka trasu
Trasa s jedlom nie je o nič zložitejšia ako iné menu. Naše štýly budú využívať oveľa zložitejšie vlastnosti CSS ako väčšina príkladov, ale naša šablóna s holými kosťami je stále na mieste, ktorá usmerňuje používateľov z jednej strany na druhú.
V tomto príklade vytvoríme podobný štýl ako menu podpory spoločnosti Google. Jeho ponuku môžete zobraziť na stránke podpory služby Gmail a získať predstavu o tom, kam smerujeme. Nakoniec chceme poskytnúť našim najlepším používateľským zážitkom pre všetkých používateľov, bez ohľadu na ich operačný systém alebo softvér prehliadača, a tak som ich postavil 2 rôzne príklady kódov na podporu zdvorilého zhoršenia starších prehliadačov.
Prvý je postavený pomocou vlastné obrázky na pozadí a správne nastavenia CSS. Všetky udalosti a aktívne podujatia sú predvolené len s niekoľkými štýlmi CSS, ale používatelia, ktorí majú vypnuté obrázky, nebudú mať tieto účinky! Preto som vytvoril podobne vyzerajúce menu s gradientmi CSS, zaoblenými rohmi a stínami boxov.
Ak máte nespokojnosť s podporou oboch štýlov, môžete si vybrať medzi nimi pre svoje vlastné stránky. Väčšina návštevníkov bude v predvolenom nastavení používať obrázky, ale skrýva nástroj na analýzu webových stránok, ak chcete presnejšie údaje o návštevníkoch.
Dosť slov, poďme do projektu! Začneme tým, že budeme vytvárať základný HTML rámec a posúvať sa do rôznych efektov štýlu. Po prvé musíte obrázok prevziať potrebné pre projekt.
Bare-Bones HTML
Začínam môj dokument s štandardná šablóna stránky HTML5. Zahŕňa to predvolené doctype, prepojené CSS a všetky základné prvky. Pridal som kód nižšie, ak chcete spustiť svoj vlastný dokument týmto spôsobom. Nezabúdajte, že by to nemalo mať vplyv na to, ako sa zobrazuje vaša strmka, a či chcete používať vlastnú šablónu stránky.
Predvolená stránka
Rozdelím kód na dva rôzne bloky. Prvý blok s obrázkami je postavený trochu inak, nasleduje naše menu bez obrázkov. Každá sada je daná vlastnou ID takže môžeme identifikovať obsah oveľa jednoduchšie. Ak ste tiež fanúšikom jQuery, môžete použiť #ID selektor manipulovať so všetkými vnútornými prvkami DOM.
Najprv máme obsahujúce div s ID “strúhanka“. V demo súbore som to použil na oddelenie nášho kódu a jeho presun cez stránku s určitými pridanými okrajmi. Mohli by ste odstrániť toto vonkajšie div, ale budete musieť re-štýl všetko, aby sa zmestili nové šablóny. Je to naozaj nebol zanechať kontajner, pretože budete môcť riadiť umiestnenie oveľa jednoduchšie.
Vnútorne som postavil strúhanky pomocou neusporiadaného zoznamu. Existuje toľko unikátnych spôsobov, ako prispôsobiť šablóny so šablónami, a stĺpce stôp sú len jedným z nich. Môžete si všimnúť, že som uviedol počiatočnú položku zoznamu a trieda z “najprv“. Toto je potrebné pre niektoré ďalšie polstrovanie, aby sa položky v ponuke udržiavali v riadku. Navyše malý blok rozpätia je pridaná, takže máme správnu ľavú hranicu, ktorá neprekrýva obrázok pozadia.
Okrem toho je každé ukotvenie spojené s klesajúcim číslom pre z-index vlastnosť. Použitím obrázkov budeme musieť každý z našich odkazov sa prekrýva na správne zobrazenie šípky. Najjednoduchší spôsob, ako to dosiahnuť, je nastavenie z-indexu takže každý odkaz prekrýva ďalší. Začal som s 9 a odpracovali odtiaľ, ale ak máte viac odkazov vo vašom menu, začať s vyšším celočíselným číslom.
Menu Bez obrázkov
na elegantne zhoršujú našu škrupinu potrebujeme sekundárnu sadu položiek zoznamu HTML. Ak sa pokúšate o záchranu na jednej navigácii, môžete použiť nástroj jQuery na detekciu agenta prehliadača a podľa toho použiť ID. Bohužiaľ to nie je vždy spoľahlivé (napríklad pre určitých používateľov mobilných zariadení). Ďalším riešením je zahrnúť šablónu so štýlmi IE a skryť alebo zobraziť, ktoré menu funguje najlepšie - ale samozrejme, táto možnosť je len pre Internet Explorer.
breadcrumb2 je naše nové ID použité na zacielenie menu bez obrázkov. Udržiavanie tohto vzoru som použil crumbs2 ako trieda pre nezoradený zoznam. Pamätajte na dôvod, ktorý používame vyučovanie je pre jeho jednoduchosť duplikovať tieto ponuky, takže keď chcete na vašej stránke niekoľko rôznych strúhankov, s týmito triedami sa to nikdy nestane problémom.
Zachovali sme .najprv ale dodatočne pripojené .poslednátriedy na poslednú položku zoznamu. Bez obrázkov nemôžeme duplikovať šípky pre každú položku navigačného menu, preto som použil niektoré zaoblené rohy na korekciu sekundárnej ponuky. .najprv triedy a .posledná manipulujte okraj okrajov na okraji nášho menu a vytvorte skutočne cool vzhľad web 2.0.
Obrázky posuvného pozadia CSS
Pre niektoré z jednoduchších účinkov som spojil obidve škorice spolu pri budovaní nehnuteľností. To je užitočné, pretože nielen šetrí priestor, ale keď sa vrátime k úpravám štýlov, je to ľahšie prispôsobiť svoj vlastný vzhľad.
Pre oba #breadcrumb a # breadcrumb2 Som nastavil štýl zoznamu: žiadne; takže všetky vnútorné položky nebudú mať značky. Mohli by ste ich opustiť, ak sa vám tento efekt páči, ale zistil som, že HTML sa stáva únavným pre prácu a je oveľa jednoduchšie vytvárať nové ikony. Takže začneme s naším .omrvinky trieda.
.drobky zobrazenie: blok; .crumbs li zobrazenie: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: navštívené color: # 666; zobrazenie: blok; plavák: vľavo; veľkosť písma: 12px; margin-left: -13px; polstrovanie: 7px 17px 11px 25px; pozícia: relatívna; textová výzdoba: žiadne; .crumbs li a pozadie-obrázok: url ('... /img/bg-crumbs.png'); opakovanie pozadia: opakovanie; poloha pozadia: 100% 0; pozícia: relatívna; .crumbs li a: hover farba: # 333; Pozadie pozadia: 100% -48px; kurzor: ukazovateľ; .crumbs li a: aktívna farba: # 333; Pozadie pozadia: 100% -96px; .crumbs li.first rozpätie height: 29px; šírka: 3px; border-left: 1px solid # d9d9d9; poloha: absolútna; top: 0px; vľavo: 0px; my nastavte náš neusporiadaný zoznam blok takže sa v okolí nehrozí nič iné. Všimnite si položky zoznamu zobrazené v riadku zatiaľ čo každá kotvová väzba má väčší priestor na rozmiestnenie. Chceme, aby celý priestor v našom menu bol klikateľný, takže to vyžaduje budovanie našich kotviacich prvkov ako blokových prvkov.
Použil som obrázok nazvaný bg-crumbs.png pre pozadie. Toto je známe ako jednoduchý sprite list v CSS, alebo alternatívne a posuvné dvere technikou. To znamená, že keď používateľ posunie alebo klikne na odkaz, posunieme pozíciu pozadia na zobrazenie aktualizovaného štýlu. Tento jediný obrázok obsahuje všetky 3 vzory, ktoré potrebujeme na vytvorenie pozadia strúhanky na rôznych pozíciách, takže môžeme použiť background-polohový vlastnosť premiestniť na základe interakcie používateľa.
Vlastné efekty s CSS3
Pôvodný dizajn pesničky je oveľa jednoduchšie vytvoriť. Je to pozoruhodné, pretože veľa vlastností CSS je základnejších, než si viete predstaviť, ale teraz sa začíname zamerať na duplikovanie týchto efektov iba pomocou CSS3!
Jednotlivé štýly zaberajú veľa priestoru, takže ich rozdelím na 2 bloky kódov.
.drobky2 zobrazenie: blok; margin-left: 27px; polstrovanie: 0; polstrovanie top: 10px; .crumbs2 li zobrazenie: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: navštívené farba: # 666; zobrazenie: blok; plavák: vľavo; veľkosť písma: 12px; polstrovanie: 7px 16px 7px 19px; pozícia: relatívna; textová výzdoba: žiadne; hranica: 1px pevná # d9d9d9; okraj-pravá šírka: 0px; .crumbs2 li a pozadie-obrázok: -webkit-gradient (lineárny, ľavý dolný, ľavý vrchol, farebný stop (0,45, rgb (241,241,241)), farebný stop (0,73, rgb (245,245,245)); obrázok pozadia: -moz-lineárny gradient (stredné dno, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Pre program Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Pre program 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 okraj-pravá šírka: 1px; okraj spodnej-pravý-okraj: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.crumbs2 menu používa CSS gradientov duplicitné efekty pozadia. Ak nie ste s nimi oboznámení, odporúčam Vám CSS Triky na CSS3 Gradients, ktoré by vás mali efektívne využívať s použitím gradientov CSS3. Zahrali ešte niekoľko vlastností pre prehliadače Microsoft a Opera, ale vo všetkých prípadoch nie sú plne podporované. Nenašiel som ich do demo kódu - ale je dobré porozumieť všetkým možnostiam.
--webkit gradientu a -moz-lineárny gradient sú hlavné riešenia, ktoré vykonávajú väčšinu práce. Priradil som starší kód pre staršie verzie programu Internet Explorer, ale to nie je zaručené aby sme sa správne zobrazovali celkom (používame síce výkonné techniky renderovania obrázkov). Všimnite si, že som nastavil RGB aj hexadecimálne farebné kódy medzi vlastnosťami pozadia. Môžete sa držať jednej alebo druhej metódy, ak ste pohodlnejší.
polomer okrajov kód sa aplikuje iba na našu navigáciu druhej navigačnej siete. Toto poskytuje úhľadný efekt v ľavom hornom a pravom hornom rohu celej ponuky nášho menu. Zdá sa, že panel takmer vyčnieva zo stránky - skutočne fantastický vplyv na prehliadače, ktoré podporujú štýly, ale pokrývajú iba predvolené stavy pre naše odkazy. Teraz budeme vytvárať efekty vznášania sa podobne ako obrázky, ktoré sme použili vyššie.
Hranice a tiene CSS3
Vždy, keď používateľ prechádza cez odkaz, chceme aktualizovať niekoľko vecí. Najprv musíme tmavšie okraje farieb na hornej a dolnej časti nášho aktívneho prvku. To možno vidieť aj na obrázkoch, a to tak pre vznášajúce sa ako aj pre aktívne stavy.
.drobky 2 li a: vznášať sa border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; pozadia-obrázok: -webkit-gradient (lineárny, ľavý dolný, ľavý vrchol, farebný stop (0,45, rgb (241,241,241)), farebný stop (0,73, rgb (248,248,248)); pozadia-obrázok: -moz-lineárny gradient (stredové dno, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Pre program Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Pre program Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; farba: # 333; -moz-box-tieň: 0px 2px 2px # e8e8e8; -webkit-box-tieň: 0px 2px 2px # e8e8e8; box-tieň: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktívna border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; pozadie-obrázok: -webkit-gradient (lineárny, ľavý dolný, ľavý vrchol, farebný stop (0,45, rgb (224,224,224)), farebný stop (0,73, rgb (235,235,235)); pozadie-obrázok: -moz-lineárny gradient (stredné dno, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Pre program Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Pre program Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-tieň: -1px 1px 1px 0px #dadada inset; -webkit-box-tieň: -1px 1px 1px 0px #dadada inset; -moz-box-tieň: -1px 1px 1px 0px #dadada inset; farba: # 333;
Používam presne ten istý gradientový kód, ako sme použili vyššie, ale tentoraz sa farby značne líšia, ak si všimnete naše hodnoty RGB. Každý štát stmavne farbu textu # 333, ale ostatné deskriptory boli mierne zmenené, aby zodpovedali užívateľským príkazom.
Na ukazovateli myši uvidíte znak a lesklý reliéfny efekt ktoré spolu s tmavé hranice poskytuje rozbalovacie štýly stránky. Ak kliknete a podržíte, dostanete sa do aktívneho stavu, ktorý obsahuje a tmavý gradient pozadia. Tento efekt spôsobí, že tlačidlá vyzerajú, že sú skutočne “lisované” na stránke.
Tiež žiadame box-shadow vlastnosti z nových špecifikácií CSS3. -WebKit, -MOZ, a štandardné štýly sa používajú s rovnakými nastaveniami. Umiestnenie ukazovateľa myši zobrazuje a svetlý tieň vychádza zo spodu vybraného odkazu. Ak je aktívny, tieň sa vytvorí na horných, pravých a spodných okrajoch. Tento efekt je vytvorený pomocou funkcie vložiť kľúčové slovo pridané do konca každého riadku vlastností boxu. Opäť CSS Tricks je váš najlepší kamarát tu s úžasným článkom na box-tieň, pretože hovorí o syntaxe a jej správnom použití v CSS3.
Bonus: Viac štýlov
Okrem tutorial kódu som zaradil ďalšie obrázky na pozadí s prispôsobenými farebnými schémami. Odobral som vzorky z pôvodného pozadia a používal som Adobe Photoshop na vytvorenie niekoľkých variantov, ktoré môžete použiť na vaše vlastné webové stránky.
Títo bonusové súbory sú zahrnuté do zdrojového súboru ktoré si môžete stiahnuť v archívnom formáte .zip v sekcii nižšie.
Môžete sa pozrieť na obrázok vyššie, aby ste získali predstavu o tom, čo hovorím. Ak potrebujete špecifickú farebnú schému, otvorte ju Photoshop> Obrázok> Nastavenia> Odtieň / Sýtosť upraviť farbu schéma, aby zodpovedala vašej vlastnej šablóny, nezabudnite skontrolujte možnosť Farba v tabuľke Hue / Saturation, ak sa farba vôbec nezmenila.
záver
Tento návod by vás mal oboznámiť s niektorými novšími technikami CSS3. Vytvorili sme dve fantastické menu s pečaťou podobným spôsobom a postavili sme ho tak, aby sa v starších prehliadačoch mohol lahko rozkladať. Okrem toho som ponúkol môj demo kód a niekoľko bonusových obrázkov, s ktorými si môžete zahrať.
Máte obzvlášť rád štýly, ktoré sme tu postavili? Alebo možno máte otázky alebo predstavy o tom, ako zlepšiť tutorial kód? Zdieľajte prosím svoje myšlienky s nami v diskusnej oblasti nižšie a nezabudnite si stiahnuť zdrojové súbory, aby ste mohli hrať s demo!
Ďalšie CSS3 Tutoriály
Craving pre viac CSS3? Nižšie sú uvedené naše články, ktoré vám teoreticky a prakticky chápu CSS3!
- CSS3: Vytvoriť RSS Feed Logo
- CSS3: Vytvorte pole vyhľadávania
- CSS3: Vytvorte kontaktný formulár AJAX
- CSS3: Budovanie webových stránok HTML5 / CSS3
