Հացի փշրանքներ css3. Breadcrumb դիզայն՝ հիմնված CSS3-ի վրա: Նոր տարրերի ավելացում

Բազմաթիվ էջեր ունեցող կայքերում հացի փշրանքները ( breadcrumb նավարկություն)կարող է մեծապես օգնել այցելուներին կողմնորոշվել փաստաթղթերի հիերարխիկ կառուցվածքում և նշել օգտատերերի ներկայիս գտնվելու վայրը կայքում: Օգտագործելիության տեսանկյունից՝ հացի փշրանքները կարող են նվազեցնել այն քայլերի քանակը, որոնք այցելուները պետք է կատարեն՝ իրենց ճանապարհը դեպի էջի վերին մակարդակ գտնելու համար:

Ի՞նչ է հացի փշրանքը:

Հացի փշրանքներ (Նավիգացիոն մենյու, «Հացի փշրանքներ», անգլերեն Հացի փշրանքներ) - վեբկայքի նավիգացիոն տարր, որը ներկայացնում է կայքի միջով անցնող ուղին իր «արմատից» մինչև ընթացիկ էջը, որտեղ գտնվում է օգտատերը:

«Հացի փշրանքները» վերնագիրը հեգնական հղում է գերմանական «Հենզելն ու Գրետելը» հեքիաթին, որտեղ երեխաները, երբ նրանց երկրորդ անգամ տանում էին անտառ, չէին կարողանում գտնել հետդարձի ճանապարհը, քանի որ այս անգամ փոքր խճաքարեր նրանք թողել են հացի փշրանքներ, որոնք այնուհետև ծակել են անտառի թռչունները:

Սովորաբար դուք կարող եք դիտել հացի փշրանքները շատ բովանդակությամբ կայքերում, որոնք դասավորված են հիերարխիկ կարգով: Ամենապարզ ձևն այն է, երբ հացահատիկները ներկայացվում են որպես հորիզոնական տեքստային հղումներ և առանձնացված նշաններ (> -«մեծ քան»), որոնք ցույց են տալիս այդ էջի մակարդակը այլ էջերի համեմատ:

Ե՞րբ պետք է օգտագործել Breadcrumbs:

Օգտագործեք հացաթխման հետք խոշոր կայքերի և էջերի հիերարխիկ կազմակերպմամբ կայքերի համար:

Breadcrumbs-ը չպետք է օգտագործվի մեկ մակարդակի կայքերի համար, որոնք չունեն որևէ տրամաբանական հիերարխիա կամ խմբավորում:

Հիանալի միջոց է որոշելու, թե արդյոք կայքը կշահի breadcrumbs-ի օգտագործումից, կայքէջի քարտեզ կամ դիագրամ ստեղծելն է, որը ներկայացնում է կայքի նավիգացիոն ճարտարապետությունը, այնուհետև վերլուծել, թե արդյոք հացաթխումները թույլ են տալիս օգտվողին հեշտությամբ նավարկել կատեգորիաների ներսում և միջև:

Հիերարխիկ նավարկությունը պետք է համարվի լրացուցիչ հատկություն և չպետք է փոխարինի արդյունավետ առաջնային նավիգացիոն ընտրացանկին: Սա երկրորդական նավիգացիոն սխեման է, որը թույլ է տալիս օգտատերերին որոշել, թե որտեղ են գտնվում և հանդիսանում է կայքում նավարկելու այլընտրանքային միջոց:

Հացի փշրանքների տեսակները

Կան երեք հիմնական«հացի փշրանքների» տեսակ.

Հիմնվելով գտնվելու վայրի վրա

Տեղադրության վրա հիմնված հացահատիկները օգտվողին ցույց են տալիս, թե որտեղ են նրանք գտնվում կայքի հիերարխիայում:Դրանք սովորաբար օգտագործվում են նավիգացիոն կառույցների համար, որոնք ունեն բազմաթիվ մակարդակներ (սովորաբար ավելի քան երկու մակարդակ):Ստորև բերված օրինակում (իցSitePoint ), էջի յուրաքանչյուր տեքստային հղում, որը գտնվում է ձախ կողմում, մեկ մակարդակ բարձր է:

Հատկությունների հիման վրա

Հատկությունների վրա հիմնված հացահատիկները արտացոլում են որոշակի էջի ատրիբուտները:

Ուղու վրա հիմնված

Նրանք ցույց են տալիս օգտատերի անցած ճանապարհը՝ ընթացիկ էջ հասնելու համար: Այս ուղին դինամիկ է: Նույն էջը կարող է ունենալ տարբեր հասցեներ:

