A CSS és a CSS3 évek óta tartó fejlesztésének köszönhetően eljutottunk ahhoz a ponthoz, ahol sok régi szoftveres megoldások beleértve a háttérképeket is, most már teljes egészében CSS -ben hozható létre. Ebben a leckében megvizsgáljuk a navigációs linkek sorozatának létrehozását lapos stílusban, anélkül, hogy szükség lenne a korábban népszerű háttérkép módszerre, az úgynevezett tolóajtó módszerre.
Az általunk létrehozott zsemlemorzsát chevron -ok díszítik, hogy megjelenítsék a strukturált tartalom ötletét. Korábban háttérképet használtunk PNG formátum ennek a chevron alakzatnak a létrehozásához, és most egy okos szegélytechnikával ugyanazt a hatást hozhatja létre CSS használatával.
Kezdjük azzal, hogy navigációs linkeket hozunk létre felsorolás szerinti listaként. Minden "zsemlemorzsa" elem lesz
# morzsa ul li a (kijelző: blokk; úszó: bal; magasság: 50 képpont; háttér: # 3498db; text-align: center; kitöltés: 30px 40px 0 40px; pozíció: relatív; margin: 0 10px 0 0; font-size : 20 képpont; szövegdíszítés: nincs; szín: #fff;)
Az eredeti CSS -stílus minden egyes listaelem horgonya egy tiszta kék téglalap stílusban. A szöveg középre van állítva, és minden oldalon egyenlő párnázással van ellátva. Az abszolút következő elemek pozícionálásához a pozíció: relatív; tulajdonság hozzáadódik ezekhez az elemekhez, így ezek az abszolút pozicionált elemek a szülőelemhez képest jelennek meg.
#morzsa ul li a: után (tartalom: ""; border-top: 40px folytonos piros; border-bottom: 40px solid red; border-left: 40px solid blue; position: abszolút; jobb: -40px; top: 0; )
Most létrehozunk egy olyan chevron effektust a CSS -ben, amely korábban csak háttérképpel volt elérhető. A: after választógombbal hozzon létre egy további, egyedileg stílusos elemet. A háromszög alakzat különböző CSS szegélyek használatával jön létre, így, amint az az előző képen is látható, kék háromszög hozható létre a felső és alsó szegélyek alkalmazásával, amelyek metszik az átfedési területet. Ezek a szegélyek az egyértelműség kedvéért piros színűek, de ha átlátszóak, kék háromszöget kapunk. Ezt a szegélyhatást ezután abszolút pozicionálással a helyére mozgatják.
Border-top: 40 képpontos szilárd átlátszó; szegély-alsó: 40 képpont szilárd, átlátszó; border-left: 40 képpont szilárd # 3498db;
A szegélyhatás a megfelelő színértékekkel létrehozza a kívánt háromszöget, amely a zsemlemorzsának a népszerű chevron formát adja.
# morzsa ul li a: előtt (tartalom: ""; border-top: 40px szilárd átlátszó; border-bottom: 40px solid átlátszó; border-left: 40px solid # d4f2ff; position: abszolút; bal: 0; felül: 0; )
Ugyanezeket az elveket alkalmazva egy másik háromszög alakzat alkalmazható a zsemlemorzsa bal oldalán. Ezúttal állítsa be ugyanazt a szegélyszínt, mint a háttérszínt, hogy elrejtse a link kék háttérszínének részeit.
Párnázás: 30px 40px 0 80px;
Ahogy a linkeket hozzáadják a HTML -hez, a háromszögletű CSS szegélyhatásnak és az enyhe jobb oldali kitöltésnek köszönhetően a navigációs sorrend növekszik, érdekes chevronokkal elválasztva.
#morzsa ul li: első gyermek a (szegély-bal-bal-sugár: 10 képpont; szegély-bal-alsó-sugár: 10 képpont;) #morzsa ul li: első gyermek a: előtt (kijelző: nincs;) #morzsa ul li: utolsó gyermek a (kitöltés-jobb: 80 képpont; határ-jobb-jobb-sugár: 10 képpont; szegély-alsó-jobb-sugár: 10 képpont;) #morzsa ul li: utolsó gyermek a: után (kijelző: nincs ;)
A teljes navigációs tömb tovább formázható, ha eltávolítja a háromszög hatást az első és utolsó tétel a: first-child és: last-child szelektorok használatával, majd a border-sugar tulajdonság segítségével enyhén lekerekítheti a sarkokat.
# morzsa ul li a: lebeg (háttér: # fa5ba5;) # morzsa ul li a: lebeg: után (szegély-bal-szín: # fa5ba5;)
Nincs más hátra, mint a lebegési effektust alkalmazni a linkekre. Ne felejtse el megváltoztatni a border-left-color tulajdonság értékét a háromszög effektushoz lebegő állapotban, hogy a teljes panoráma színe megváltozzon.
Fordítás - Kötelesség
Üdv kedves olvasók. Ezen a napon megtanulunk alkotni szép zsemlemorzsa(zsemlemorzsa) a szokásos webhelyekhez, valamint a WordPress blogokhoz... Azt tanácsolom, hogy ne hagyja ki ezt a pillanatot, mert a morzsák mutatják az utat a cikkhez vagy az oldalon található információkhoz, ami nagyban megkönnyíti a webhely navigálását, valamint további belső linkeket.
CSS
ul (margó: 0; kitöltés: 0; lista-stílus: nincs;)Minden megtörtént, az első nem lényegtelen lépés. Most tegyük hozzá ugyanazt csodálatos kilátás morzsáinkat.
Első példa
Az elem megjelenése három részből fog állni, amelyek egy egész részhez kapcsolódnak. Hogy világosabb legyen, nézze meg az alábbi ábrát:
# zsemlemorzsa-egy (háttér: #eee; border-width: 1px; border-style: solid; border-color: # f5f5f5 # e5e5e5 #ccc; border-sugar: 5px; box-shadow: 0 0 2px rgba (0, 0,0, .2); túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-egy li (úszó: bal;) # zsemlemorzsa-egy a (kitöltés: .7em 1em .7em 2em; úszó: bal; szöveg- dekoráció: nincs; szín: # 444; pozíció: relatív; text-shadow: 0 1px 0 rgba (255,255,255, .5); background-color: #ddd; background-image: linear-gradiens (jobbra, # f5f5f5, # ddd);) # zsemlemorzsa-egy li: első gyermek a (padding-left: 1em; border-sugar: 5px 0 0 5px;) # zsemlemorzsa-a a: lebegés (háttér: #fff;) # zsemlemorzsa-egy a :: után, # zsemlemorzsa-egy a :: előtt (tartalom: ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-top: 1,5em szilárd átlátszó; border-bottom: 1,5em szilárd átlátszó; szegély-bal: 1em szilárd; jobb: -1em;) # zsemlemorzsa-egy a :: után (z-index: 2; szegély-bal-szín: #ddd;) # zsemlemorzsa-egy a :: előtt ( border-left-color: # ccc; jobbra: -1,1em; z-index: 1; ) # panírmorzsa-egy a: lebegés :: után (szegély-bal-szín: #fff;) # zsemlemorzsa-egy .áram, # zsemlemorzsa-egy .áram: lebegés (betűsúly: félkövér; háttér: nincs;) # zsemlemorzsa-egy .áram :: után, # zsemlemorzsa-egy .áram :: előtt (tartalom: normál;)
Második példa
Itt is, mint az első példában, az elem három részből áll, amelyek egy részhez vannak kötve CSS használatával.
# két zsemlemorzsa (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-két li (úszó: bal; margó: 0 .5em 0 1em;) # zsemlemorzsa-két a (háttér: #ddd; kitöltés: .7em 1em ; float: left; text-decoration: none; color: # 444; text-shadow: 0 1px 0 rgba (255,255,255, .5); position: relatív;) # zsemlemorzsa-két a: lebegés (háttér: # 99db76;) # zsemlemorzsa-két a :: előtt (tartalom: ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-width: 1,5em 0 1,5em 1em; border-style: solid; border- szín: #ddd #ddd #ddd átlátszó; bal: -1em;) # zsemlemorzsa-két a: lebegés :: előtt (szegély-szín: # 99db76 # 99db76 # 99db76 átlátszó;) # zsemlemorzsa-két a :: után (tartalom : ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-top: 1,5em szilárd átlátszó; border-bottom: 1,5em szilárd átlátszó; border-left: 1em solid #ddd; right: -1em;) # zsemlemorzsa-kettő a: lebegés :: után (szegély-bal-szín: # 99db76;) # zsemlemorzsa-két .áram, # zsemlemorzsa-kettő .current: lebegés (font-weight ht: félkövér; háttér: nincs; ) # zsemlemorzsa-két .áram :: után, # zsemlemorzsa-kettő .áram :: előtt (tartalom: normál;)
Harmadik példa
A harmadik tárgyban az elemek két részből állnak.
# zsemlemorzsa-három (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-három li (úszó: bal; margó: 0 2em 0 0;) # zsemlemorzsa-három a (kitöltés: .7em 1em .7em 2em; float: bal; szöveg-dekoráció: nincs; szín: # 444; háttér: #ddd; pozíció: relatív; z-index: 1; szöveg-árnyék: 0 1px 0 rgba (255,255,255, .5); határ-sugár: .4em 0 0 .4em;) # zsemlemorzsa-három a: lebegés (háttér: # abe0ef;) # zsemlemorzsa-három a :: után (háttér: #ddd; content: ""; magasság: 2,5em; margin-top: -1,25em ; pozíció: abszolút; jobb: -1em; felül: 50%; szélesség: 2,5em; z-index: -1; transzformáció: forgatás (45 fok); határ-sugár: .4em;) # zsemlemorzsa-három a: lebegés: : után (háttér: # abe0ef;) # zsemlemorzsa-három .áram, # zsemlemorzsa-három .áram: lebeg (font-súly: félkövér; háttér: nincs;) # zsemlemorzsa-három .áram :: után (tartalom: normál; )
Negyedik példa
# zsemlemorzsa-négy (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-négy li (úszó: bal; margó: 0 .5em 0 1em;) # zsemlemorzsa-négy a (háttér: #ddd; kitöltés: .7em 1em ; float: left; text-decoration: none; color: # 444; text-shadow: 0 1px 0 rgba (255,255,255, .5); position: relatív;) # zsemlemorzsa-négy a: lebegés (háttér: # efc9ab;) # zsemlemorzsa-négy a :: előtte, # zsemlemorzsa-négy a :: után (tartalom: ""; pozíció: abszolút; felső: 0; alsó: 0; szélesség: 1em; háttér: #ddd; átalakítás: ferde (-10deg );) # zsemlemorzsa-négy a :: előtt (balra: -5em; szegélysugár: 5 képpont 0 0 5 képpont;) # zsemlemorzsa-négy a: lebegés :: előtt (háttér: # efc9ab;) # zsemlemorzsa-négy a :: után (jobbra: -5em; határ-sugár: 0 5 képpont 5 képpont 0;) # zsemlemorzsa-négy a: lebegés :: után (háttér: # efc9ab;) # zsemlemorzsa-négy .áram, # zsemlemorzsa-négy .áram : lebegés (betűtípus-súly: félkövér; háttér: nincs;) # zsemlemorzsa-négy .áram :: után, # zsemlemorzsa-négy .áram :: előtt (tartalom: normál;)
Példa
Ennyi, szerintem nagyon stílusosak és ugyanakkor egyszerű morzsák. Sőt, nincsenek képek, így gyorsabban töltődnek be.
A stílusok minden példája a címkét használja lebeg, amely megváltoztatja az elem színét, akkor is, ha nem tetszik valamelyik bemutatott szín, könnyen kicserélheti azt a sajátjára.
Most itt az ideje, hogy továbblépjünk a második részre, nevezetesen az egyik példát csatoljuk a miénkhez WordPress blog, menj.
2. rész: Hogyan lehet ezeket a zsemlemorzsákat a WordPress blogjához csatolni
Tehát először le kell töltenünk a bővítményt Breadcrumb NavXT, letöltheti. A plugin letöltése és aktiválása után meg kell adnia néhány beállítást:
A beállítások a paraméterekben találhatók. A lapon Tábornok vonalat kell találni Kenyérhéj elválasztóés távolítsa el az ott található standard értéket, más szóval üresen kell hagynia a mezőt.
Minden, befejeztük a bővítményt, most ki kell választanunk a legjobban tetsző dizájnt. BAN BEN ez az eset a példa ez a stílus lesz:
Ez második példa, amely fent található a cikkben.
Felvesszük és egyszerűen lemásoljuk ezeket a stílusokat, majd hozzáadjuk őket stílus.css A témája, bárhol is tetszik a legjobban, azt tanácsolom, hogy emelje ki a morzsalékstílusok elejét és végét, mert ha a jövőben bármit meg akar változtatni, akkor összezavarodik.
Most hozzá kell adnia a zsemlemorzsát közvetlenül a bloghoz.
A blog admin területén találjuk megjelenés , azután szerkesztő, és válasszon single.php... Ezután adja hozzá a következőt:
Fontos
Kérjük, vegye figyelembe, hogy a morzsák hívásának funkciója a címkék között található akinek azonosítója zsemlemorzsa-kettő, ne felejtse el megváltoztatni ezt az azonosítót arra a példára, amelyet hozzáadott a stílusokhoz. Például, ha ez az első példa (amely fent van), akkor ennek így kell lennie:
Ha a blog sablonja hasonló az enyémhez, abban az értelemben, hogy a háttér szürke, és maga a tartalomblokk fehér, akkor a morzsákat a blokk fölé kell elhelyezni, mint az enyém. Mert oda lehet szállítani új sor ha a név túl hosszú, és hidd el, nem túl szép. :-)
Ez minden. Kedves barátaim, ha bármilyen nehézség merül fel, győződjön meg róla kérdezd meg kommentben... Hamarosan találkozunk.
Az előző cikk „Navigálás a zsemlemorzsában CSS háromszögekkel” leírja a menü létrehozásának módját tiszta CSS, grafika használata nélkül.
A módszer mindenki számára jó, egy dolog kivételével - az ilyen menü támogatása régebbi böngészőkben megkérdőjelezhető. A cikk fordításakor azonban volt egy link a navigáció grafikus használatával történő létrehozásának módjára.
A cikket régen írták, de a módszer abszolút működik. A cikk szerzője Veerle Pieters, maga a bejegyzés pedig „Egyszerű skálázható CSS -alapú zsemlemorzsa” nevet viseli. Az alábbiakban nem is annak szabad fordítását idézem, hanem egy szabad újramondást.
Néhány napja azt a feladatot kaptam, hogy zsemlemorzsa stílusú navigációs menüt készítsek egy webhelyhez, amelyen éppen dolgozom. Nem hiszem, hogy minden webhelyre szükség lenne ilyen menüre, de bizonyos esetekben nagyon hasznos és praktikus.
Ez a példa azonban olyan, mint egy keret, amely kiterjeszthető és alkalmazható a gyakorlatban. A menü a szokásos felsorolásos lista segítségével jön létre
| 1 | ul |
De először nézzük meg a mintát, amellyel dolgozni fogunk:
A menü meglehetősen egyszerű, csakúgy, mint a kód, amellyel elkészítjük.
HTML kód - felsorolás lista ul
- itthon
- Fő szakasz
- Alszakasz
- Al alszakasz
- Az oldal, amelyen éppen tartózkodik
Az összes menüpont linkelt, kivéve az utolsót - „Az oldal, amelyen éppen tartózkodik”. A menü kidolgozása közben azon tűnődtem - vajon a lista a legmegfelelőbb szerkezet a menü létrehozásához? Úgy vélem, hogy a lista használata ebben az esetben nem szigorú szabály, de számomra úgy tűnik, hogy ez a legszemantikusabb és legmegfelelőbb lehetőség.
CSS kód - a menü stílusa
Általános stílusokat állítottunk be a menüben - távolítsuk el a jelölőket, és állítsuk vissza a behúzásokat Firefox böngészők AZAZ:
az egész menü magasságával megegyező tulajdonságon keresztül lebegtetjük -. És mi állítjuk be a szöveg színét. Ezután helyezzük el a link elrendezéséből kivágott háttérképet. Ehhez csak ki kell vágnia magát a „nyilat”:... amit jobbra „tolunk” (100%) és pontosan függőlegesen helyezzük el (50%). Behúzzuk a jobb oldali linket is.
| 1 | párnázás-bal: 15px |
Szinte már minden megtörtént. Marad a stílusok beállítása a link szövegéhez. Távolítsuk el a szabványos aláhúzást, és változtassuk meg a színét:
.morzsa li a: link, .morzsa li a: meglátogatott (szöveg-dekoráció: nincs; szín: # 777;)| 1 | : lebeg |
| 1 | : fókusz |
Munkánk eredményét itt mutatjuk be:
A fordító megjegyzése:
A cikk szerzője amennyire csak lehetséges, leegyszerűsítette a példát és magát a kódot, ha jól értem. Az a tény, hogy a példa egyértelműen lineáris vízszintes gradienst mutat az egyes menüpontokhoz. Ez azonban semmilyen módon nem tükröződött a kódban. Nos, nem probléma - probléma -e lineáris gradiens létrehozása a CSS3 -ban? Maga a feladat kész!
A navigációs navigáció segít a webhely látogatóinak eligazodni a dokumentumok hierarchikus szerkezetében és megtalálni az utat felső szint... Ezért ha a webhely tartalmaz nagyszámú dokumentumokat, akkor azt „zsemlemorzsával” kell ellátni. Ez az oktatóanyag bemutatja a CSS kódot, amellyel különféle tervezési lehetőségeket hozhat létre a kívánt navigációs eszköz számára.
HTML jelölés
A jelölés egyszerű és minimális. Ez rendezetlen listán alapul.
CSS
Először tegyünk egy kis CSS visszaállítást a rendezetlen listánkhoz:
Ul (margó: 0; kitöltés: 0; lista-stílus: nincs;)
A zsemlemorzsák tervezéséhez ál-elemeket fogunk használni.
Első példa
Ez a példa nagyon egyszerű technikát használ. Háromszöget hoz létre a keretben jobbra, ál-elemekkel egymás fölé rakva. A sötét háromszög eltolódik, hogy kerethatást hozzon létre.
# zsemlemorzsa-egy (háttér: #eee; border-width: 1px; border-style: solid; border-color: # f5f5f5 # e5e5e5 #ccc; border-sugar: 5px; box-shadow: 0 0 2px rgba (0, 0,0, .2); túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-egy li (úszó: bal;) # zsemlemorzsa-egy a (kitöltés: .7em 1em .7em 2em; úszó: bal; szöveg- dekoráció: nincs; szín: # 444; pozíció: relatív; text-shadow: 0 1px 0 rgba (255,255,255, .5); background-color: #ddd; background-image: linear-gradiens (jobbra, # f5f5f5, # ddd);) # zsemlemorzsa-egy li: első gyermek a (padding-left: 1em; border-sugar: 5px 0 0 5px;) # zsemlemorzsa-a a: lebegés (háttér: #fff;) # zsemlemorzsa-egy a :: után, # zsemlemorzsa-egy a :: előtt (tartalom: ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-top: 1,5em szilárd átlátszó; border-bottom: 1,5em szilárd átlátszó; szegély-bal: 1em szilárd; jobb: -1em;) # panírmorzsa-egy a :: után (z-index: 2; szegély-bal-szín: #ddd;) # zsemlemorzsa-egy a :: előtt ( border-left-color: #ccc; ri ght: -1,1em; z-index: 1; ) # panírmorzsa-egy a: lebegés :: után (szegély-bal-szín: #fff;) # zsemlemorzsa-egy .áram, # zsemlemorzsa-egy .áram: lebegés (betűsúly: félkövér; háttér: nincs;) # zsemlemorzsa-egy .áram :: után, # zsemlemorzsa-egy .áram :: előtt (tartalom: normál;)
A CSS-alakzatok az elem előtt és után elhelyezett ál-elemek felhasználásával készülnek.
# két zsemlemorzsa (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-két li (úszó: bal; margó: 0 .5em 0 1em;) # zsemlemorzsa-két a (háttér: #ddd; kitöltés: .7em 1em ; float: left; text-decoration: none; color: # 444; text-shadow: 0 1px 0 rgba (255,255,255, .5); position: relatív;) # zsemlemorzsa-két a: lebegés (háttér: # 99db76;) # zsemlemorzsa-két a :: előtt (tartalom: ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-width: 1,5em 0 1,5em 1em; border-style: solid; border- szín: #ddd #ddd #ddd átlátszó; bal: -1em;) # zsemlemorzsa-két a: lebegés :: előtt (border-color: # 99db76 # 99db76 # 99db76 átlátszó;) # zsemlemorzsa-két a :: után (tartalom : ""; pozíció: abszolút; felül: 50%; margin-top: -1,5em; border-top: 1,5em szilárd átlátszó; border-bottom: 1,5em szilárd átlátszó; border-left: 1em solid #ddd; right: -1em;) # zsemlemorzsa-kettő a: lebegés :: után (szegély-bal-szín: # 99db76;) # zsemlemorzsa-két .áram, # zsemlemorzsa-kettő .áram: lebegés (font-weight: bold; háttér: nincs; ) # zsemlemorzsa-két .áram :: után, # zsemlemorzsa-kettő .áram :: előtt (tartalom: normál;)
A border sugarú tulajdonság kerekíti a téglalapok és négyzetek sarkát. A négyzetet elforgatva gyémántot készítenek belőle.
# zsemlemorzsa-három (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-három li (úszó: bal; margó: 0 2em 0 0;) # zsemlemorzsa-három a (kitöltés: .7em 1em .7em 2em; float: bal; szöveg-dekoráció: nincs; szín: # 444; háttér: #ddd; pozíció: relatív; z-index: 1; szöveg-árnyék: 0 1px 0 rgba (255,255,255, .5); határ-sugár: .4em 0 0 .4em;) # zsemlemorzsa-három a: lebegés (háttér: # abe0ef;) # zsemlemorzsa-három a :: után (háttér: #ddd; content: ""; magasság: 2,5em; margin-top: -1,25em ; pozíció: abszolút; jobb: -1em; felül: 50%; szélesség: 2,5em; z-index: -1; transzformáció: forgatás (45 fok); határ-sugár: .4em;) # zsemlemorzsa-három a: lebegés: : után (háttér: # abe0ef;) # zsemlemorzsa-három .áram, # zsemlemorzsa-három .áram: lebeg (font-súly: félkövér; háttér: nincs;) # zsemlemorzsa-három .áram :: után (tartalom: normál; )
Két téglalapot adnak hozzá pszeudoelemek segítségével. Ezután a sarkokat lekerekítik.
# zsemlemorzsa-négy (túlcsordulás: rejtett; szélesség: 100%;) # zsemlemorzsa-négy li (úszó: bal; margó: 0 .5em 0 1em;) # zsemlemorzsa-négy a (háttér: #ddd; kitöltés: .7em 1em ; úszó: bal; szöveg-dekoráció: nincs; szín: # 444; szöveg-árnyék: 0 1px 0 rgba (255,255,255, .5); pozíció: relatív;) # zsemlemorzsa-négy a: lebegés (háttér: # efc9ab;) # zsemlemorzsa-négy a :: előtte, # zsemlemorzsa-négy a :: után (tartalom: ""; pozíció: abszolút; felső: 0; alsó: 0; szélesség: 1em; háttér: #ddd; átalakítás: ferde (-10deg );) # zsemlemorzsa-négy a :: előtt (balra: -5em; szegélysugár: 5 képpont 0 0 5 képpont;) # zsemlemorzsa-négy a: lebegés :: előtt (háttér: # efc9ab;) # zsemlemorzsa-négy a :: után (jobbra: -5em; határ-sugár: 0 5px 5px 0;) # zsemlemorzsa-négy a: lebegés :: után (háttér: # efc9ab;) # zsemlemorzsa-négy .áram, # zsemlemorzsa-négy .áram : lebegés (betűtípus-súly: félkövér; háttér: nincs;) # zsemlemorzsa-négy .áram :: után, # zsemlemorzsa-négy .áram :: előtt (tartalom: normál;)
A CSS3 Breadcrumb Design előnyei
- Nincsenek képek, így könnyen frissíthető és karbantartható.
- Könnyen méretezhető.
- Visszafelé kompatibilis a régebbi böngészőkkel.
Ebben a leckében bemutatjuk a zsemlemorzsa létrehozásának folyamatát a Bootstrap 3 és 4 programban.
Zsemlemorzsák jelölése
A panírmorzsák (navigációs morzsák) olyan navigációs minták, amelyek a felhasználó aktuális pozícióját mutatják a webhelyen. Hierarchikusan szervezett információk megjelenítésére szolgálnak. Például egy online áruházban a "zsemlemorzsa" általában láncolt szakaszok. Segítségükkel a felhasználó meghatározhatja, hogy jelenleg melyik szakaszban van, és lehetővé teszi, hogy többet is menjen a szakaszokra magas szintek, azaz biztosítson egy másik módot a webhelyszerkezetben való navigálásra.
A Bootstrap zsemlemorzsa rendszeresen rendezett lista az osztály zsemlemorzsájával. A listaelem -elválasztó automatikusan hozzáadódik a CSS (bootstrap.min.css) használatával a következő osztályon keresztül:
Zsemlemorzsa> li + li: előtt (szín: #cccccc; tartalom: "/"; kitöltés: 0 5px;)
Példa zsemlemorzsa létrehozására a Bootstrap segítségével.
Kenyérmorzsák formázása a Bootstrap -ban
Még egy példa:
Kenyérhéj az archivált információk között való navigáláshoz
Nem szabványos tervezési lehetőség a zsemlemorzsa számára
Tekintsünk egy példát a következő panír kialakítására:
Példa a kenyérmorzsák kialakítására az oldalon
A zsemlemorzsa létrehozásának folyamata a HTML struktúra és stílus (CSS) fejlesztéséből áll.
CSS zsemlemorzsa:
/ * zsemlemorzsa * / #kenyérmorzsa (lista-stílusú: nincs; kijelző: inline-blokk; padding-left: 0px;) #breadcrumb .icon (font-size: 14px;) #breadcrumb li (float: left;) #breadcrumb li a (szín: #fff; kijelző: blokk; háttér: # cc2eaa; szövegdíszítés: nincs; pozíció: relatív; magasság: 34 képpont; sormagasság: 34 képpont; párnázás: 0 10 képpont 0 5 képpont; szöveg-igazítás: középen; margin-right: 23px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;) #breadcrumb li: first-child a (padding -balra: 15 képpont; -moz-szegély-sugár: 4 képpont ;) #breadcrumb li: last-child a (padding-right: 15px; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0; border-sugár: 0 4px 4px 0;) # navigációs morzsa li: utolsó gyermek a: után (szegély: nincs;) #kenyérmorzsa li a: előtt, #kenyérmorzsa li a: után (tartalom: ""; pozíció: abszolút; felső: 0; szegély: 0 szilárd # cc2eaa; szegély szélessége: 17 képpont 10 képpont; szélesség: 0; magasság: 0; ) #breadcrumb li a: előtt (bal: -20px; border-left-color: átlátszó;) #breadcrumb li a: after (bal: 100%; border-color: átlátszó; border-left-color: #cc2eaa;) #breadcrumb li a: hover (background-color: #a22587;) #breadcrumb li a: hover: before (border-color: #a22587; border-left-color: átlátszó;) #breadcrumb li a: hover: after (border -bal-szín: # a22587;) # kenyérmorzs li a: aktív (háttér-szín: # a22587;) # kenyérmorzsa li a: aktív: előtt (szegély-szín: # a22587; szegély-bal-szín: átlátszó;) # kenyérmorzsa li a: aktív: után (border-left-color: # a22587;) #breadcrumb li.current a (mutató-események: nincs; kurzor: nem engedélyezett; szűrő: alfa (opacitás = 65); -webkit-box -árnyék: nincs; doboz-árnyék: nincs; opacitás: .65;)
A színváltozások a megfelelő CSS -tulajdonságok értékeinek szerkesztésével történnek.
HTML jelölés:
Az aktuális elem megtartása (ha használni fogják a láncban) az aktuális osztály hozzáadásával történik a li elemhez.
