Meniul
AcasăBrowsere

Cum se proiectează breadcrumbs în CSS? Breadcrumbs în web design: aplicație și exemple Design of breadcrumbs

Pe site-urile cu multe pagini, rubrica ( navigare breadcrumb) poate ajuta foarte mult vizitatorii să navigheze în structura ierarhică a documentelor și să indice locația curentă a utilizatorilor pe site. Din punct de vedere al utilizabilității, breadcrumbs pot reduce numărul de pași pe care trebuie să-i facă un vizitator pentru a-și găsi drumul către nivelul superior al unei pagini.

Ce este pesmet?

Firimituri de pâine (Meniu de navigatie, "Firimituri de pâine", Engleză Firimituri de pâine) - un element de navigare pe site, reprezentând o cale prin site de la „rădăcina” acestuia până la pagina curentă pe care se află utilizatorul.

Titlul „Pesmet” este o referire ironică la basmul german „Hansel și Gretel”, în care copiii, când au fost duși a doua oară în pădure, nu au reușit să-și găsească drumul înapoi, deoarece de data aceasta în loc de pietricele mici. au lăsat în urmă pesmet, ciugulit ulterior de păsările din pădure.

De obicei, puteți vizualiza breadcrumbs pe site-uri care au mult conținut care este aranjat într-o ordine ierarhică. Cea mai simplă formă este atunci când pesmeturile sunt prezentate ca legături text orizontale și simboluri separate (> -"mai mare decât") care indică nivelul acelei pagini în raport cu alte pagini.

Când ar trebui să utilizați pesmet?

Utilizați traseul pesmet pentru site-uri web mari și site-uri web cu organizare ierarhică a paginilor.

Breadcrumb-urile nu trebuie folosite pentru site-uri cu un singur nivel care nu au nicio ierarhie sau grupare logică.

O modalitate excelentă de a determina dacă un site ar beneficia de utilizarea breadcrumb-urilor este să construiți o hartă sau o diagramă a site-ului care să reprezinte arhitectura de navigare a site-ului și apoi să analizați dacă breadcrumb-urile permit utilizatorului să navigheze cu ușurință în și între categorii.

Navigarea ierarhică ar trebui să fie considerată o caracteristică suplimentară și nu ar trebui să înlocuiască un meniu de navigare principal eficient. Aceasta este o schemă de navigare secundară care permite utilizatorilor să stabilească unde se află și este o modalitate alternativă de a naviga pe site.

Tipuri de pesmet

Sunt trei principaletip de "pesmet".

Pe baza locației

Breadcrumb-urile bazate pe locație arată utilizatorului unde se află în ierarhia site-ului.Ele sunt de obicei utilizate pentru structuri de navigație care au mai multe niveluri (de obicei mai mult de două niveluri).În exemplul de mai jos (de laSitePoint ), fiecare link text al paginii care se află în stânga este cu un nivel mai înalt.

Pe baza proprietăților

Breadcrumb-urile bazate pe proprietăți reflectă atributele unei anumite pagini.

Bazat pe cale

Acestea arată calea pe care a urmat-o utilizatorul pentru a ajunge la pagina curentă. Această cale este dinamică. Aceeași pagină poate avea adrese diferite.

Beneficiile folosirii pesmetului

Ele pot ajuta utilizatorul

Breadcrumb-urile sunt folosite în primul rând pentru a oferi utilizatorilor un mijloc suplimentar de navigare pe un site.Pe site-urile mari, cu mai multe niveluri, oferirea unei vizualizări a căii parcurse poate ajuta utilizatorul să navigheze la categoriile de nivel superior destul de ușor.

Reduce numărul de clicuri sau acțiuni pentru a reveni la paginile de nivel superior

În loc să folosească butonul Înapoi al browserului sau navigarea principală a unui site web, utilizatorii pot naviga înapoi la categoriile de top folosind breadcrumb cu mai puține clicuri.

De obicei, nu înfundați ecranul

De obicei, au o orientare orizontală și, prin urmare, nu ocupă mult spațiu pe pagină.

Reduceți rata de respingere

