A listák hierarchikus felépítésük miatt kényelmesek és rugalmas beállítás nézetben, ezért nem csak a rendeltetésüknek megfelelően használják őket, hanem különféle oldalelemek létrehozására is, mint például navigációs morzsa, oldalszámozás, menük, lapok stb.
A navigációs elemek segítenek a webhelyen való navigálásban, és megmutatják az aktuális oldal pozícióját a webhely többi részéhez képest. Így könnyen feljebb léphet egy szinttel, és megértheti, hogy éppen melyik szekcióban van. Tehát egy műszaki oldal esetében a navigáció a következő lehet (1. ábra).
Rizs. 1. Zsemlemorzsa típusa
Az utolsó szöveg az aktuális oldalra mutat, és nem hivatkozás. Az összes elemet valamilyen szimbólum választja el egymástól, általában nyíl (→), perjel (/), nagyobb, mint jel (>) és hasonlók.
Mivel a design stílusokhoz van rendelve, a HTML kód nagyon tömör. Létrehozunk egy listát, és hozzárendeljük a kenyérmorzsa osztályt, hogy a stílus ne terjedjen át más listákra.
Vegye figyelembe, hogy itt nincsenek elválasztók, ezek a tartalomstílus tulajdonság használatával jelennek meg (1. példa).
1. példa: Zsemlemorzsa készítése
Először is visszaállítjuk a lista összes margóját és behúzását, és vízszintesen sorba állítjuk az elemeket a megjelenítési tulajdonságon keresztül az inline-block értékkel. A jelölőket is eltávolítja, így nem kell szándékosan csinálni. A ::before pszeudo-elem szükséges ahhoz, hogy elválasztót adjon az elemek közé, és szabályozza a megjelenését. A szöveg minden elemhez hozzáadódik, beleértve az elsőt is, amire természetesen nincs szükségünk. Ezért eltávolítjuk a :first-child pszeudoosztállyal, amely a stílust az első elemre alkalmazza
Sok anyagot, például webhelycikkeket, gyakran külön oldalakra osztanak, oldalanként 10-15 cikkel, ami a webhely terhelésének csökkenéséhez vezet. közötti átmenet külön oldalak számozásukon keresztül történik, ahol minden szám hivatkozásként szolgál a megfelelő oldalra. Lehetőség van az összes oldal megjelenítésére, bizonyos számú oldal megjelenítésére, vagy csak a következő és az előző oldalra mutató hivatkozások megjelenítésére. A választott lehetőség a webhely kialakításától és az Ön preferenciáitól függ. Az egyik lehetséges módjaiábrán látható a számozás. 2.
Rizs. 2. Lapozás
Ehhez a számozáshoz ismét egy egyszerű listát használunk, most a pager osztálynál a lista minden eleme az oldalra mutató hivatkozás lesz. Az aktuális oldal kiemeléséhez adjuk hozzá az aktív osztályt (2. példa).
2. példa: Lapozás
Az elemek közötti vonal az elem border-bottom tulajdonságán keresztül történik
Az összes kör mérete pontosan be van állítva, szélességen és magasságon keresztül, ezért két probléma van. Az első az, hogy a link sokkal kisebb, mint maga a kör, és a felhasználónak hiányozni fog; a második - a link a kör tetején található, de nem a közepén. Az első probléma egyszerűen megoldódik - blokkolnia kell a hivatkozásokat, akkor a kör teljes szélességét és magasságát elfoglalják. Ugyanakkor a hivatkozások négyzet alakúak maradnak, és kissé túlmutatnak a színes háttéren. De ez nem látható, és csak akkor válik észrevehetővé, ha az egérmutatót a hivatkozás egyik sarka fölé viszi. A szöveg igazítása a line-height tulajdonság segítségével történik, amelynek értéke megegyezik az elem magasságával. Ez a módszer lehetővé teszi, hogy a szöveget az elem magasságának közepéhez igazítsa, és ez hasznos lesz számunkra a jövőben.
Az oldalon található menü az egyik módja a navigálásnak. A legegyszerűbb lehetőség a vízszintes hivatkozások halmaza, amelyek úgy néznek ki, mint a kenyérmorzsa. A különbség az, hogy a hivatkozások között nincsenek mutatók (3. ábra).
Rizs. 3. Vízszintes menü
Egy ilyen menü létrehozásához az előző példákban használt elveket alkalmazzuk, de a változtatás kedvéért dekoratív változtatásokat végzünk. A menü enyhe színátmenetes, alatta halvány árnyék látható, a menüpontok el vannak különítve függőleges vonal. Maga a vonal nem szabványos, szürke és fehér csíkokból áll, ezért külön adjuk hozzá a saját vonalunkat az elemekhez
3. példa: Vízszintes menü
gradiens be ezt a példát a lineáris gradiens függvénnyel, az árnyék pedig a box-shadow tulajdonsággal kerül hozzáadásra.
Az összetettebb menütípust legördülő menünek nevezzük. Ha a mutatót az elemek fölé viszi, megjelenik egy almenü, amely korábban nem volt látható (4. ábra); amint a mutató eltávolodik a szövegtől, a menü ismét elrejtőzik.
Rizs. 4. Legördülő menü nézet
Ez a menütípus meglehetősen bonyolult az elrendezésben, ezért elemezzük részletesebben. Először egy beágyazott listát készítünk - az első lista elemei a főmenü szövegeként szolgálnak, a második lista az elemen belül található
Most meg kell különböztetnünk a különböző elemek stílusát
/* Kitöltés nullázása és jelölők eltávolítása a listákról */ .menu, .menu ul ( listastílus: nincs; margó: 0; kitöltés: 0; ) .menu ( háttér: linear-gradient(lefelé, #fff, #f1f2f2 ); /* Színátmenet */ szegély: 1px szilárd #999; /* Szegélybeállítások */ kitöltés: 0 5px; /* Margók */ betűtípus: 14px Arial, sans-serif; /* Betűtípus-beállítások */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Menü árnyéka */ ) .menu > li (megjelenítés: inline-block; /* Vízszintes vonal */ jobb oldali szegély: 1 képpont egységes #fff; /* Fehér sor a jobb oldalon */ pozíció: relatív; /* Relatív pozicionálás */ ) .menu a ( szövegdekoráció: nincs; /* Aláhúzás eltávolítása */ szín: #4c4c4c; /* Link színe */ megjelenítése: blokk; /* Hivatkozások blokkolása */ ) .menu > li > a ( kitöltés: 10 képpont 15 képpont; /* margók */ jobb oldali szegély: 1 képpont folytonos #d8d8d8; /* Jobb szürke vonal */ pozíció: relatív; /* Relatív elhelyezés */ z- index : 3; /* Rajzoljon más elemekre */ ) .menu ul ( megjelenítés: nincs; /* Az almenü elrejtése */ )
Az almenüt a display tulajdonságon keresztül elrejtjük, ennek eredményeként a menünek úgy kell kinéznie, mint az ábrán látható. 3. A listákhoz nulla értékeket is hozzáadtunk, ez hasznos lesz számunkra az alelemek hozzáadásakor, plusz relatív pozicionálásról van szó, a z-index nem működik nélküle. És szükségünk van rá, hogy egyes elemeket helyesen ráhelyezzünk másokra.
Ideiglenesen engedélyezheti az almenük megjelenítését és testreszabhatja megjelenésüket.
Menü ul ( pozíció: abszolút; /* Abszolút pozicionálás */ megjelenítés: nincs; /* Az almenü elrejtése */ szélesség: 200 képpont; /* Az almenü szélessége */ háttér: #fff; /* Háttérszín */ doboz-árnyék: 0 0 10px #666; /* Árnyékbeállítások */ ) .menu ul a ( kitöltés: 5px 10px; /* Margók */ ) .menu ul a:hover ( háttér: #008df2; /* Háttérszín */ szín: #fff ; /* Szöveg színe */ )
Marad az almenü megjelenítése, ha az egeret a menüpontok fölé viszi. Ehhez a :hover pszeudoosztályt használjuk, hozzáadva a li-hez.
Menü li:hover ul (megjelenítés: blokk; )
Ez a választó azt mondja, hogy a stílust az elemre kell alkalmazni.
Ezt követően menünk működik, és megjeleníti azt az almenüt, ahol elérhető. Az árnyékokhoz és a megfelelő ráfedésükhöz kapcsolódnak az utolsó díszítő simítások. Az árnyék megfelelő megjelenítéséhez az első szintű menüelemek alatt hozzon létre egy üres pszeudoelemet a ::beforen keresztül, állítson be egy árnyékot, és tegye a hivatkozás alá (itt a z-index és hasznos).
Menü > li:hover::befor ( tartalom: ""; /* Üres pszeudoelem létrehozása */ felül: 0; balra: 0; jobbra: 0; alul: 0; /* A menüelem méretével megegyezik */ doboz- árnyék: 0 5px 10px #666; /* Árnyékbeállítások */ pozíció: abszolút; /* Abszolút pozicionálás */ )
A végső kód a 4. példában látható.
4. példa – Legördülő menü
Üdvözlet. A zsemlemorzsa elég hasznos blokk bármely webhelyen, mert lehetővé teszi az aktuális oldal teljes elérési útját. És ma elmondom, hogyan kell css-ben zsemlemorzsát stílusozni? Nem alkotni, mégpedig rendezni. Általában sok lehetőség van, kettőt érintek.
A html kód a kenyérmorzsát utánozza. Legyen ez így:
Elvileg csak le lehet tenni egy szögletes konzolt, de akkor nem lesz mód a vonal vastagságának szabályozására. Azt javaslom, hogy másként, átalakítások segítségével csináljuk. Itt van a kód, ami ezt megteszi:
Cumbs1 a:not(:last-child):after(
tartalom: "";
kijelző: inline-block
szélesség: 5 képpont
magasság: 5px;
keret-felső: 2px tömör fekete;
szegély-jobb: 2px tömör fekete;
transzformáció: forgatás (45 fok);
margó balra: 5 képpont
}
.cumbs1 a:hover(
szín: narancssárga;
}
Lehet, hogy az Ön számára bonyolult válogatók lesznek, akkor nézze meg ezt a cikket. A lényeg a következő: a pszeudoelem használata (arról, hogy mi ez és hogyan kell használni - ) azután hozzáadja az elválasztónkat az egyes hivatkozások végéhez. Két keretből van kialakítva és 45 fokkal elforgatva. Narancssárga színt is adunk a lebegő hivatkozásokhoz. Itt elvileg, és az összes tervezés.
Ebben az esetben a zsemlemorzsa érdekesebbnek tűnik, például:
Ehhez szükségünk van egy képre és néhány css stílusra:
Cumbs2(
háttér: narancs;
maximális szélesség: 250 képpont
}
.cumbs2 a(
kijelző: inline-block
kitöltés: 7 képpont 0
szín: # 000;
}
.cumbs2 a:not(:last-child)(
háttér: url(arrow.png) no-repeat 100% 50%;
padding-right: 33px;
}
html kódot Nem idézek, mert ugyanaz, mint az első esetben. Hol kezdjem itt? Először is meghatározzuk háttérszínés az egész blokk méretei zsemlemorzsával. Ezután beállítjuk a hivatkozások általános stílusait – blokk-inline típus, behúzás felül és alul, valamint szín.
A következő szakasz a legérdekesebb - a nem pszeudoosztály segítségével kiválasztjuk a blokk összes hivatkozását, kivéve az utolsót, és beállítjuk őket háttérkép arrow.png , nincs ismétlés, a háttér pozíciója középen a magasságban és a legvégén egy hivatkozás szélességében. Az első két hivatkozásnak szüksége van a jobb oldali belső behúzásra, csak a kép elhelyezéséhez. Ha nem lenne ott, a kép belefutna a szövegbe.
Azt hiszem, már kitalálta, hogy a nem álosztály hogyan működik - minden elemet kiválaszt, kivéve a zárójelben feltüntetetteket. Ha valami, a jövőben írok még egy rövid megjegyzést a pszeudoosztály:notokkal való munkáról, ahol minden egyértelműbb lesz. Nos, itt van 2 egyszerű lehetőségek zsemlemorzsa mintákat, amelyeket saját maga is elkészíthet.
ingyenes gyűjtemény HTML és CSS navigációs útvonal navigációs kód példák: egyszerű, érzékeny, többsoros, összecsukott stb. A 2018. februári kollekció frissítése. 3 új elem.
egyszerű css.
Nyugodtan testreszabhatja a saját módján. Színek, méretek, árnyékok, szegélyek stb. Készült Bootstrap.
Játsszon a böngésző méretével, hogy megtudja, hogyan viselkedik, amikor nincs hely számukra.
Ez a példa bemutatja, mi történik, amikor a felhasználó közelebb kerül a Vissza gombhoz. A navigációs morzsák kibővülnek, és lehetővé teszik a felhasználó számára, hogy szinte bárhová navigáljon a kurzusban, miközben csak minimális hatással van a térre.
navigációs útvonalak egyéni CSS-tulajdonságokkal API-ként.
Stas Melnikov készítette
2017. június 15
Adaptív többsoros, tiszta CSS navigációs nyilak.
Glynn Smith készítette
2017. május 30
Demo GIF: Breadcrumbs
HTML és CSS navigációs útvonalak.
Dany Santos készítette
2016. július 15
Material Design kenyérmorzsa, folyamatkövető.
Shyam Chen készítette
2015. július 30
A navigációs útvonalak listája összecsukódott, és az aktuális oldal kivételével csak az előnézeti szöveget jelenítette meg, a teljes szöveggel pedig az egérmutató/fókusz nézetben.
Skye készítette
2015. március 4
Tiszta CSS-re reagáló kenyérmorzsa.
Oliver Knoblich készítette
2014. április 2
Ha, ahogy gondolja, sok anyaggal rendelkezik, akkor ajánlott itt engedélyezni ezt a funkciót. A listastílus nem az, hogy elkerülje a lista fekete pontját vagy más alapértelmezett stílust. Mivel kategóriákba és feltétel nélkül modulokba rendezi, kezdve a kezdőlapés mindez stílusosan van bemutatva. Ebben az anyagban olyan válogatást figyelünk meg, amely ugyanabban a stílusban készült, lapos stílusban.
Itt formában teljesen mások, hogy valakinek nem is kell szerkesztenie, hogy illeszkedjen a dizájnjához, hiszen az tökéletesen beleillik. Most használni fogjuk css kódot hogy az első lista horgonyját állítsa be, és állítsa be az utolsó gyermek horgonyját, hogy az alapértelmezett legyen, így a trilinge ne jelenjen meg a horgony első gyermekhorgonyjában a bal oldalon és az utolsó gyermek horgonyban a jobb oldalon.
1. Világos sárga árnyalatban:
2. Világos paletta zöld tónusokkal:
3. Málna színben
4. Kék palettában készült:
Ez egy egyszerű, egyenes lista lesz, háttérrel, párnázással és más stílussal. Ezt követően minden listahorgony jobb oldalán háromszög alakú struktúrát hozok létre CSS segítségével, a tágabb tulajdonságokkal játszva.
Amint a demóban is látható, ha bármelyik lista horgonyját a panírozó ládákra helyezzük, az olyan hatást ad, amely azt jelenti, hogy meglátogatták vagy ebben a részben szerepelnek.
Vagy elképzelhetjük a hatását, hogy aktív zsemlemorzsaként aktivizáljuk. Mondhatjuk, hogy ezek a css zsemlemorzsa csak zsemlemorzsa, mert én csak a css-t és a css3-at fogom használni a zsemlemorzsa elkészítéséhez.
Kezdjük a telepítést:
A listastílus nem az, hogy elkerülje a lista fekete pontját vagy más alapértelmezett stílust. Minden soron belüli div lista list-inline lesz, hogy vízszintes legyen a css megjelenítéssel: list-inline.
#breadcrumb-isanchogives1 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}
#breadcrumb-isanchogives1 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives1 ul li (
kijelző: inline;
}
#breadcrumb-isanchogives1 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #ffd928;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;
betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;
}
#breadcrumb-isanchogives1 ul li a:after (
tartalom: "";
border-left: 40px tömör #ffd928;
z-index: 1;
#breadcrumb-isanchogives1 ul li a:before (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;
}
#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
kijelző: nincs;
}
#breadcrumb-isanchogives1 ul li:last-child a (
padding-right: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
kijelző: nincs;
}
#breadcrumb-isanchogives1 ul li a:hover (
háttér: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
háttér: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives2 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}
#breadcrumb-isanchogives2 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives2 ul li (
kijelző: inline;
}
#breadcrumb-isanchogives2 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #56e9ae;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;
betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;
}
#breadcrumb-isanchogives2 ul li a:after (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;
border-left: 40px tömör #56e9ae;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;
#breadcrumb-isanchogives2 ul li a:before (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;
border-left: 40px tömör #f2f2f2;
pozíció: abszolút; balra: 0; felső: 0;
}
#breadcrumb-isanchogives2 ul li:first-child a (
}
#breadcrumb-isanchogives2 ul li:last-child a (
padding-right: 80px;
}
#breadcrumb-isanchogives2 ul li a:hover (
háttér: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
háttér: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
keret-bal-szín: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
keret-bal-szín: #49c593;
}
#breadcrumb-isanchogives3 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}
#breadcrumb-isanchogives3 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives3 ul li (
kijelző: inline;
}
#breadcrumb-isanchogives3 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #ff818b;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;
betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;
}
#breadcrumb-isanchogives3 ul li a:after (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
háttér: #ff818b;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;
#breadcrumb-isanchogives3 ul li a:before (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
border-radius:0px 40px 40px 0px;
háttér:#f2f2f2;
pozíció: abszolút; balra: 0; felső: 0;
}
#breadcrumb-isanchogives3 ul li:first-child a (
border-top-bal-sugár: 10px; keret-alul-bal-sugár: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before (
kijelző: nincs;
}
#breadcrumb-isanchogives3 ul li:last-child a (
padding-right: 80px;
szegély-jobb felső sugár: 10 képpont; szegély-jobb alsó-sugár: 10 képpont;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
kijelző: nincs;
}
#breadcrumb-isanchogives3 ul li a:hover (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
háttér: #ea606b;
}
#breadcrumb-isanchogives4 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}
#breadcrumb-isanchogives4 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives4 ul li (
kijelző: inline;
}
#breadcrumb-isanchogives4 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #2b97cc;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;
betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;
}
#breadcrumb-isanchogives4 ul li a:after (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
border-radius:0px 40px 40px 0px;
háttér:#2b97cc;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;
#breadcrumb-isanchogives4 ul li a:before (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
háttér:#f2f2f2;
border-radius:0px 40px 40px 0px;
pozíció: abszolút; balra: 0; felső: 0;
}
#breadcrumb-isanchogives4 ul li:first-child a (
border-top-bal-radius: 0px; border-bottom-bal-radius: 0px;
}
#breadcrumb-isanchogives4 ul li:last-child a (
padding-right: 80px;
határ-jobb felső-sugár: 0px; szegély-jobb alsó-sugár: 0px;
}
#breadcrumb-isanchogives4 ul li a:hover (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
háttér: #207ca8;
}
Ezeknek az azonosítóknak ugyanaz a belső szerkezete, azonosítójuk szerint különböző stílusok választják el őket.
A sok oldalas webhelyeken a navigációs morzsa ( navigációs útvonal) nagyban segítheti a látogatókat a navigációban hierarchikus struktúra dokumentumokat, és jelezze a felhasználók aktuális tartózkodási helyét az oldalon. A használhatóság szempontjából a navigációs útvonal csökkentheti azon lépések számát, amelyeket a látogató megtesz, hogy eljusson az oldal legfelső szintjére.
Mi az a kenyérmorzsa?
Zsemlemorzsa (Navigációs menü, "Zsemlemorzsa", Angol Zsemlemorzsa) egy webhely-navigációs elem, amely a webhelyen keresztül vezető útvonalat képviseli a "gyökerétől" az aktuális oldalig, amelyen a felhasználó tartózkodik.
A "zsemlemorzsa" elnevezés ironikus utalás a "Sansel és Gretel" című német tündérmesére, amelyben a gyerekek, amikor másodszor vitték őket az erdőbe, nem találtak vissza, mert ezúttal apró kavicsok helyett. zsemlemorzsát hagytak maguk után, ezt követően erdei madarak csipkedték meg.
Általában navigációs útvonalakat láthat azokon a webhelyeken, amelyek hierarchikus sorrendben vannak elhelyezve sok tartalommal. A legegyszerűbb formában a navigációs útvonal vízszintes szöveges hivatkozásokként és elválasztott karakterekként (> -"nagyobb") jelenik meg, amely az oldal szintjét jelzi a többi oldalhoz képest.
Használja a zsemlemorzsát nagy webhelyekhez és hierarchikus oldalszervezésű webhelyekhez.
A navigációs útvonalat nem szabad olyan testvérwebhelyekhez használni, amelyek nem rendelkeznek logikai hierarchiával vagy csoportosítással.
Egy nagyszerű módja annak meghatározására, hogy egy webhely számára előnyös lenne-e a navigációs útvonal használata, ha létrehoz egy webhelytérképet vagy diagramot, amely a webhely navigációs architektúráját ábrázolja, majd elemzi, hogy a navigációs útvonalak megkönnyítik-e a felhasználók számára a kategóriákon belüli és a kategóriák közötti navigálást.
A hierarchikus navigációt úgy kell tekinteni, mint kiegészítő funkció, és nem helyettesítheti a hatékony elsődleges navigációs menüt. Ez egy másodlagos navigációs séma, amely lehetővé teszi a felhasználók számára, hogy megállapítsák, hol vannak és vannak alternatív módon webhely navigáció.
Három főtípusú zsemlemorzsa.
Hely alapú
A hely alapján a navigációs útvonal megmutatja a felhasználónak, hogy hol tart a webhelyhierarchiában.Jellemzően többszintű (jellemzően kettőnél több) navigációs struktúrákhoz használatosak.Az alábbi példában (tólsitepoint ), a bal oldali oldalon minden szöveges hivatkozás egy szinttel feljebb van.
Tulajdon alapú
A tulajdonságalapú navigációs útvonalak egy adott oldal attribútumait tükrözik.
út alapú
Megmutatják a felhasználó által az aktuális oldalhoz vezető utat. Ez az útvonal dinamikus. Ugyanannak az oldalnak különböző címei lehetnek.
A kenyérmorzsát elsősorban arra használják, hogy biztosítsák a felhasználókat további pénzeszközök webhely navigáció.A nagy többszintű weboldalakon az útvonal-vizualizációt kínálva meglehetősen egyszerű átmenetet biztosíthat a felhasználó számára a magasabb szintű kategóriákba.
Csökkenti a kattintások vagy műveletek számát a magasabb szintű oldalakra való visszatéréshez
A böngésző Vissza gombjának vagy az elsődleges webhely-navigációnak a használata helyett a felhasználók navigációs útvonalak segítségével navigálhatnak vissza magasabb kategóriákba, miközben kevesebb kattintást hajtanak végre.
Általában ne tömítse el a képernyőt
Általában vízszintes tájolásúak, ezért nem foglalnak sok helyet az oldalon.
Csökkentse a visszafordulási arányt
A navigációs elemek arra ösztönözhetik az új látogatókat, hogy böngésszenek a webhely többi oldalán. Például a felhasználó ezen keresztül megy az oldalra Google kereső, látja a fent közzétett kategóriákat, és érdekelheti. Ez viszont csökkenti a webhely visszafordulási arányát.
A zsemlemorzsa könnyen használható. Mielőtt azonban végrehajtaná őket a webhelyen, mérlegelnie kell néhány olyan hibát, amelyeket el kell kerülni.
Zsemlemorzsa használata, amikor nem szükséges
Gyakori hiba, hogy zsemlemorzsát használnak, ha ennek semmi haszna nincs.
A fenti példában túl sok navigációs lehetőséget figyelhetünk meg, amelyek meglehetősen közel vannak egymáshoz: elsődleges navigáció, navigációs útvonal és másodlagos navigáció.
A navigációs elemek használata elsődleges navigációként
Mint korábban említettük, a zsemlemorzsát úgy kell használni további segítség a navigációhoz.
navigációs útvonal használata, ha az oldalak több kategóriával rendelkeznek
Zsemlemorzsa van lineáris szerkezet, ezért nehéz lesz használni őket, ha az oldalakat nem lehet egyértelmű kategóriákra osztani.Annak eldöntése, hogy használja-e a navigációs útvonalat, nagyban függ attól, hogyan állítja be a hierarchikus webhelyet.Alacsony oldalszinten a navigációs útvonal használata nem hatékony, pontatlan és zavaró a felhasználó számára.
A navigációs láncok tervezésekor felmerülhet néhány kérdés. Például:
Milyen karaktert kell használni a hivatkozások elválasztásához?
A hivatkozások navigációs morzsában történő elválasztásának leggyakoribb és legismertebb szimbóluma a nagyobb, mint szimbólum (>).
A jobb sarok (") és a perjelek (/) jelzésére idézőjeleket is használhat.
A választás magától a webhelytől és a használt lánc típusától függ.Például, ha a navigációs útvonalban található hivatkozások nem állnak hierarchikus viszonyban egymással, előfordulhat, hogy a „nagyobb, mint >” szimbólum használata nem adja meg pontosan a jelentésüket.
Milyenek legyenek?
Nem szeretné, hogy a kenyérmorzsa uralja az oldalt.Kiegészítő segítségként kell őket használni a felhasználók számára (a kényelem kedvéért), ezért úgy is méretezni kell őket, hogy ehhez illeszkedjenek, és ezt a funkciót helyesen közvetítsék a felhasználók felé - legyenek kisebbek vagy kevésbé észrevehetők, mint az elsődleges menünavigáció.
A megtett távolság méretezésekor jó hüvelykujjszabály az, hogy aznem kellene legyen az első olyan elem, amely felkelti a felhasználó figyelmét az oldalon.
Hol legyen a zsemlemorzsa?
Vízszintes menü használata esetén a kenyérmorzsa általában az oldal tetején, a fő navigációs menü alatt jelenik meg.
Az alábbiakban a 2002 májusában összegyűjtött statisztikák láthatók a legjobb 75 e-kereskedelmi webhelyről.
95% - vízszintes
5% függőleges
Most, hogy foglalkoztunk azzal, hogy ki, hogyan, mikor és miért használja a kenyérmorzsát, vessünk néhány példát arra, hogyan használják a kenyérmorzsát a webhelyeken.
A "zsemlemorzsa" klasszikus használata
Egyéb szimbólumok használata