Breadcrumbs-ի օգտագործման առավելությունները

Նրանք կարող են օգնել օգտվողին

Breadcrumbs-ը հիմնականում օգտագործվում է օգտատերերին կայքում նավարկելու լրացուցիչ միջոցներ տրամադրելու համար:Խոշոր, բազմամակարդակ կայքերում անցած ուղու վիզուալիզացիա առաջարկելը կարող է օգնել օգտվողին բավականին հեշտությամբ նավարկելու ավելի բարձր մակարդակի կատեգորիաներ:

Նվազեցնում է ավելի բարձր մակարդակի էջեր վերադառնալու համար սեղմումների կամ գործողությունների քանակը

Բրաուզերի հետադարձ կոճակի կամ կայքի հիմնական նավիգացիան օգտագործելու փոխարեն օգտատերերը կարող են նավարկվել դեպի վերին կատեգորիաներ՝ օգտագործելով breadcrumbs՝ ավելի քիչ կտտոցներով:

Սովորաբար էկրանը մի խցանեք

Նրանք սովորաբար ունեն հորիզոնական կողմնորոշում և, հետևաբար, շատ տեղ չեն զբաղեցնում էջի վրա:

Նվազեցնել վերադարձի տոկոսադրույքը

Breadcrumbs-ը կարող է հրապուրել նոր այցելուներին՝ թերթելու ձեր կայքի մնացած մասը: Օրինակ՝ օգտատերը Google-ի որոնման միջոցով գնում է էջ, տեսնում է վերևում տեղադրված կատեգորիաները և կարող է հետաքրքրվել: Սա իր հերթին նվազեցնում է կայքի վերադարձի տոկոսադրույքը:

Սխալներ Breadcrumbs-ի օգտագործման ժամանակ

Պաքսիմատ օգտագործելը բավականին պարզ է. Բայց նախքան դրանք իրականացնելը ձեր կայքում, դուք պետք է հաշվի առնեք որոշ սխալներ, որոնք դուք պետք է խուսափեք:

Անհրաժեշտության դեպքում հացի փշրանքների օգտագործումը

Ընդհանուր սխալն այն է, որ հացի փշրանքները օգտագործելն է, երբ դա անելը օգուտ չունի:

Վերոնշյալ օրինակում մենք կարող ենք տեսնել չափազանց շատ նավիգացիոն տարբերակներ, որոնք տեղադրված են միմյանց մոտ՝ առաջնային նավարկություն, հացի փշրանքներ և երկրորդական նավարկություն:

Օգտագործելով հացի փշրանքները որպես ձեր հիմնական նավարկություն

Ինչպես նշվեց ավելի վաղ, հացի փշրանքները պետք է օգտագործվեն որպես նավիգացիոն լրացուցիչ օգնություն:

Օգտագործելով breadcrumbs, երբ էջերը ունեն բազմաթիվ կատեգորիաներ

Breadcrumbs-ն ունեն գծային կառուցվածք, ուստի դրանք դժվար կլինի օգտագործել, եթե ձեր էջերը չկարողանան բաժանել հստակ կատեգորիաների:Որոշել, թե արդյոք օգտագործել հացի փշրանքները, մեծապես կախված է նրանից, թե ինչպես եք ստեղծել ձեր կայքի հիերարխիան:Ցածր էջի մակարդակում հացի փշրանքների օգտագործումն անարդյունավետ է, ոչ ճշգրիտ և շփոթեցնող օգտագործողի համար:

Հացի փշրանքների ձևավորում

Հացաբուլկեղեն մշակելիս կարող են որոշ հարցեր առաջանալ. Օրինակ:

Ինչ նշան պետք է օգտագործվի հղումները բաժանելու համար:

Հացահատիկում հիպերհղումները բաժանելու ընդհանուր և առավել ճանաչելի խորհրդանիշը ավելի մեծ է, քան խորհրդանիշը - (>):