Pesmeturile pot atrage noi vizitatori să răsfoiască restul site-ului dvs. web. De exemplu, un utilizator ajunge la o pagină printr-o căutare pe Google, vede categoriile care sunt postate mai sus și poate deveni interesat. Acest lucru, la rândul său, reduce rata de respingere a site-ului.

Erori la utilizarea Breadcrumbs

Folosirea pesmetului este destul de simplă. Dar înainte de a le implementa pe site-ul dvs., trebuie să luați în considerare unele greșeli pe care ar trebui să le evitați.

Folosind pesmet atunci când nu este necesar

O greșeală comună este să folosiți pesmet atunci când nu există niciun beneficiu în acest sens.

În exemplul de mai sus, putem vedea prea multe opțiuni de navigare care sunt plasate destul de aproape una de alta: navigare primară, breadcrumbs și navigare secundară.

Folosind breadcrumbs ca navigare principală

După cum s-a menționat mai devreme, pesmetul ar trebui să fie folosit ca un ajutor suplimentar pentru navigare.

Utilizarea breadcrumb-urilor atunci când paginile au mai multe categorii

Pesmeturile au o structură liniară, așa că vor fi dificil de utilizat dacă paginile dvs. nu pot fi împărțite în categorii clare.Decizia dacă să utilizați pesmeturile depinde în mare măsură de modul în care v-ați creat ierarhia site-ului.La un nivel scăzut al paginii, folosirea breadcrumbs este ineficientă, inexactă și confuză pentru utilizator.

Design pesmet

Când dezvoltați pesmet, pot apărea câteva întrebări. De exemplu:

Ce simbol ar trebui folosit pentru a separa legăturile?

Simbolul comun și cel mai recunoscut pentru separarea hyperlinkurilor în pesmet este simbolul mai mare decât - (>).

