Graciozs Breadcrumb navigācijas izvēlnes kodēšana CSS3
Navigācijas izvēlnes un saites, iespējams, ir svarīgākie interfeisa elementi tīmekļa izkārtojumam. Tie ir vienīgie noieta punkti lietotājiem ceļot starp lapām un mijiedarbojas ar visu izveidoto saturu. Breadcrumb piedāvā līdzīgu funkcionalitāti ar papildu labumu Jūsu pašreizējās pozīcijas izsekošana. Jūs varēsiet parādīt visus iepriekšējos saites ceļus jo lietotājs šķērso jūsu vietnes hierarhiju.
Šajā apmācībā mēs radīsim spīdīgu navigācijas izvēlni ar dažiem CSS3 efektiem. Tas ir pārbaudīts, lai darbotos visās galvenajās CSS3 atbilstošajās pārlūkprogrammās, pat vecākās pārlūkprogrammas, kas neatbalsta CSS3, vairumā gadījumu to darīs pareizi.
Pirms mēs ienirtam kodā, mēs nedaudz runāsim par mūsu rīvmaizes funkcionalitāti, pilnu apmācību lēcienā!
Piedāvājot taka
Maizes trase nav sarežģītāka nekā jebkura cita izvēlne. Mūsu stili izmantos daudz sarežģītākus CSS rekvizītus nekā vairums piemēru, tomēr mūsu kaulu kaulu veidne joprojām ir piemērota, lai palīdzētu lietotājiem no vienas lapas uz citu.
Šajā piemērā mēs izveidosim līdzīgu stilu kā Google atbalsta izvēlne. Jūs varat apskatīt viņu izvēlni Gmail atbalsta lapā, lai iegūtu priekšstatu par to, kur mēs ejam. Galu galā mēs vēlamies nodrošināt mūsu labāko lietotāju pieredzi visiem lietotājiem, neatkarīgi no to operētājsistēmas vai pārlūka programmatūras, tāpēc es esmu izveidojis 2 dažādi koda piemēri, lai atbalstītu graciozu degradāciju vecāku pārlūkprogrammu vidū.
Pirmais ir izveidots, izmantojot pielāgoti fona attēli un pareiza CSS izlīdzināšana. Visi lidojošie notikumi un aktīvie notikumi ir iepriekš uzbūvēti tikai ar dažiem CSS stiliem, bet lietotāji, kuriem ir attēli izslēgti, nevarēs izjust šīs sekas! Tāpēc esmu izveidojis līdzīgu izskatu izvēlni ar CSS gradientiem, noapaļotiem stūriem un kastes ēnām.
Ja jūs uztraucaties par abu stilu atbalstīšanu, jūs varat izvēlēties tos savā vietnē. Lielākā daļa apmeklētāju izmantos attēlus pēc noklusējuma, bet, ja vēlaties iegūt precīzākus apmeklētāju datus, izrakt caur jūsu vietnes analīzes rīku.
Pietiekami daudz vārdu, lēksimies projektā! Mēs sāksim veidot pamata HTML sistēmu un pāriet uz dažādiem stila efektiem. Pirmkārt jums ir nepieciešams lejupielādēt attēlu nepieciešami projektam.
Bare-Bones HTML
Es sāku dokumentu ar standarta HTML5 lapas veidne. Tas ietver noklusēto doctype, saistīto CSS un visus pamatelementus. Ja vēlaties uzsākt savu dokumentu, es esmu pievienojis tālāk norādīto kodu. Ņemiet vērā, ka tai nevajadzētu ietekmēt to, kā tiek rādīts jūsu rīvdēlis, tādēļ, ja vēlaties, izmantojiet savu lapu veidni.
Noklusētā lapa
Es sadalīšu kodu divos dažādos blokos. Pirmais bloks ar attēliem tiek veidots nedaudz atšķirīgā veidā, kam seko mūsu izvēlne bez attēliem. Katram komplektam tiek piešķirts pats ID lai mēs varētu vieglāk identificēt saturu. Ja jūs esat arī jQuery ventilators, varat to izmantot #ID selektors manipulēt ar visiem iekšējiem DOM elementiem.
Vispirms mums ir a satur div ar ID “rīvmaize“. Demo failā esmu izmantojis šo, lai atdalītu mūsu kodu un pārvietotu to pa lapu ar dažām pievienotām rezervēm. Jūs varat noņemt šo ārējo div, bet jums būs jāpārveido viss, lai tas atbilstu jaunajai veidnei. Tas tiešām nav ievainots atstāt konteineru, jo jums būs vieglāk kontrolēt pozicionēšanu.
Iekšēji esmu izveidojis rīvmaizi, izmantojot neregulētu sarakstu. Ir tik daudz unikālu veidu, kā pielāgot stila HTML sarakstus, un rīvmaizi ir tikai viens no tiem. Jūs varat pamanīt, ka esmu norādījis sākotnējo saraksta vienumu a klasē no “vispirms“. Tas ir nepieciešams dažiem papildu polsterējumiem, lai saglabātu izvēlnes vienumus. Papildus neliels span bloku tiek pievienota tā, lai mums būtu pareiza kreisā robeža, kas nepārklājas fona attēlā.
Papildus katrai enkura saitei ir stādīts ar samazinātu skaitu z-indekss īpašums. Izmantojot attēlus, kas vajadzīgi katrai no mūsu saitēm pārklājas lai pareizi parādītu rīvdēļa bultiņu. Vieglākais veids, kā to paveikt, ir z-indeksa pielāgošana tāpēc katra saite pārklājas ar nākamo. Es sāku ar 9 un no turienes strādāja, bet, ja jūsu izvēlnē ir vairākas saites, sāciet ar augstāku veselu skaitli.
Izvēlne bez attēliem
Uz graciozi pazemina mūsu rīvmaizi mums ir nepieciešams sekundārs HTML sarakstu vienību kopums. Ja mēģināt atteikties no vienas navigācijas, varat izmantot jQuery, lai atklātu pārlūkprogrammas aģentu un piemērotu ID. Diemžēl tas ne vienmēr ir uzticams (piemēram, dažiem mobilo sakaru lietotājiem). Vēl viens risinājums ir ietveriet IE specifisku stilu un slēpt vai parādīt, kura izvēlne vislabāk darbojas - bet, protams, šī opcija ir tikai Internet Explorer.
breadcrumb2 ir mūsu jaunais ID, ko izmanto, lai izvēlētos izvēlni bez attēliem. Turot šo modeli, ko esmu izmantojis drupatas2 kā neregulējamā saraksta klasi. Ņemiet vērā, ka mēs izmantojam iemeslu klases ir par tās vienkārša šo izvēlņu dublēšana, tāpēc, ja vēlaties, lai jūsu lapā tiktu ievietoti dažādi atšķirīgi rīvmaizi, ar šīm klasēm tas nekad nekļūs par problēmu.
Mēs esam turējuši .vispirms klasē, bet papildus pievienots .Pēdējaisklasi uz gala saraksta vienumu. Bez attēliem mēs nevaram dublēt bultas katram navigācijas izvēlnes vienumam, tāpēc es esmu izmantojis dažus noapaļoti stūri papildināt sekundāro izvēlni. .vispirms klase un .Pēdējais manipulējiet robežu rādiusu mūsu izvēlnes malās, lai izveidotu tiešām atdzist web 2.0 izskata stilu.
CSS bīdāmie fona attēli
Dažiem vienkāršākiem efektiem, veidojot īpašības, abus rīvmaizi apvienoju. Tas ir noderīgi, jo tas ne tikai ietaupa nelielu vietu, bet arī, kad dodas atpakaļ, lai rediģētu stilus, tas ir vieglāk pielāgot savu izskatu.
Abiem #breadcrumb un # breadcrumb2 Esmu iestatījis saraksta stils: nav; tāpēc visiem iekšējiem vienumiem nebūs marķieru. Jūs varat atstāt šos, ja vēlaties, bet es atklāju, ka HTML kļūst apnicīgs, lai strādātu apkārt, un tas ir daudz vieglāk izveidot jaunas ikonas. Tāpēc sāksim ar mūsu .drupatas klasē.
.drupatas displejs: bloks; .crumbs li displejs: inline; .crumbs li.first kreisajā pusē: 8px; .crumbs li a, .crumbs li a: saite, .crumbs li a: apmeklēja krāsa: # 666; displejs: bloks; peldēt: pa kreisi; fonta lielums: 12px; margin-left: -13px; polsterējums: 7px 17px 11px 25px; pozīcija: relatīvais; teksta apdare: nav; .crumbs li a fona attēls: url ('… /img/bg-crumbs.png'); fona atkārtošana: nav atkārtota; fona pozīcija: 100% 0; pozīcija: relatīvais; .crumbs li a: hover krāsa: # 333; fona pozīcija: 100% -48px; kursors: rādītājs; .crumbs li a: aktīva krāsa: # 333; fona pozīcija: 100% -96px; .crumbs li.first a span augstums: 29px; platums: 3px; kreisajā pusē: 1px ciets # d9d9d9; pozīcija: absolūta; tops: 0px; pa kreisi: 0px; Mēs iestatiet mūsu neierobežotu sarakstu bloķēt tāpēc apkārt apkārtnē nekas cits nekrīt. Ievērojiet saraksta vienumus tiek parādīts kamēr katrai enkura saitei ir daudz vairāk vietas, kur to var izkaisīt. Mēs vēlamies, lai visa mūsu izvēlnes telpa būtu noklikšķināma, lai tas būtu nepieciešams mūsu enkuru veidošana kā bloka elementi.
Esmu izmantojis izsauktu attēlu bg-crumbs.png fona. Tas ir pazīstams kā vienkārša sprite lapa CSS, vai alternatīvi a Bīdāmās durvis tehnika. Tas nozīmē, kad lietotājs slēpj vai noklikšķina uz saites, mēs pārvietojam fona pozīciju, lai parādītu atjaunināto stilu. Šajā vienīgajā attēlā ir visi 3 dizaini, kas mums ir nepieciešami, lai izveidotu rīvdēļa fonu dažādās pozīcijās, lai mēs varētu izmantot fona stāvoklis īpašums var pārvietoties, pamatojoties uz lietotāja mijiedarbību.
Pielāgoti efekti ar CSS3
Sākotnējais rupja maluma dizains ir daudz vienkāršāks. Tas ir pamanāms, jo daudz CSS rekvizītu ir daudz pamata, nekā jūs varētu iedomāties, bet tagad mēs sākam koncentrēties uz šo efektu dublēšanu tikai ar CSS3!
Atsevišķi stili aizņem daudz vietas, tāpēc es tos sadalīšu 2 kodu blokos.
.drupatas2 displejs: bloks; margin-left: 27px; polsterējums: 0; polsterējums: 10px; .crumbs2 li displejs: inline; .crumbs2 li a, .crumbs2 li a: saite, .crumbs2 li a: apmeklēja krāsa: # 666; displejs: bloks; peldēt: pa kreisi; fonta lielums: 12px; polsterējums: 7px 16px 7px 19px; pozīcija: relatīvais; teksta apdare: nav; robeža: 1px cietais # d9d9d9; robežu labais platums: 0px; .crumbs2 li a fona attēls: -webkit-gradients (lineārs, kreisais apakšējais, kreisais augšējais, krāsu stop (0.45, rgb (241,241,241)), krāsu apstāšanās (0,73, rgb (245,245,245))); fona attēls: -moz-lineārie gradienti (centra apakšā, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Internet Explorer 5.5 - 7 * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 * / -ms-filtrs: "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; robežu-apakšējo labo rādiusu: 5px; -moz-border-radius-bottomright: 5px; -webkit-robežu apakšējā labajā stūrī: 5px;
The .drupatas2 izvēlne tiek izmantota CSS gradienti dublēt fona efektus. Ja jūs neesat iepazinies ar šiem, es ļoti iesaku CSS triki CSS3 gradientos, kas jums ļaus efektīvi izmantot CSS3 gradientus. Viņi ir iekļāvuši vēl dažas Microsoft un Opera pārlūkprogrammu īpašības, taču visos gadījumos tie nav pilnībā atbalstīti. Es to neesmu iekļāvis demo kodā, bet ir labi saprast visas iespējas.
-webkit-gradients un -moza-lineārie gradienti ir galvenie risinājumi, kas lielāko daļu darba veic. Esmu iekļāvis senāku kodu vecākām Internet Explorer versijām, bet tas nav garantēts lai visu laiku parādītu pareizi (galu galā mēs izmantojam spēcīgas attēlu atveidošanas metodes). Ievērojiet, ka starp fona īpašībām esmu iestatījis gan RGB, gan hex krāsu kodus. Jūs varētu pieturēties pie vienas metodes vai otras, ja esat ērtāks.
The robežu rādiuss kods tiek izmantots tikai mūsu sekundārajai navigācijas ierīcei. Tas dod skaistu efektu visā mūsu ēdienkartes izvēlnes labajā un kreisajā labajā stūrī. Šķiet, ka josla ir gandrīz izslēgta no lapas - patiešām fantastiska ietekme uz pārlūkprogrammām, kas atbalsta stilu, bet tās attiecas tikai uz mūsu saitēm. Tagad, veidosim hover efektus, kas līdzīgi iepriekš izmantotajiem attēliem.
CSS3 robežas un ēnas
Ikreiz, kad lietotājs pārceļas uz saiti, mēs vēlamies atjaunināt dažas lietas. Vispirms mums ir nepieciešams tumšāki rāmja krāsas mūsu aktīvā elementa augšpusē un apakšā. To var redzēt arī attēlos, kas ir gan hover, gan aktīvajām valstīm.
.drupatas2 li a: hover border-top-color: # c4c4c4; robežu apakšējā krāsa: # c4c4c4; fona attēls: -webkit-gradients (lineārs, kreisais apakšējais, kreisais augšējais, krāsu stop (0.45, rgb (241,241,241)), krāsu apstāšanās (0,73, rgb (248,248,248))); fona attēls: -moz-lineārie gradienti (centra apakšā, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Internet Explorer 5.5 - 7 * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms-filtrs: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; krāsa: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; kastes ēna: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktīva border-top-color: # c4c4c4; robežu apakšējā krāsa: # c4c4c4; fona attēls: -webkit-gradients (lineārs, kreisais apakšējais, kreisais augšējais, krāsu apstāšanās (0.45, rgb (224,224,224)), krāsu apstāšanās (0,73, rgb (235,235,235))); fona attēls: -moz-lineārie gradienti (centra apakšā, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Internet Explorer 5.5 - 7 * / filtrs: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8 * / -ms-filtrs: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; kastes ēna: -1px 1px 1px 0px #dadada ieliktnis; -webkit-box-shadow: -1px 1px 1px 0px #dadada ieliktnis; -moz-box-shadow: -1px 1px 0px #dadada ieliktnis; krāsa: # 333;
Es izmantoju tādu pašu gradienta kodu, kādu mēs izmantojām iepriekš, bet šoreiz krāsas ir daudz atšķirīgas, ja pamanāt mūsu RGB vērtības. Katra no valstīm būs tumšāka teksta krāsa # 333, vēl citi apraksti ir nedaudz mainīti, lai tie atbilstu lietotāja komandām.
Hover jūs redzēsiet a spīdīgs reljefs efekts kas kopā ar tumšākas robežas dod lapas uznirstošo stilu. Ja noklikšķināsiet un turat, jūs nokļūsiet aktīvajā stāvoklī, kurā ir a tumšāka fona gradients. Šis efekts izraisa pogas, lai tās izskatītos “nospiests” lapā.
Mēs arī piemērojam kastes ēna īpašības no jaunajām CSS3 specifikācijām. -webkit, -moz, un noklusējuma stili tiek izmantoti ar tiem pašiem iestatījumiem. Pārvietošanās displeji a gaiša ēna iziet no izvēlētās saites apakšas. Aktīvā laikā ēna veidosies uz augšējās, labās un apakšējās robežas. Šis efekts tiek izveidots ar ieliktnis atslēgvārds pievienots katras kastes ēnu rindas beigām. Atkal CSS triki ir jūsu labākais draugs šeit ar awesome rakstu par kastes ēnu, jo tas runā par sintaksi un tās pareizu lietošanu CSS3.
Bonuss: vairāk stilu
Papildus apmācības kodam es esmu iekļāvis papildu fona attēlus ar pielāgotām krāsu shēmām. Esmu izlasījis no sākotnējā fona un izmantoju Adobe Photoshop, lai izveidotu dažas variācijas, kuras jūs varat pieteikt savā tīmekļa vietnē.
Tie ir bonusa faili ir iekļauti avota failā Jūs varat lejupielādēt .zip arhīva formātā zemāk esošajā sadaļā.
Jūs varat apskatīt iepriekš redzamo attēlu, lai iegūtu priekšstatu par to, par ko es runāju. Ja jums nepieciešama īpaša krāsu shēma, atveriet to Photoshop> Attēls> Korekcijas> Hue / Saturation lai mainītu krāsu shēmu, lai tas atbilstu jūsu veidnei, atcerieties pārbaudiet opciju Colorize rūts / piesātinājuma rūtī, ja krāsa vispār nemainās.
Secinājums
Šī apmācība būtu gotten jums iepazinušies ar dažiem jaunākās CSS3 metodes. Mēs esam izveidojuši divas fantastiskas ēdienkartes izvēlnes, kas veidotas līdzīgā veidā, un veidojām to tā, lai vecākās pārlūkprogrammas varētu pasliktināties. Turklāt es esmu piedāvājis savu demo kodu un dažus bonusa attēlus, lai jūs varētu spēlēt apkārt.
Vai jums īpaši patīk šeit veidotie stili? Vai varbūt jums ir jautājumi vai idejas par to, kā uzlabot apmācības kodu? Lūdzu, kopīgojiet savas domas ar mums tālāk norādītajā diskusiju jomā un neaizmirstiet lejupielādēt avota failus, lai jūs varētu spēlēt ar demo!
Vairāk CSS3 konsultāciju
Caving vairāk CSS3? Zemāk ir mūsu raksti, lai jūs varētu saprast CSS3 teorētiski un praktiski!
- CSS3: izveidot RSS plūsmas logotipu
- CSS3: Izveidojiet meklēšanas lauku
- CSS3: izveidojiet AJAX kontaktformu
- CSS3: HTML5 / CSS3 tīmekļa lapu veidošana