Կարող եք նաև օգտագործել չակերտներ՝ աջ անկյունը (") և առաջ շեղ (/) նշելու համար։

Ընտրությունը կախված է հենց կայքից և ձեր օգտագործած շղթայի տեսակից:Օրինակ, եթե breadcrumbs-ի հղումները հիերարխիկ կապ չունեն միմյանց հետ, ապա ավելի քան > նշանի օգտագործումը կարող է ճշգրիտ չփոխանցել դրանց էությունը:

Ինչպիսի՞ն պետք է լինեն դրանք:

Դուք չեք ցանկանում, որ ձեր հացի փշրանքները գերակշռեն էջը:Նրանք պետք է օգտագործվեն որպես լրացուցիչ օգնություն օգտվողների համար (հարմարության համար), այնպես որ դրանց չափերը նույնպես պետք է համապատասխանեն դրան և ճիշտ փոխանցեն այս գործառույթը օգտվողներին. դրանք պետք է լինեն ավելի փոքր կամ ավելի քիչ նկատելի, քան հիմնական մենյուի նավարկությունը:

Ճանապարհորդության ճանապարհը որոշելիս լավ կանոնն այն է, որ այնչպետք է լինել առաջին տարրը, որը գրավում է օգտատիրոջ ուշադրությունը էջում:

Որտե՞ղ պետք է գտնվեն հացի փշրանքները:

Հացահատիկները սովորաբար հայտնվում են էջի վերևում, հիմնական նավիգացիոն ընտրացանկից ներքև, եթե օգտագործվում է հորիզոնական ընտրացանկ:

Վիճակագրություն

Ստորև բերված են վիճակագրություն, որը հավաքագրվել է 2002 թվականի մայիսին էլեկտրոնային առևտրի 75 առաջատար կայքերի վերաբերյալ:

Շղթայի կողմնորոշում

95% - հորիզոնական

5% ուղղահայաց

Տարրերի միջև բաժանարար (հորիզոնական շղթաների համար)

Վեբ դիզայնում հացաթխման օգտագործման օրինակներ

Այժմ, երբ մենք նայեցինք, թե ով, ինչպես, երբ և ինչու են մարդիկ օգտագործում հացի փշրանքները, մենք կարող ենք դիտել որոշ օրինակներ, թե ինչպես են դրանք օգտագործվում կայքերում:

Հացահատիկի դասական օգտագործումը

Օգտագործելով այլ նշաններ

Եթե ​​կարծում եք, որ շատ նյութ ունեք, ապա խորհուրդ է տրվում միացնել այս գործառույթը: Ցանկի ոճը չի լինի ցուցակի սև կետից կամ այլ ոճից խուսափելը, որը լռելյայն է: Քանի որ այն բաշխում է կատեգորիաների և, իհարկե, մոդուլների՝ սկսած գլխավոր էջից, և այս ամենը ներկայացված է ոճային։ Այս նյութում դուք տեսնում եք ընտրություն, որը պատրաստված է նմանատիպ ոճով, այն հարթ ոճով է:

Նրանք բոլորովին տարբեր են իրենց ձևով, որոնք ինչ-որ մեկին նույնիսկ կարիք չի լինի խմբագրել՝ իրենց դիզայնին համապատասխանելու համար, քանի որ այն հիանալի տեղավորվում է դրա մեջ: Այժմ մենք կօգտագործենք css կոդը, որպեսզի պատրաստենք առաջին ցուցակի խարիսխը և կսահմանենք վերջին երեխայի խարիսխը, որպեսզի այն դառնա լռելյայն, որպեսզի եռանկյունը չհայտնվի առաջին երեխայի խարիսխում ձախ և վերջին խարիսխի համար: երեխա աջ կողմում գտնվող խարիսխի համար:

Հացի փշրանքների պատրաստում

1. Բաց դեղին երանգով.

2. Թեթև գունապնակ կանաչ երանգներով.

3. Ազնվամորու գույնով

4. Պատրաստված է կապույտ գունապնակով.

Սա կլինի պարզ ուղիղ ցանկ՝ ֆոնային և ներդիրներով և որոշ այլ ոճերով: Դրանից հետո ես կստեղծեմ եռանկյուն կառուցվածք յուրաքանչյուր ցուցակի խարիսխի աջ կողմում՝ օգտագործելով CSS՝ խաղալով broder հատկությունների հետ:

Ինչպես տեսնում եք ցուցադրական տարբերակում, երբ մենք ուղղում ենք ցանկի ցանկացած խարիսխ դեպի հացաթխման տուփերը, դա տալիս է այն էֆեկտը, որը կնշանակի այցելել կամ գտնվում են այս բաժնում:

Կամ մենք կարող ենք մտածել դրա ազդեցության մասին որպես ակտիվացնել այն որպես ակտիվ հացի փշրանք: Դուք կարող եք ասել, որ այս հացի փշրանքները css-ը միայն հացի փշրանքներ են, քանի որ ես կօգտագործեմ միայն css-ը և css3-ը այս հացի փշրանքները պատրաստելու համար:

Սկսենք տեղադրումը.

Ցանկի ոճը չի լինի ցուցակի սև կետից կամ այլ ոճից խուսափելը, որը լռելյայն է: Ցանկի յուրաքանչյուր ներդիր div կլինի ցուցակի մեջ, որպեսզի այն դառնա հորիզոնական ցուցակ՝ օգտագործելով css ցուցադրումը. list-inline:

#breadcrumb-isanchogives1 (
տեքստի հավասարեցում. կենտրոն;
margin-top:30px;
}

