• Jeden.
• Dva
• Tri.
• Štyri.
• Päť.

atď. (Ospravedlňujem sa za rebus) :-)

Ak máte šablónu na blogu, vyzerám ako ja, v tom zmysle, že pozadie je sivé a samotný blok je biely, drobky sú najlepšie dať na blok, ako ja. Pretože môžu byť presunuté do nového reťazca, ak je názov príliš dlhý a verte mi, to nie je veľmi krásne. :-)

To je všetko. Vážení priatelia, ak akékoľvek ťažkosti vznikli nevyhnutne opýtajte sa v komentároch. Uvidíme sa čoskoro.

V predchádzajúcom článku "Strieborná navigácia s trojuholníkmi na CSS" opísala, ako vytvoriť menu pomocou čistého CSS, bez použitia grafiky.

Metóda je dobrá pre každého, s výnimkou jednej - podpora takejto menu v starých prehliadačoch je pochybná. Ale s prevodom tohto článku sa odkazoval na spôsob, ako vytvoriť navigáciu pomocou grafiky.

Článok je napísaný na dlhú dobu, ale metóda je absolútne funguje. Autorom článku Veerle Pieters a samotný príspevok sa nazýva "Jednoduché škálovateľné CSS báze strúhanky". Nižšie nie som bezplatný preklad, ale bezplatne.

Pred niekoľkými dňami som mal úlohu vytvárať navigačné menu v štýle "chleba omrvinky" (strúhanka) pre stránku, pre ktorú som pracoval. Nemyslím si, že takéto menu je potrebné pre každé miesto, ale v niektorých prípadoch je veľmi užitočná a praktická.

Tento príklad je však taký, aký je základ, ktorý môže byť rozšírený a aplikovaný v praxi. Menu sa vytvorí pomocou pravidelného zoznamu štítkov.

1

Ul

.

Najprv sa pozrite na vzorku, s ktorou budeme pracovať:

Menu je dostatočne jednoduché, ako je kód, s ktorým ho vytvoríme.

HTML kód - základný zoznam ul

• DOMOV.
• Hlavná časť.
• Subsekcia.
• Pododdiel.
• Stránka, ktorú ste práve teraz

Všetky položky menu majú odkazy okrem poslednej - "stránka, v ktorej ste práve teraz" (stránka, v ktorej ste v súčasnosti). Pri práci v ponuke som sa čudoval, či je zoznam najvhodnejšej štruktúry vytvoriť menu? Domnievam sa, že aplikácia zoznamu v tomto prípade nie je prísna pravidlom, ale zdá sa mi, že je najviac sémantická a správna voľba.

CSS Code - Vytvorte štýly pre menu

Špecifikujeme bežné štýly pre menu - Odstráňte značky a resetujte zarážky v prehliadačoch Firefoxom, tj:

Robíme plávajúce cez vlastnosť, ktorá sa rovná výške celého menu. A nastaviť farbu textu. Ďalej umiestnite na referenciu obrázkov na pozadí od rozloženia. Aby to urobili, znížiť iba "šípku":

... ktoré "jednoducho" ponáhľajú "doprava (100%) a umiestnite presne vertikálne (50%). Robíme tiež z odkazu doprava doprava

1	Polstrovanie - vľavo: 15px

V ktorom bude existovať obrázok na pozadí (šípka cut-out): .crumbs li a (Displej: Blok; Padding: 0 15PX 0 0; pozadia: URL (IMG / CRUMBBS.GIF) 100% 50% NO-REPEAT;)

Už takmer všetko sa robí. Zostáva nastaviť štýly pre textový text. Odstránime štandardnú podčiarkovku a zmeníme svoju farbu:

