• Üks.
• Kaks.
• Kolm.
• Neli.
• Viis.

jne. (Ma vabandan Rebus'i eest) :-)

Kui teil on blogi mall, näeb välja nagu mina, selles mõttes, et taust on hall ja plokk ise on valge, küünlad on parimad plokile, nagu mina. Kuna neid saab uue stringi juurde liikuda, kui nimi on liiga pikk ja uskuge mind, see ei ole väga ilus. :-)

See on kõik. Lugupeetud sõbrad, kui esinesid tingimata raskusi küsi kommentaare. Varsti näeme.

Eelmises artiklis "Breadcrumbsi navigeerimine CSS-i kolmnurgadega" kirjeldas, kuidas luua menüü, kasutades puhtaid CSS-i, ilma graafika kasutamiseta.

Meetod on kõigile hea, välja arvatud üks - sellise menüü toetus vanade brauseritega on kaheldav. Kuid selle artikli üleandmisega viidati viide viis navigeerimise loomiseks graafika abil.

Artikkel on kirjutatud pikka aega, kuid meetod on absoluutselt töötav. ARTIKLI TÜÜDIVAHENDI PEITERSi autor ja post ise nimetatakse "lihtsate skaleeritavate CSS-põhiste leivsade leivsajade" jaoks. Allpool ma ei ole isegi tasuta tõlge, vaid vabadus.

Paar päeva tagasi oli mul ülesanne luua navigeerimismenüü "leivapuru" stiilis (leivaõde) saidi jaoks, mille jaoks ma töötasin. Ma ei arva, et iga saidi jaoks on selline menüü, kuid mõnel juhul on see väga kasulik ja praktiline.

Kuid see näide on sama, mis võib praktikas laiendada ja rakendada. Menüü luuakse tavalise märgise nimekirja abil.

1

Ul

.

Aga kõigepealt vaadake proovi, kellega me töötame:

Menüü on piisavalt lihtne, nagu ka kood, millega me selle loome.

HTML-kood - Basic ul Loetelu

• KODU
• Põhiosa.
• Alamosa.
• Alamosas.
• Lehekülg olete kohe

Kõik menüüelemendid on lingid, välja arvatud viimane - "Leht, mida te praegu olete praegu" (praegu olete). Kui töötate menüüs, ma mõtlesin, kas kõige sobivama struktuuri nimekiri on menüü loomiseks? Usun, et loetelu kohaldamine käesoleval juhul ei ole range reegel, kuid mulle tundub kõige semantiline ja õige valik.

CSS-kood - menüü stiilide loomine

Me määrame menüü tavalisi stiile - eemaldage markerid ja lähtestage taanded Firefoxi brauserites, st:

Me teeme ujuva läbi vara, mis on võrdne kogu menüü kõrgusega. Ja seadke teksti värv. Järgmisena asetame viide taustapildi lõigatud paigutusest. Selleks lõigake ainult "noolt":

... mis "lihtsalt" tormas "paremale (100%) ja asetage täpselt vertikaalsed (50%). Me teeme ka viide paremale paremale

1	Padding-vasak: 15px

kus seal on taustapildi (väljalõigatud nool): .crumbbs Li a (ekraan: plokk; polsterdamine: 0 15px 0 0; taust: URL (IMG / CRUMBS.GIF) 100% 50% NO-Korda;)

Juba peaaegu kõik on tehtud. See jääb seadistamiseks stiilide link teksti jaoks. Me eemaldame standardse rõhu all ja muutme oma värvi:

.crumbbs Li A: Link, .crumbbs Li A: külastatud (Teksti kaunistus: Puudub

1

: hõljuma

ja

1

: FOCUS

. Kui liigutate hiirekursori või fookuse võtme klaviatuuri värvi tekstilinast muudab: .crumms Li a: Hover, .crumms Li A: Fookus (Värv: # DD2C0D;)

Meie töö tulemus esitatakse siin:

Tõlkija Märkus:

Artikli autor lihtsustas näidet ja koodeksi ise, nii palju kui ma aru saan. Fakt on see, et näide on selgelt nähtav lineaarne horisontaalne gradient iga menüüelemendi jaoks. Siiski ei kuvatud koodis. Noh, mitte hädas - kas on probleem luua lineaarne gradient CSS3? Ülesanne ise on täidetud!

Navigeerimine "leivapurude kujul" aitab saidi külastajad navigeerida dokumentide hierarhilises struktuuris ja leida tee tipptasemele. Seega, kui kohapeal asuvad suur hulk dokumente, tuleb see varustada "leivapuru". Selles õppetundis esitatakse CSS-kood sellise soovitud navigeerimisvahendi erinevate kujundusvalikute loomiseks.

HTML-märgis

Märgistamine on lihtne ja minimaalne. See põhineb järjestamata nimekirjas.

• Lorem Ipsum.
• Vivamus Nisi Eros.
• Nulla SED LOREM RISUS
• Nam Iaculis Commo.
• Oled sa siin

CSS.

Kõigepealt teeme meie ebakorrapärase nimekirja jaoks väikese CSS-i lähtestamise:

UL (marginaal: 0; polsterdamine: 0; Loetelu stiil: Puudub;)

Meie "leivapurude kujundamiseks kasutatakse pseudoelemente.

Esimene näide

Selles näites kasutatakse väga lihtsat tehnikat. Kolmnurk on loodud raam paremale abiga pseudo-elemendid paigutatud ühe teise. Tume kolmnurga nihkub kaadri efekti loomiseks.

# Breadcrumbs-One (taust :Ee; piiri laius: 1px; Piiritusstiil: tahke; Border-värv: # F5F5F5 # E5E5E5 #ccc; Border-raadius: 5px; Box-Shadow: 0 0 2px Rgba (0, \\ t 0,0 ,,2); ülevool: peidetud; laius: 100%;) # riivitarbed-oon li (float: vasakule;) # riivitarbed-one a (polsterdamine: .7EM 1EM .7EM 2EM; Dekoratsioon: Puudub; Värv: # 444; Asend: sugulane; Tekst-vari: 0 1px 0 Rgba (255,255,255, 0,5); taustavärv: #ddd; taustapildi: lineaarne gradient (paremale, # f5f5f5, taustapilt: # DDD);) # Breadcrumbs-One Li: esimese lapse a (polster-vasakule: 1EM; piiriraadius: 5px 0 0 5px;) # Breadcrumbs-One A: Hover (taust: #fff;) # riivselt :: JÄRGI, # Breadcrumbs-One :: enne (sisu: ";" Asend: Absoluutne; Top: 50%; marginaal-top: -1.5em; piiriülene: 1.5em tahke läbipaistev: 1.5em Tahke läbipaistev; piiri vasakul: 1M tahked; paremal: -1em;) # riivsamad-one a :: after-indeks (Z-indeks: 2; piir vasakpoolse värvi: #ddd;) # riivsamad - üks a :: enne ( Piiri vasakpoolse värvi: #ccc; ri GHT: -1.1EM; Z-indeks: 1; ) # Breadcrumbbs-One a: Hover :: cleter (Piirjas vasakpoolne: #fff;) # Breadcrumbs-One. Paigaldav, # Breadcrumbs-One. Parandus: Hover (fondi kaal: Bold; Taust: Puudub;) Breadcrumbs -One .current :: cleteter, # riivsetekrambid-üks. Parav :: enne (sisu: Normaalne)

CSS-vormid ehitatakse enne ja pärast elementi paigutatud pseudo-elemente.

# Breadcrumbs-kaks (ülevoolu: peidetud; laius: 100%;) # riivsamad-kaks li (float: vasakule; marginaal: 0.5EM 0 1EM;) # Breadcrumbs-kaks a (taust: #DDD; polsterdamine: .7em 1em Float: Vasak; Teksti kaunistus: Puudub; Värv: # 444; Tekst-vari: 0 1px 0 Rgba (255,255,255, 5); Asend: sugulane;) # Bregecrumbs-kaks a: Hover (taust: # 99DB76;) # Breadcrumbs-kaks a :: enne: Absoluutne; Top: 50%; marginaal-top: -1.5em; piiri laius: 1.5EM 0 1.5EM 1EM; Piiri stiilis: tahke; Border- Värv: #ddd #ddd # DDD läbipaistev; vasakule: -1em;) # Breadcrumbs-kaks a: Hover :: Enne (Border Värv: # 99DB76 # 99dB76 # 99dB76 läbipaistev;) # Breadcrumbs-kaks a :: Pärast (sisu: "; positsioon: Absoluutne; Top: 50%; marginaal-top: -1.5em; piiriülene: 1.5m tahke läbipaistev; piiripõhja: 1.5em tahke läbipaistev; Piirjas vasakul: 1M tahke #ddd; paremal: -1em;) # Breadcrumbs-kaks A: Hover :: after (Border vasakpoolse värviga: # 99dB76;) # riivseteks-kaks. Paigaldav, # leivatõstukid-kaks. Parav: Hover (fondi kaal: julge; Taust: Puudub; ) # Breadcrumbs-kaks. Laske :: after, # Breadcrumbs-kaks. Enne (sisu: Normaalne)

Piiriraadiuse vara kasutamine on ristküliku ja ruutude nurgad kõverad. Ruudukujuline pöördub teemandi tegemiseks sellest.

# Breadcrumbs-kolm (ülevoolu: peidetud; laius: 100%;) # Breadcrumbs-kolm Li (float: vasakule; marginaal: 0 2EM 0 0;) # Breadcrumbs-kolm a (polsterdamine: .7em 1EM. 2 Vasakule; Teksti kaunistus: Puudub; värv: # 444; taust: #ddd; positsioon: suhteline; Z-indeks: 1; Tekst-vari: 0 1px 0 RGBA (255,255,255, 5); Piiriraadius: .4em 0 0.4em;) # Breadcrumbs-kolm a: Hover (taust: # Abe0ef;) # Breadcrumbs-kolm a :: Pärast (taust: #ddd; sisu: ""; kõrgus: 2.5em; marginaal-top: -1.25em ; Asend: Absoluutne; õige: -1em; Top: 50%; Laius: 2.5em; Z-indeks: -1; Transform: Pööra (45deg); Piirraadius: .4em;) # Breadcrumbs-kolm a: Hover: : Pärast (taust: # Abe0ef;) # leivatõstukid-kolm ..Current, # Breadcrumbs-kolm. Paigaldane: Hover (fondi kaal: julge; taust: Puudub;) # Breadcrumbs-Kolm. Parandus:: Pärast (Sisu: Normaalne; )

Pseudoelementide abil lisatakse kaks ristkülikut. Siis nad curl nurgad.

# Breadcrumbs-neli (ülevoolu: peidetud; laius: 100%;) # riivsamad-neli li (float: vasakule; marginaal: 0.5em 0 1EM;) # Breadcrumbs-neli a (taust: #DDD; polsterdamine Float: vasakul; Teksti kaunistamine: Puudub; värv: # 444; Tekst-vari: 0 1px 0 RGBA (255,255,255, 0,5); Asend: sugulane;) # Breadcrumbs-neli a: Hover (taust: # EFC9AB;) # Breadcrumbs-neli A :: Enne, # Breadcrumbs-neli a :: Pärast (sisu: "; Asukoht: Absoluutne; Üles: 0; Alumine: 0; laius: 1EM; taust: #ddd; transformation: skew: ) # Breadcrumbs-neli a :: enne (vasak: -5em; Piiriraadius: 5px 0 0 5px;) # Breadcrumbs-neli a: Hover :: Enne (taust: # EFC9AB;) # Breadcrumbs-neli a :: Pärast (paremal: -.5em; piiriraadius: 0 5px 5px 0;) # Breadcrumbs-neli a: Hover :: Pärast (taust: # EFC9AB;) # riivsamad-neli. Lasked-neli. (Font-kaal: Bold; Taust: Puudub;) # Breadcrumbs-neli. Paigaldage :: after, # Breadcrumbs-neli.

CSS3 põhineva "leivapurude" disaini eelised

• Pilte pole, nii et lihtsalt värskendage ja hooldage.
• Lihtne skaala.
• Pöördvõrdeline ühilduvus vanade brauseritega.

Selles õppetund, saate tutvuda protsessi loomise bootstrap 3 ja 4 navigatsioonikettide ("leivapurud").

Navigeerimikettide märgistamine

Navigatsiooniahelad ("leivapurud", leivaõde) on navigatsioonikava, mis näitab kasutaja praegust asukohta kohapeal. Neid kasutatakse hierarhiliselt organiseeritud teabe kuvamiseks. Näiteks veebipoes "leivapurud" esindavad tavaliselt sektsioonide ketid. Oma abiga saab kasutaja kindlaks määrata, milline osa on nüüdseks, samuti nad võimaldavad teil minna kõrgema taseme osadesse, st. Anda saidi struktuuri navigeerimise teine \u200b\u200bvõimalus.

"Leib Crumbs" bootSTRAP-is on tavaline tellitud nimekiri koos klassi riivsale. Nimekirja elementide eraldaja lisatakse automaatselt CSS-i (bootstrap.min.css) abil järgmise klassi kaudu:

Breadcrumbs\u003e Li + Li: enne (värv: #cccccc; Sisu: "/"; polsterdamine: 0 5px;)

Näide "leivapuru" loomisest koos bootstrapiga.

1. peamine

1. peamine
2. Töötlejad

1. peamine
2. Töötlejad
3. Intel

Registreerimine navigatsiooniahelate bootstrap

Veel üks näide:

1. peamine
2. 2013
3. November

Leivapurud arhiiviteabe navigeerimiseks

Ei ole tavaline variant disaini leivapuru

Mõelge näide leivapurude järgmise teostuse loomise näidet:

Näide leivapurude disainist saidil

Leivapuru loomise protsess koosneb HTML-i struktuuri ja stiile (CSS) arendamisest.

CSS leibpurub:

/ * Leib Crumbs * / #Breadcrumb (nimekirja-stiil: Puudub; kuvamine: Inline-plokk; Padding-vasakule: 0px;) #breadcrumb .icon (fondi suurus: 14px;) #breadcrumb li (float: vasakule) Li a (värv: #fff; Merginaal-paremal: 23px; -WebKit-kasutaja-Vali: Puudub; -Moz-kasutaja-Vali: Puudub; -left: 15px; -moz-border-raadius: 4px 0 4px; -webkit-border-raadius: 4px; piiriraadius: 4PX 0 0 4PX;) #BREADCLM LI: esimene laps A: enne (piiri: ükski ;) #Breadcrumb li: viimane laps a (polster-parempoolne: 15px; -Moz-border-raadiusega: 0 4PX 4PX 0; -Mebkit-border-raadius: 0; piiriraadius: 0 4px 4px 0;) # breadcrumb LI: Last-Child A: Pärast (piiri: Puudub;) #Breadcrumb Li A: Enne, #Breadcrumb Li A: Pärast (sisu: "; Asukoht: Absoluutne; Üles: 0; Piir: 0 Solid # Cc2eaa; Piirlaius: 17px 10PX; Laius: 0; Kõrgus: 0; ) #Breadcrumb li A: enne (vasakult: -20px; piiri vasakpoolse värviga: läbipaistev;) #Breadcrumb li a: pärast (vasakult: 100%; Piirivärv: läbipaistev; piiri vasakpoolse värvi: # cc2eaa;) #Breadcrumb li a: Hover (taustvärv: # A22587;) #Breadcrumb Li A: Hover: Enne (Border Color: # A22587; Piiri vasakpoolne värv: läbipaistev;) #BREADCLM LI A: Hover Vasakpoolse värviga: # A22587;) #BREADCRMM LI A: Aktiivne (taustvärv: # A22587;) #BREADCLM LI A: Aktiivne: Enne (Border Color: # A22587; Piiri vasakpoolne värv: läbipaistev;) # Breadcrumb Li A: Active: Pärast (Piiriva vasakpoolse värvi: # A22587;) #Breadcrumb li.current A (Pointer-sündmused: Puudub; Kursor: mitte-lubatud; Filter: alfa (läbipaistmatus \u003d 65); -Mebkit-box-shadaw : Puudub; kasti vari: Puudub; läbipaistmatus: .65;)

Värvimuutused tehakse vastavate CSS-i omaduste väärtuste redigeerimisel.

HTML-märgis:

1. peamine
2. Tarvikud
3. Protsessid
4. Intel

Praeguse elemendi juhtimine (kui seda kasutatakse ahelas), viiakse läbi praeguse klassi lisamisega Li element.