#breadcrumb-isanchogives1 ul (
ցուցակի ոճը՝ ոչ մի;
Ցուցադրել՝ inline-աղյուսակ;
}
#breadcrumb-isanchogives1 ul li (
ցուցադրում՝ ներկառուցված;
}

#breadcrumb-isanchogives1 ul li a (
ցուցադրում `բլոկ;
բոց: ձախ;
բարձրությունը՝ 50px;
ֆոն՝ #ffd928;
տեքստի հավասարեցում. կենտրոն;
լիցք՝ 30px 40px 0 80px;
պաշտոնը` հարաբերական;
լուսանցք՝ 0 10px 0 0;

Տառատեսակի չափը՝ 20px;
տեքստ-դեկորացիա՝ ոչ մի;
գույնը՝ #fff;

}
#breadcrumb-isanchogives1 ul li a:after (
բովանդակությունը՝ «»;

եզրագիծ-ձախ՝ 40px կոշտ #ffd928;
z-ինդեքս՝ 1;

#breadcrumb-isanchogives1 ul li a:fore (
բովանդակությունը՝ «»;
եզրագծով` 40px ամուր թափանցիկ;
եզրագիծ-ներքև՝ 40px ամուր թափանցիկ;

}

#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:fore (
ցուցադրում՝ ոչ մի;
}

#breadcrumb-isanchogives1 ul li:last-child a (
padding-աջ՝ 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
ցուցադրում՝ ոչ մի;
}

#breadcrumb-isanchogives1 ul li a:hover (
ֆոն՝ #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
ֆոն՝ #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
սահման-ձախ-գույն՝ #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
սահման-ձախ-գույն՝ #ff9a2d;
}

#breadcrumb-isanchogives2 (
տեքստի հավասարեցում. կենտրոն;
margin-top:30px;
}

#breadcrumb-isanchogives2 ul (
ցուցակի ոճը՝ ոչ մի;
Ցուցադրել՝ inline-աղյուսակ;
}
#breadcrumb-isanchogives2 ul li (
ցուցադրում՝ ներկառուցված;
}

#breadcrumb-isanchogives2 ul li a (
ցուցադրում `բլոկ;
բոց: ձախ;
բարձրությունը՝ 50px;
ֆոն՝ #56e9ae;
տեքստի հավասարեցում. կենտրոն;
լիցք՝ 30px 40px 0 80px;
պաշտոնը` հարաբերական;
լուսանցք՝ 0 10px 0 0;

Տառատեսակի չափը՝ 20px;
տեքստ-դեկորացիա՝ ոչ մի;
գույնը՝ #fff;

}
#breadcrumb-isanchogives2 ul li a:after (
բովանդակությունը՝ «»;
եզրագծով` 40px ամուր թափանցիկ;
եզրագիծ-ներքև՝ 40px ամուր թափանցիկ;
եզրագիծ-ձախ՝ 40px կոշտ #56e9ae;
դիրքը `բացարձակ; աջ՝ -40px; վերև՝ 0;
z-ինդեքս՝ 1;

#breadcrumb-isanchogives2 ul li a:fore (
բովանդակությունը՝ «»;
եզրագծով` 40px ամուր թափանցիկ;
եզրագիծ-ներքև՝ 40px ամուր թափանցիկ;
եզրագիծ-ձախ՝ 40px կոշտ #f2f2f2;
դիրքը `բացարձակ; ձախ: 0; վերև՝ 0;
}

#breadcrumb-isanchogives2 ul li:first-child a (
}

#breadcrumb-isanchogives2 ul li:last-child a (
padding-աջ՝ 80px;
}

#breadcrumb-isanchogives2 ul li a:hover (
ֆոն՝ #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
ֆոն՝ #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
եզրագիծ-ձախ-գույն՝ #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
եզրագիծ-ձախ-գույն՝ #49c593;
}

#breadcrumb-isanchogives3 (
տեքստի հավասարեցում. կենտրոն;
margin-top:30px;
}

#breadcrumb-isanchogives3 ul (
ցուցակի ոճը՝ ոչ մի;
Ցուցադրել՝ inline-աղյուսակ;
}
#breadcrumb-isanchogives3 ul li (
ցուցադրում՝ ներկառուցված;
}

#breadcrumb-isanchogives3 ul li a (
ցուցադրում `բլոկ;
բոց: ձախ;
բարձրությունը՝ 50px;
ֆոն՝ #ff818b;
տեքստի հավասարեցում. կենտրոն;
լիցք՝ 30px 40px 0 80px;
պաշտոնը` հարաբերական;
լուսանցք՝ 0 10px 0 0;

Տառատեսակի չափը՝ 20px;
տեքստ-դեկորացիա՝ ոչ մի;
գույնը՝ #fff;

}
#breadcrumb-isanchogives3 ul li a:after (
բովանդակությունը՝ «»;
բարձրությունը՝ 80px;
լայնությունը՝ 40px;
ֆոն՝ #ff818b;
դիրքը `բացարձակ; աջ՝ -40px; վերև՝ 0;
z-ինդեքս՝ 1;