.Crumbs Li A: Link, .crumbs Li A: Navštívili sa (Text-Decoration: Žiadne; Farba: # 777;)

1	: vznášať sa

a

1

:

. Keď sa vznášate kurzor myši alebo prijímanie zamerania z textového odkazu klávesnice sa zmení: .crumbs li a: Hover, .crumbs li A: Focus (Farba: # DD2C0D;)

Výsledok našej práce je tu prezentovaný:

Prekladateľ Poznámka:

Autor článku zjednodušil príklad a samotný kód, podľa toho, pokiaľ to chápem. Faktom je, že príklad je jasne viditeľný lineárny horizontálny gradient pre každú z položiek menu. V kóde sa však nezobrazovalo. No, nie problémy - je to problém vytvoriť lineárny gradient na CSS3? Samotná úloha je splnená!

Navigácia vo forme "Crumbs chleba" pomáha návštevníkom stránok navigovať v hierarchickej štruktúre dokumentov a nájsť cestu na najvyššiu úroveň. Preto, ak sa na stránke nachádza veľký počet dokumentov, musí byť vybavený "omrvinkami chleba". V tejto lekcii bude CSS kód prezentovaný na vytvorenie rôznych možností dizajnu pre takýto požadovaný navigačný nástroj.

HTML Markup

Označenie je jednoduché a minimálne. Je založený na neusporiadanom zozname.

• Lorem ipsum
• VIVAMUS NISI EROS.
• Nulla sed lorem risus
• Nam IACULIS COMMODO.
• Si tu

CSS.

Ak chcete začať, urobíme malý CSS reset pre naše neusporiadané zoznam:

Ul (okraj: 0; čalúnenie: 0; zoznam-štýl: žiadny;)

Pre dizajn nášho "chleba omrvinky" budú použité pseudo-prvky.

Prvého príkladu

V tomto príklade sa používa veľmi jednoduchá technika. Trojuholník je vytvorený na ráme vpravo s pomocou pseudo-prvkov umiestnených jeden cez druhú. Dark trojuholník sa posuny na vytvorenie rámového efektu.

# Strúhnice-jeden (pozadie: #eee; hraničná šírka: 1px; pohraničný štýl: pevná; hraničná farba: # f5f5f5 # e5e5e5 #ccc; okraj hraničného polohy: 5px; box-tieň: 0 0 2PX RGBA (0, 0,0, .2); Prechody: skryté; Šírka: 100%;) # RUBINGRUMBY-ONE LI (Float: vľavo,) # \u200b\u200bstrúhanka-jeden A (čalúnenie: .7EM 1EM .7EM 2EM; Dekorácia: Žiadne; Farba: # 444; Poloha: Relatívne; Text-Shadow: 0 1PX 0 RGBA (255,255,255, .5); pozadia-Farba: #DDDD; Pozadie - obrázok: Lineárny gradient (vpravo, # F5F5F5, # DDD);) # RUBINGRMBBS-ONE LI: prvé dieťa A (polstrovanie vľavo: 1EM; Border-Radius: 5px 0 0 5px;) # BREALCRUS-ONE A: Hover (pozadie: #FFF;) # BREALCRUS-ONE A :: Afterter, # BRUCKUMBS-ONE A :: PRED (Obsah: ";" Poloha: Absolútna; TOP: 50%; Organizácia hranica: -1,5EM; Border-top: 1,5EM solídny priehľadný; Pevné transparentné; opätovné vľavo: 1EM pevná; vpravo: -1EM;) # strúhanka-jeden a :: afterx (Z-index: 2; hraničná ľavá - farba: #DDD;) # BREALCRUMBS-ONE A :: PRED Border-Left-Color: #ccc; RI GHT: -1,1EM; Z-index: 1; ) # RUBINGRUSBRBS-ONE A: Hover :: Interter (Border-Left-Farba: #FFF;) # RUBINGRUMBS-ONE .CURRENT, # RUBINGCRUSBY-ONE .CURRENT: Hover (Font-Hmotnosť: Bold, pozadie: Žiadne;) strúhanka -Ne .current :: doplnok, # strúhanka-jeden .current :: predtým (obsah: normálne;)

Formy CSS sú postavené pomocou pseudo-prvky umiestnených pred a po prvom prvom.

# Strúhankables-dva (prepad: skrytý; šírka: 100%;) # strúhačka-dva li (float: vľavo; okraj: 0 .5EM 0 1EM;) # BREALCRUSE-DVA A (pozadie: #DDD; Padding: .7EM 1EM ; Float: Vľavo, Text-dekorácie: Žiadne; Farba: # 444; Text-Shadow: 0 1PX 0 RGBA (255,255,255, 0,5); Poloha: relatívna;) # strúhanka-dva a: Hover (pozadie: # 99dB76;) # Strúhanky-dva a :: predtým: absolútne; TOP: 50%; Okraj na vrchole: -1,5EM; hraničná šírka: 1,5EM 0 1.5EM 1EM; Border-style: Solid; Border- Farba: #DDD #DDD # DDD transparentné; vľavo: -1EM;) # strúhanka-dva a: Hover :: predtým (hraničná farba: # 99dB76 # 99dB76 # 99dB76 # 99dB76 # 99dB76 transparentné;) # strúhanka-dva a: po (obsah: ""; pozícia: absolútna; Top: 50%; Margin-Top: -1,5EM; Border-Top: 1,5EM pevné transparentné; pohraničné dno: 1,5EM pevné transparentné; hraničné vľavo: 1EM pevné #DDD; vpravo: -1EM;) A: Hover :: Interter (okraj ľavej farby: # 99dB76;) # strúhanky-dva .Current, # strúhankans-dva .Current: hover (font-hmotnosť: tučné; Pozadie: Žiadne; ) # Strúhanka-two .Current :: afterter, # strúhanka-dva .current :: predtým (obsah: normálne;)

Pomocou vlastnosti hraničného okruhu sú uhly obdĺžnika a štvorcov zakrivené. Námestie sa otočí, aby z neho urobili diamant.

# Strúhanky-tri (prepad: skryté; šírka: 100%;) # strúhanka-tri li (plavák: vľavo, okraj: 0 2EM 0 0;) # BREALCRBBS-THERE A (PADTING: .7EM 1EM .7EM 2EM; Vľavo; Text-dekorácie: Žiadne; Farba: # 444; pozadie: #DDD; pozícia: relatívna; Z-index: 1; text-tieň: 0 1PX 0 RGBA (255,255,255, .5); Border-Radius: .4EM 0 0 .4EM;) # strúhanka-tri A: Hover (pozadie: # abe0ef;) # strúhanka-tri a :: po (pozadí: #ddd; Obsah: "", Výška: 2,5EM; Margin-top: -1,25EM ; Pozícia: Absolútna; vpravo: -1EM; Top: 50%; Šírka: 2,5EM; Z-index: -1; Transformácia: ROTTÁT (45DEG); BREATHER-RADIUS: 0,4EM;) # BREALCRBBS-TROHO A: Hover: : Po (pozadí: # abe0ef;) # strúhanka-tri .current, # strúhankans-tri .Current: hover (font-hmotnosť: tučne, pozadie: žiadny;) # brimelbres-tri .current :: po (Obsah: Normal; )

S pomocou pseudových prvkov sa pridajú dva obdĺžniky. Potom sú curl rohy.

# Strúhačka-štyri (prepad: skrytý; šírka: 100%;) # strúhanka-štyri li (plavák: vľavo; okraje: 0 .5EM 0 1EM;) # BREALCRBBS-FOUTE A (pozadie: #DDD; Padding: .7EM 1EM ; Float: Zľava; Text-dekorácie: Žiadne; Farba: # 444; Text-Shadow: 0 1PX 0 RGBA (255,255,255, .5); Poloha: Relatívne;) # Ručenka-štyri A: Hover (pozadie: # EFC9AB;) # BREALCRUMBBS-FOUT A :: Pred, # strúhanka-štyri A :: Po (Obsah: "; Pozícia: Absolútna; Top: 0; Dno: 0; Šírka: 1EM; Pozadie: #DDD; Transformácia: Skew (-10DEG) ;) # Strúhanky-štyri a :: predtým (vľavo: -5EM; Border-Radius: 5px 0 0 5PX;) # RUBINGRUMS-FOUND A: Hover :: Pred (pozadie: # EFC9AB;) # BREALCRUMBS-FOUNT A :: Po (Právo: -,5EM; Border-Radius: 0 5PX 5PX 0;) # BREALCRBBS-FOUND A: Hover :: Po (pozadí: # efc9ab;) # strúhankables-štyri .current, # strúhankables-štyri .Current: hover (Font-Hmotnosť: Tučné, pozadie: Žiadne;) # BREALCRBBS-FOUNDY .CURRENT :: AKTROLNOSTI, # RUBINGRUMBS-FOUNTY .CURRENT :: PRED: Normal;)

Výhody dizajnu "omrvinky chleba" založené na CSS3

• Žiadne obrázky, takže len aktualizovať a udržiavať.
• Jednoduché zmenšené.
• Inverzná kompatibilita so starými prehliadačmi.

V tejto lekcii sa zoznámte s procesom vytvárania v bootstrap 3 a 4 navigačné reťazce ("chlieb omrvinky").

Označenie navigačných reťazcov

Navigačné reťazce ("chlebačníky", strúhanka) je navigačná schéma, ktorá zobrazuje aktuálnu polohu užívateľa na mieste. Používajú sa na zobrazenie hierarchicky organizovaných informácií. Napríklad v online obchode "chlieb" zvyčajne reprezentujú reťaze sekcií. Pomocou ich pomoci môže užívateľ určiť, ktorá sekcia je teraz, rovnako ako oni umožňujú ísť na časti vyšších úrovní, t.j. Poskytnúť ďalšiu možnosť navigácie štruktúry lokality.

"Krčba chleba" v Bootstrap je obyčajný objednaný zoznam s triedou strúhankou. Oddeľovač prvku zoznamu sa automaticky pridáva pomocou CSS (bootstrap.min.css) prostredníctvom nasledujúcej triedy:

Strúhanky\u003e li + li: predtým (farba: #cccccc; obsah: "/"; čalúnenie: 0 5px;)

Príklad vytvárania "omrvinky chleba" s bootstrap.

1. hlavný

1. hlavný
2. Procesory

1. hlavný
2. Procesory
3. Inteligencia

Registrácia navigačných reťazcov v bootstrap

Ešte jeden príklad:

1. hlavný
2. 2013
3. November

Chleba omrvinky na navigáciu informácií o archíve

Nie štandardný variant dizajnu chleba

Zvážte príklad vytvorenia nasledujúceho uskutočnenia chlebovej omrvinky:

Príklad dizajnu chlebačiek na webe

Proces vytvárania chlebových omrviniek sa skladá z vývoja HTML štruktúry a štýlov (CSS).

CSS chlieb:

/ * chlieb omrvinky * / #breadcrumb (zoznam-štýl: žiadny; displej: inline-blok; polstrovanie - vľavo: 0px;) #breadcrumbom .icon (font-veľkosť: 14px;) #breadcrub Li (Float: vľavo;) Li a (farba: #fff; displej: blok; pozadie: # cc2eaa; text-dekorácie: žiadna; pozícia: relatívna; výška: 34px; výška riadkov: 34px; čalúnenie: 0 10PX 0 5PX; text-align: centrum; ROZPRAZOVANIE - PRAVIOR: 23PX; -Webkit-User-Select: None; -MOZ-User-Select: None; -ms-User-Select: None; používateľom-Select: Žiadny;) #breadcrub Li: Prvé dieťa A (polstrovanie -LEPT: 15PX; -MOZ-Border-Radius: 4PX 0 0 4PX; -Webkit-Border-Radius: 4px; okraj hraníc: 4PX 0 0 4PX;) #breadcrub Li: Prvé dieťa A: predtým (Hranica: Žiadne ;) #Breadcrumb Li: Posledné dieťa A (Padding-Right: 15px; -Moz-Border-Radius: 0 4PX 4PX 0; -Webkit-Border-Radius: 0; okraj hraníc: 0 4px 4px 0;) LI: Posledné dieťa A: Po (hraniciach: Žiadne;) #breadcrumb li a: predtým, #breadcrumb Li A: Po (Obsah: "; Pozícia: Absolútna; Top: 0; Hranica: 0 Solid # Cc2eaa; Hraničná šírka: 17px 10px; Šírka: 0; Výška: 0; ) #Breadcrub li a: predtým (vľavo: -20px; hraničná ľavá - farba: transparentná;) #breadcrub li a: po (vľavo: 100%; hraničná farba: transparentná; hraničná ľavá - farba: # cc2eaa;) #Breadcrub Li A: Hover (na pozadí-Farba: # A22587;) #breadcrub Li A: Hover: Pred (Farba pohraničky: # A22587; hraničná ľavá - farba: transparentná;) #breadcrumb Li A: Hover: Po (Border - Ľavá farba: # A22587;) #BREADCRUM LI A: ACTIVE (pozadia-farba: # A22587;) #breadcrub Li A: Active: Pred (Farba pohraničky: # A22587; hraničná ľavá - farba: transparentná;) # breadcrumb A: Active: Active: Po (Border-Left-Farba: # A22587;) #breadcrub Li.current A (Ukazovatele-udalosti: Žiadne; Kurzor: nie je povolený; Filter: Alpha (Opacity \u003d 65); -webkit-box -shadow : Žiadne; Box-Shadow: Žiadne; nepriehľadnosť: 0,65;)

Zmeny farieb sa vykonávajú úpravou hodnôt zodpovedajúcich vlastností CSS.

HTML Označenie:

1. hlavný
2. Príslušenstvo
3. Procesy
4. Inteligencia

Vedúce súčasného prvku (ak sa používa v reťazci) sa vykonáva pridaním aktuálnej triedy k LI prvku.