De asemenea, puteți utiliza ghilimele pentru a indica un colț din dreapta (") și o bară oblică (/).

Alegerea depinde de site-ul în sine și de tipul de lanț pe care îl utilizați.De exemplu, dacă legăturile din breadcrumb nu au o relație ierarhică între ele, este posibil ca utilizarea simbolului mai mare decât > să nu transmită cu exactitate esența lor.

Ce ar trebui să fie?

Nu vrei ca pesmeturile tale să domine pagina.Ele ar trebui să fie utilizate ca un ajutor suplimentar pentru utilizatori (pentru comoditate), astfel încât dimensiunea lor ar trebui să se potrivească și cu aceasta și să transmită corect această funcție utilizatorilor - ar trebui să fie mai mici sau mai puțin vizibile decât navigarea prin meniul principal.

O regulă de bază bună atunci când se determină distanța parcursă este că aceastanu ar trebui fi primul element care atrage atenția utilizatorului pe pagină.

Unde ar trebui să fie amplasat pesmetul?

Pesmeturile apar de obicei în partea de sus a paginii, sub meniul principal de navigare, dacă este utilizat un meniu orizontal.

Statistici

Mai jos sunt statistici colectate în mai 2002 pe 75 de site-uri de comerț electronic de top.

Orientarea lanțului

95% - orizontală

5% pe verticală

Separator între elemente (pentru lanțuri orizontale)

Exemple de utilizare a pesmeturilor în web design

Acum că ne-am uitat la cine, cum, când și de ce oamenii folosesc pesmet, putem să vedem câteva exemple despre cum sunt folosite pe site-uri web.

Utilizarea clasică a pesmetului

Folosind alte simboluri

Navigarea prin breadcrumb îi ajută pe vizitatorii site-ului să navigheze în structura ierarhică a documentelor și să-și găsească drumul către nivelul superior. Prin urmare, dacă site-ul conține un număr mare de documente, atunci acesta trebuie să fie furnizat cu „pesmet”. Această lecție va prezenta codul CSS pentru crearea diferitelor opțiuni de design pentru un astfel de instrument de navigare necesar.

Marcaj HTML

Markup-ul este simplu și minim. Se bazează pe o listă neordonată.

CSS

Mai întâi, să facem o mică resetare CSS pentru lista noastră neordonată:

Ul( marja: 0; umplutură: 0; stil listă: niciunul; )

Vom folosi pseudo-elemente pentru a ne proiecta pesmeturile.

Primul exemplu

Acest exemplu folosește o tehnică foarte simplă. Un triunghi este creat pe cadrul din dreapta folosind pseudo-elemente plasate unul deasupra celuilalt. Triunghiul întunecat este decalat pentru a crea un efect de cadru.

#breadcrumbs-one( fundal: #eee; lățime chenar: 1px; stil chenar: solid; culoare chenar: #f5f5f5 #e5e5e5 #ccc; rază chenar: 5px; umbră casetă: 0 0 2px rgba(0, 0,0,.2); overflow: ascuns lățime: 100%; decor: niciunul; poziție: text-shadow: 0 1px 0 rgba(255,255,255,.5); copil a( padding-left: 1em; border-radius: 5px 0 0 5px; ) #breadcrumbs-one a:hover( background: #fff; ) #breadcrumbs-one a ::after, #breadcrumbs-one a::before (conținut: ""; poziție: absolut; sus: 50%; margine-sus: -1,5 em; chenar-sus: 1,5 em transparent solid; chenar-jos: 1,5 em transparent solid; margine-stânga: 1 em solid; dreapta: -1em; ) #breadcrumbs-one a::after( z-index: 2; chenar-left-color: #ddd; ) #breadcrumbs-one a::before( chenar-left-color: #ccc; dreapta: - 1,1 em; indicele z: 1; ) #breadcrumbs-one a:hover::after( chenar-stânga-culoare: #fff; ) #breadcrumbs-one .current, #breadcrumbs-one .current:hover( font-weight: bold; background: none; ) # breadcrumbs-one .current::după, #breadcrumbs-one .current::before( conținut: normal; )

Formele CSS sunt construite folosind pseudo-elemente plasate înainte și după un element.

#pesmet-două( overflow: ascuns; lățime: 100%; ) #pesmet-două li( float: stânga; margine: 0,5em 0 1em; ) #pesmet-două a( fundal: #ddd; umplutură: .7em 1em ; float: text-decor: #444 text-shadow: 0 1px 0 rgba(255,255,255,.5) #breadcrumbs-two a:hover( background: #99db76; ) conținut: „”; ; stânga: -1em; ) #breadcrumbs-two a:hover::before( border-color: #99db76 #99db76 #99db76 transparent; ) #breadcrumbs-two a::after (conținut: ""; poziție: absolut -top: -1.5em; marginea de jos: 1.5em solid transparent; -două .current:hover( font-weight: bold; fundal: niciunul; ) #pesmet-două .current::după, #pesmet-două .current::înainte( conținut: normal; )

Proprietatea border-radius rotunjește colțurile dreptunghiurilor și pătratelor. Pătratul este întors pentru a face un diamant.

#pesmet-trei( preaplin: ascuns; lățime: 100%; ) #pesmet-trei li( float: stânga; margine: 0 2em 0 0; ) #pesmet-trei a( umplutură: .7em 1em .7em 2em; float: text-decor: #444: text-shadow: 0 1px 0 rgba(255,255,255,.5) #breadcrumbs-three( background: #abe0ef; ) trei a::după( fundal: #ddd; conținut: ""; înălțime: 2,5 em; margine-sus: -1,25em ; poziție: absolută; sus: 50%; z-index: -1; margine-rază: . 4em; :after( background: #abe0ef; ) #breadcrumbs-trei .current, #breadcrumbs-trei .current:hover( font-weight: bold; background: none; ) #breadcrumbs-trei .current::after( continut: normal;

Folosind pseudo-elemente, se adaugă două dreptunghiuri. Apoi rotunjesc colțurile.

#pesmet-patru( overflow: ascuns; lățime: 100%; ) #pesmet-patru li( float: stânga; margine: 0,5em 0 1em; ) #pesmet-patru a( fundal: #ddd; umplutură: .7em 1em ; float: text-decor: #444 text-shadow: 0 1px 0 rgba(255,255,255,.5) #breadcrumbs-four( background: #efc9ab; ) #breadcrumbs-four; #pesmet-patru a::după( conținut:""; poziție:absolut; sus: 0; jos: 0; lățime: 1em; fundal: #ddd; transform: înclinat(-10deg ); ) #pesmet-patru a: :before( stânga: -.5em; chenar-rază: 5px 0 0 5px; ) #breadcrumbs-four a:hover::before( fundal: #efc9ab; ) #breadcrumbs-four a ::after( dreapta: -.5em ; border-radius: 0 5px 5px 0; ) #breadcrumbs-four a:hover::after( background: #efc9ab; ) #breadcrumbs-four .current, #breadcrumbs-four .current :hover( font-weight: bold; fundal: nici unul;

Beneficiile designului CSS3 Breadcrumb

  • Fără imagini, atât de ușor de actualizat și întreținut.
  • Usor scalabil.
  • Compatibil invers cu browserele mai vechi.

Listele sunt convenabile datorită structurii lor ierarhice și setărilor flexibile de vizualizare, astfel încât acestea sunt utilizate nu numai pentru scopul propus, ci și pentru crearea diferitelor elemente de pagină, cum ar fi breadcrumbs, numerotarea paginilor, meniuri, file etc.

Firimituri de pâine

Breadcrumbs vă ajută să navigați pe site și să afișați poziția paginii curente în raport cu alte secțiuni ale site-ului. Acest lucru facilitează trecerea la un nivel și înțelegerea secțiunii în care vă aflați acum. Deci, pentru un site tehnic, navigarea poate fi după cum urmează (Fig. 1).

Orez. 1. Tipul de pesmet

Ultimul text indică pagina curentă și nu este un link. Toate elementele sunt separate unele de altele printr-un simbol, de obicei o săgeată (→), o bară oblică (/), un semn mai mare decât (>) și altele asemenea.

Deoarece designul este încredințat stilurilor, codul HTML este foarte laconic. Creăm o listă și îi atribuim clasa breadcrumbs, astfel încât stilul să nu se extindă la alte liste.

  • Acasă
  • Transferuri
  • Cutii de viteze
  • Cutie de viteze cu melc

Rețineți că aici nu există separatori, acestea sunt afișate folosind proprietatea stil de conținut (exemplul 1).

Exemplul 1: Crearea pesmeturilor

Firimituri de pâine

  • Acasă
  • Transferuri
  • Cutii de viteze
  • Cutie de viteze cu melc

Pentru început, resetăm toate marginile și completările listei și aliniem elementele orizontal folosind proprietatea de afișare cu valoarea inline-block . De asemenea, elimină markerii, deci nu este nevoie să faceți acest lucru intenționat. Pseudo-elementul ::before este necesar pentru a adăuga un separator între elemente și pentru a-i controla aspectul. Textul este adăugat la toate punctele, inclusiv la primul, de care, desigur, nu avem nevoie. Prin urmare, îl eliminăm folosind pseudo-clasa :first-child, care aplică stilul primului element

  • .

    O cantitate mare de material, cum ar fi articolele de pe site, este adesea împărțită în pagini separate de 10-15 articole pe pagină, ceea ce duce la o reducere a încărcării site-ului. Tranziția între paginile individuale se face prin numerotarea acestora, unde fiecare număr servește ca link către pagina corespunzătoare. Este posibil să afișați toate paginile, un anumit număr dintre ele sau doar link-uri către paginile următoare și anterioare. Ce opțiune să alegeți depinde de designul site-ului și de preferințele dvs. Una dintre metodele posibile de numerotare este prezentată în Fig. 2.

    Orez. 2. Numerotarea paginilor

    Pentru a face această numerotare, folosim din nou o listă simplă, acum cu clasa pager, fiecare articol din această listă va fi un link către pagină. Pentru a evidenția pagina curentă, adăugați clasa activă (exemplul 2).

    Exemplul 2: numerotarea paginilor

    Paginare

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    Linia dintre puncte este realizată prin proprietatea margine-bottom pentru element