#breadcrumb-isanchogives3 ul li a:fore (
բովանդակությունը՝ «»;
բարձրությունը՝ 80px;
լայնությունը՝ 40px;
սահման-շառավիղ:0px 40px 40px 0px;
ֆոն:#f2f2f2;
դիրքը `բացարձակ; ձախ: 0; վերև՝ 0;
}

#breadcrumb-isanchogives3 ul li:first-child a (
սահման-վերև-ձախ-շառավիղ` 10px; սահման-ներքև-ձախ-շառավիղ` 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:fore (
ցուցադրում՝ ոչ մի;
}

#breadcrumb-isanchogives3 ul li:last-child a (
padding-աջ՝ 80px;
սահման-վերև-աջ-շառավիղ` 10px; սահման-ներքև-աջ-շառավիղ` 10px;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
ցուցադրում՝ ոչ մի;
}

#breadcrumb-isanchogives3 ul li a:hover (
ֆոն՝ #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
ֆոն՝ #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
ֆոն՝ #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
ֆոն՝ #ea606b;
}

#breadcrumb-isanchogives4 (
տեքստի հավասարեցում. կենտրոն;
margin-top:30px;
}

#breadcrumb-isanchogives4 ul (
ցուցակի ոճը՝ ոչ մի;
Ցուցադրել՝ inline-աղյուսակ;
}
#breadcrumb-isanchogives4 ul li (
ցուցադրում՝ ներկառուցված;
}

#breadcrumb-isanchogives4 ul li a (
ցուցադրում `բլոկ;
բոց: ձախ;
բարձրությունը՝ 50px;
ֆոն՝ #2b97cc;
տեքստի հավասարեցում. կենտրոն;
լիցք՝ 30px 40px 0 80px;
պաշտոնը` հարաբերական;
լուսանցք՝ 0 10px 0 0;

Տառատեսակի չափը՝ 20px;
տեքստ-դեկորացիա՝ ոչ մի;
գույնը՝ #fff;

}
#breadcrumb-isanchogives4 ul li a:after (
բովանդակությունը՝ «»;
բարձրությունը՝ 80px;
լայնությունը՝ 40px;
սահման-շառավիղ:0px 40px 40px 0px;
ֆոն:#2b97cc;
դիրքը `բացարձակ; աջ՝ -40px; վերև՝ 0;
z-ինդեքս՝ 1;

#breadcrumb-isanchogives4 ul li a:fore (
բովանդակությունը՝ «»;
բարձրությունը՝ 80px;
լայնությունը՝ 40px;
ֆոն:#f2f2f2;
սահման-շառավիղ:0px 40px 40px 0px;
դիրքը `բացարձակ; ձախ: 0; վերև՝ 0;
}

#breadcrumb-isanchogives4 ul li:first-child a (
սահման-վերև-ձախ-շառավիղ` 0px; սահման-ներքև-ձախ-շառավիղ` 0px;
}

#breadcrumb-isanchogives4 ul li:last-child a (
padding-աջ՝ 80px;
սահման-վերև-աջ-շառավիղ` 0px; սահման-ներքև-աջ-շառավիղ` 0px;
}

#breadcrumb-isanchogives4 ul li a:hover (
ֆոն՝ #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
ֆոն՝ #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
ֆոն՝ #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
ֆոն՝ #207ca8;
}

Այս նույնացուցիչներն ունեն նույն ներքին կառուցվածքը, որոնք առանձնացված են տարբեր ոճերով՝ ըստ իրենց նույնացուցիչի: