Kecses Breadcrumb navigációs menü kódolása a CSS3-ban
A navigációs menük és a linkek talán a webes elrendezés legfontosabb felületelemei. Ezek az egyetlen értékesítési pont a felhasználók számára utazás oldalak között és kölcsönhatásba léphet a létrehozott tartalommal. A Breadcrumb hasonló funkcionalitást kínál a hozzáadott előnyökkel nyomon követheti aktuális pozícióját. Képes lesz jelenítse meg az összes korábbi hivatkozási útvonalat mivel a felhasználó áthalad a webhely hierarchiáján.
Ebben a bemutatóban egy ragyogó kenyérrúd navigációs menüt fogunk létrehozni néhány CSS3 effektussal. Ezt tesztelték, hogy minden nagyobb CSS3-kompatibilis böngészőben működjön, még a régebbi böngészők, amelyek nem támogatják a CSS3-t, a legtöbb esetben még mindig megfelelően fognak megjelenni.
Mielőtt belevetnénk a kódba, egy kicsit beszélünk a zsákmányunk funkcionalitásáról, teljes ugrásról egy ugrásnál!
A Trail felajánlása
A kenyérpálya nyomvonal nem bonyolultabb, mint bármely más menü. Stílusaink sokkal összetettebb CSS-tulajdonságokat fognak használni, mint a legtöbb példa, de a csupasz csontok sablonja még mindig helyben van, hogy a felhasználókat egy oldalról a másikra vezesse.
Ebben a példában hasonló stílust fogunk létrehozni, mint a Google támogatási menüt. Megtekintheti a Gmail támogatási oldalán található menüket, hogy megismerhessük, hol vagyunk. Végül szeretnénk minden felhasználó számára a legjobb felhasználói élményt nyújtja, függetlenül az operációs rendszerüktől vagy a böngészőprogramjától, így építettem 2 különböző kódpéldány, amelyek támogatják a régebbi böngészők káros degradációját.
Az első az egyedi háttérképek és megfelelő CSS-illesztések. A hover események és az aktív események csak néhány CSS stílussal vannak előkészítve, de a kikapcsolt képeket használó felhasználók nem lesznek képesek ezeket a hatásokat megtapasztalni! Ezért készítettem egy hasonló kinézetű menüt CSS gradiensekkel, lekerekített sarkokkal és doboz árnyékokkal.
Ha ideges vagy mindkét stílus támogatásával, választhat a saját webhelye között. A legtöbb látogató alapértelmezés szerint használja a képeket, de ha pontosabb látogatói adatokat szeretne, ásni fogja a webhelyen található elemzési eszközt.
Elég szavak, ugorjunk be a projektbe! Elkezdjük az alapvető HTML keretrendszer kialakítását, és a különböző stílushatásokba lépünk. Először is le kell töltenie a képet szükséges a projekthez.
Bare-Bones HTML
A dokumentumot a szabványos HTML5 oldal sablon. Ez magában foglalja az alapértelmezett doctype-t, a kapcsolódó CSS-t és az összes alapvető elemet. Az alábbi kódot adtam hozzá, ha saját dokumentumot akarsz elindítani. Ne feledje, hogy ez nem befolyásolhatja, hogyan jelenjen meg a kenyérrúd, ezért, ha kívánja, nyugodtan használhatja a saját oldalt.
Alapértelmezett oldal
Két különböző blokkba osztom a kódot. A képekkel ellátott első blokk kissé másképp épül fel, majd képeink nélküli menüünk. Minden készlet saját ID így könnyebben azonosíthatjuk a tartalmat. Ha Ön is a jQuery rajongója, használhatja a #ID választó manipulálni az összes belső DOM elemet.
Először van egy div az azonosítóval “kenyérmorzsa“. A demófájlban ezt használtam a kód elkülönítésére és az oldalanként történő áthelyezésre néhány hozzáadott margóval. Eltávolíthatod ezt a külső osztót, de mindent át kell alakítanod, hogy illeszkedj az új sablonhoz. Tényleg nem árt elhagyni egy konténert, mert sokkal könnyebb lesz a pozícionálás.
Belsőleg egy rendezetlen listával építettem a kenyeret. Olyan sok egyedi mód van a stílusos HTML listák testreszabására, és a zsemlemorzsák csak egy. Előfordulhat, hogy a kezdeti listaelemet a osztály nak,-nek “első“. Erre szükség van néhány extra párnázáshoz, hogy a menüelemeket sorban tartsák. Ezenkívül egy kicsi span blokk hozzáadásra kerül, így van egy megfelelő bal oldala, amely nem fedi át a háttérképet.
Ezenkívül minden egyes horgonycsatlakozót csökkenő számmal ültetünk be z-index ingatlan. Képek használata minden egyes kapcsolatunk átfedésben van a kenyérrúd nyíl megfelelő megjelenítéséhez. Ennek legegyszerűbb módja az a z-index beállítása így minden link átfedi a következőt. Kezdtem 9 és ott dolgozott, de ha több linkje van a menüben, akkor kezdje meg a magasabb egész számot.
Menü Képek nélkül
Nak nek kecsesen lerombolja a zsemlemorzsát szükségünk van egy másodlagos HTML listaelemekre. Ha egy navigációval próbálkozik, használhatja a jQuery-t a böngészőügynök észleléséhez és az azonosító alkalmazásához. Sajnos ez nem mindig megbízható (bizonyos mobil felhasználók számára). Egy másik megoldás az, hogy tartalmazhat egy IE-specifikus stíluslapot és elrejteni vagy megjeleníteni, hogy melyik menü működik a legjobban - de természetesen ez az opció csak az Internet Explorerre vonatkozik.
breadcrumb2 az új azonosítónkat arra használjuk, hogy a képeket képek nélkül célozzuk meg. Tartsuk ezt a mintát, amit használtam crumbs2 a rendezetlen lista osztálya. Ne feledje, hogy az oka mi van osztályok a maga számára az egyszerűség, hogy ezeket a menüket másolja, Tehát, ha néhány különböző zsemlemorzsát szeretne az oldaladon, ezek az osztályok nem lesznek probléma.
Megtartottuk .első osztály, de hozzáadódik .utolsóosztályba a végleges listaelemre. Képek nélkül nem tudjuk másolni a navigációs menü egyes elemeihez tartozó nyilakat, így néhányat használtam lekerekített sarok a másodlagos menüt. .első osztály és .utolsó manipulálja a határ sugarát a menüpontok szélén, hogy egy igazán hűvös web 2.0 megjelenő stílust hozzon létre.
CSS csúszó háttérképek
Néhány egyszerűbb hatás esetén mindkét zsemlemorzsát összekapcsoltam a tulajdonságok építése során. Ez azért hasznos, mert nemcsak helyet takarít meg, de ha visszajön a stílusok szerkesztéséhez, akkor ez az könnyebb testre szabni a saját megjelenésed.
Mindkettőnek #kenyérmorzsa és # breadcrumb2 Beállítottam list-style: nincs; így minden belső elem nem tartalmaz jelölőket. Hagyhatod ezeket, ha tetszik a hatás, de úgy találtam, hogy a HTML-t fárasztóvá teszik a körülötte való munkavégzéshez, és sokkal könnyebb új ikonok létrehozása. Tehát kezdjük a miénk .morzsa osztály.
.morzsák kijelző: blokk; .crumbs li kijelző: inline; .crumbs li.first bal oldali padding: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: meglátogatott color: # 666; kijelző: blokk; balra lebeg; betűméret: 12px; margin-left: -13px; párnázás: 7px 17px 11px 25px; pozíció: relatív; szöveg-dekoráció: nincs; .crumbs li a background-image: url ('… /img/bg-crumbs.png'); háttér-ismétlés: nincs ismétlés; háttérpozíció: 100% 0; pozíció: relatív; .crumbs li a: hover color: # 333; háttérpozíció: 100% -48px; kurzor: mutató; .crumbs li a: aktív szín: # 333; háttérpozíció: 100% -96px; .crumbs li.first a span height: 29px; szélesség: 3x; szegéllyel: 1px szilárd # d9d9d9; pozíció: abszolút; top: 0px; balra: 0px; Mi állítsa be a rendezetlen listát Blokk így semmi más nem kúszik fel a környéken. Figyelje meg a listaelemeket sorban jelenik meg míg minden egyes horgonycsatlakozó sokkal több helyet biztosít a terjesztésre. Azt akarjuk, hogy a menü összes helyének kattintsunk, így ez szükséges horgonyaink blokkelemekként való felépítése.
Én használtam egy hívott képet bg-crumbs.png a háttérben. Ezt a CSS-ben egyszerű sprite lapnak nevezzük, vagy pedig a tolóajtó technika. Ez azt jelenti, hogy amikor a felhasználó egy linkre kattint, vagy rákattint, a háttérpozíciót a frissített stílus megjelenítéséhez váltjuk. Ez az egyetlen kép a tervek mindegyikét tartalmazza, amire szükségünk van, hogy különböző pozíciókban hozzuk létre a kenyérpiros háttereket, így használhatjuk a background-position a felhasználói interakció alapján áthelyezhető tulajdonság.
Egyéni hatások a CSS3-mal
Az eredeti kenyérburkolat kialakítása sokkal egyszerűbb. Ez észrevehető, hiszen a CSS sok tulajdonsága sokkal alaposabb, mint amennyit elképzelne, de most már csak a CSS3-val foglalkozunk.!
Az egyes stílusok sok helyet foglalnak el, így két kódblokkra bontom őket.
.morzsák2 kijelző: blokk; margin-left: 27px; párnázás: 0; padding-top: 10px; .crumbs2 li kijelző: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: látogatott color: # 666; kijelző: blokk; balra lebeg; betűméret: 12px; párnázás: 7px 16px 7px 19px; pozíció: relatív; szöveg-dekoráció: nincs; határ: 1px szilárd # d9d9d9; határ-jobb szélesség: 0px; .crumbs2 li a background-image: -webkit-gradiens (lineáris, bal alsó, bal felső, szín-stop (0.45, rgb (241,241,241)), színmegállás (0,73, rgb (245,245,245))); háttérkép: -moz-lineáris gradiens (középső alsó, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Internet Explorer 5.5 - 7 * / szűrő esetén: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Internet Explorer 8 * / -ms-szűrő esetén: "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; határ-alsó-jobb sugár: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-sugár: 5px;
A .crumbs2 menü használata CSS gradiensek a háttérhatások másolására. Ha nem ismeri ezeket, nagyon ajánlom a CSS Tricks útmutatóját a CSS3 színátmeneteken, amelyek segítségével hatékonyan használhatja a CSS3 színátmeneteket. A Microsoft és az Opera böngészők néhány további tulajdonságát tartalmazzák, de ezek nem minden esetben támogatottak. Itt nem vettem fel őket a demo kódba - de jó, ha megértem az összes lehetőséget.
-WebKit-gradiens és -moz-lineáris-gradiens a legfontosabb megoldások, amelyek a legtöbb munkát végzik. Az Internet Explorer régebbi verzióinak örökölt kódját is felvettem ez nem garantált minden alkalommal megfelelően megjeleníteni (végül is erős képvisszaadási technikákat használunk). Vegyük észre, hogy a háttér tulajdonságok között mind az RGB, mind a hex színkódokat beállítottam. Ha kényelmesebb vagy, ragaszkodhat az egyik módszerhez vagy a másikhoz.
A határ sugarát a kód csak a másodlagos kenyérrugós navigációnkra vonatkozik. Ez teljes hatással van a teljes kenyérrugó menü jobb és bal felső sarkában. A sáv szinte kiugrik az oldalról - valóban fantasztikus hatás a böngészőkre, amelyek támogatják a stílusokat, de ezek csak az alapértelmezett állapotokra vonatkoznak a linkeinkre. Most építsünk a fent használt képekhez hasonló lebegőhatásokat.
CSS3 határok és árnyékok
Amikor egy felhasználó egy link fölé lép, frissíteni szeretnénk néhány dolgot. Először meg kell sötétítjük az aktív elem felső és alsó szegélyét. Ez látható a képeken is, mind a lebegő, mind az aktív állapotban.
.morzsák2 li a: hover border-top-color: # c4c4c4; szegély-alsó szín: # c4c4c4; háttérkép: -webkit-gradiens (lineáris, bal alsó, bal felső, szín-stop (0.45, rgb (241,241,241)), szín-stop (0,73, rgb (248,248,248))); háttérkép: -moz-lineáris gradiens (középső fenék, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Internet Explorer 5.5 - 7 * / szűrő esetén: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Internet Explorer 8 * / -ms-filter esetén: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; szín: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; doboz-árnyék: 0px 2px 2px # e8e8e8; .crumbs2 li a: aktív border-top-color: # c4c4c4; szegély-alsó szín: # c4c4c4; háttérkép: -webkit-gradiens (lineáris, bal alsó, bal felső, szín-stop (0.45, rgb (224,224,224)), szín-stop (0,73, rgb (235,235,235))); háttérkép: -moz-lineáris gradiens (középső alsó, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Internet Explorer 5.5 - 7 * / szűrő esetén: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Internet Explorer 8 * / -ms-szűrő esetén: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; doboz-árnyék: -1px 1px 1px 0px #dadada betét; -webkit-box-shadow: -1px 1px 1px 0px #dadada betét; -moz-box-shadow: -1px 1px 0px #dadada betét; szín: # 333;
Pontosan ugyanazt a gradiens kódot használom, mint amit korábban használtunk, de ezúttal a színek nagyon különbözőek, ha észrevettük RGB értékünket. Az egyes állapotok sötétítik a szöveg színét # 333, mégis más leírók is kicsit megváltoztak, hogy megfeleljenek a felhasználói parancsoknak.
A lebegőben a fényes dombornyomott hatás amelyhez kapcsolódik sötétített határok megadja az oldal felugró stílusát. Ha rákattint és tart, akkor az aktív állapotba kerül, amely a sötétített háttérgradiens. Ez a hatás a gombok megjelenését eredményezi “sajtolt” az oldalon.
Mi is alkalmazunk box-shadow tulajdonságai az új CSS3 specifikációkból. -webKit, -Moz, és az alapértelmezett stílusokat ugyanazokkal a beállításokkal használja. A lebegő megjeleníti a világos árnyék a kiválasztott link alján jelenik meg. Amikor aktív, az árnyék a felső, a jobb és az alsó határokon lesz kialakítva. Ez a hatás a betétlap kulcsszó hozzáadásra került az egyes doboz-árnyék tulajdonságok sorának végén. Ismét a CSS Tricks a legjobb barátod, egy fantasztikus cikket a doboz-árnyékban, mivel a szintaxisról és annak megfelelő használatáról beszél a CSS3-ban.
Bónusz: több stílus
Az oktatói kód mellett az extra színképeket adaptált színsémákkal egészítettem ki. Az eredeti hátterekből vettem mintát, és az Adobe Photoshop használatával néhány változatot hozhatunk létre, amelyeket Ön saját webhelyére alkalmazhat.
Ezek bónuszfájlok szerepelnek a forrásfájlban amit az .zip archív formátumban letölthet az alábbi részben.
Megnézheti a fenti képet, hogy megismerhesse, hogy miről beszélek. Ha egy speciális színsémára van szüksége, nyissa meg a programot Photoshop> Kép> Beállítások> Hue / Saturation a színséma módosításához, hogy megfeleljen a saját sablonjának, ne feledje ellenőrizze a Színezés opciót a színárnyalat / telítettség panelen, ha a szín egyáltalán nem változott.
Következtetés
Ez a bemutatónak meg kellett volna ismernie néhány újabb CSS3 technikát. Létrehoztunk két, hasonló módon kialakított fantasztikus zsemlemorzót, és úgy építettük fel, ahogyan a régebbi böngészőkben kíméletesen romlik. Emellett felajánlottam a demó kódomat és néhány bónusz képet, amivel játszhatsz.
Különösen tetszik az itt kialakított stílus? Vagy talán kérdése vagy ötlete van az oktatói kód javítására? Kérjük, ossza meg velünk a gondolatait az alábbi vitaterületen, és ne felejtse el letölteni a forrásfájlokat, így játszhat a demóval!
További CSS3 oktatóanyagok
Több CSS3 vágy? Az alábbiakban a CSS3 elméleti és gyakorlati megértését célzó cikkeink találhatók!
- CSS3: RSS hírcsatorna logó létrehozása
- CSS3: Keresés mező létrehozása
- CSS3: Az AJAX kapcsolati űrlap létrehozása
- CSS3: HTML5 / CSS3 weboldalak építése
