Codarea unui meniu de navigare Graceful Breadcrumb în CSS3
Meniurile de navigare și legăturile sunt, probabil, cele mai importante elemente de interfață pentru un aspect web. Acestea sunt singurele puncte de desfacere pentru utilizatori călătorie între pagini și să interacționați cu tot conținutul pe care l-ați creat. Breadcrumb oferă funcționalități similare cu avantajul suplimentar al urmărirea poziției curente. Veți putea afișați toate căile de legătură anterioare deoarece utilizatorul traversează ierarhia site-ului.
În acest tutorial vom crea un meniu de navigare strălucitor, cu câteva efecte CSS3. Acest lucru a fost testat pentru a funcționa în toate browserele majore compatibile cu CSS3, chiar și browserele mai vechi care nu acceptă CSS3 îl vor face în mod corespunzător în majoritatea cazurilor.
Înainte de a ne scufunda în cod, vom vorbi puțin despre funcționalitatea breadcrumb-ului nostru, tutorialul complet la un salt!
Oferind traseul
Traseul de pescuit nu este mai complex decât orice alt meniu. Stilurile noastre vor utiliza proprietăți CSS mult mai complexe decât cele mai multe exemple, dar șablonul nostru cu oase goale este încă în vigoare pentru a ghida utilizatorii de la o pagină la alta.
În acest exemplu vom crea un stil similar cu meniul de suport Google. Puteți să vizualizați meniul lor pe pagina de suport Gmail pentru a obține o idee despre locul în care mergem. În cele din urmă vrem să oferă cea mai bună experiență utilizatorilor pentru toți utilizatorii, indiferent de sistemul lor de operare sau de software-ul browser-ului, astfel am construit 2 exemple diferite de cod pentru a sprijini degradarea grațioasă a browserelor mai vechi.
Primul este construit folosind imagini de fundal personalizate și propriile alinieri CSS. Toate evenimentele de hover și evenimentele active sunt pre-construite cu doar câteva stiluri CSS, dar utilizatorii care au oprit imaginile nu vor putea să experimenteze aceste efecte! De aceea, am construit un meniu asemănător, cu gradienți CSS, colțuri rotunjite și umbre de cutie.
Dacă sunteți nervos în susținerea ambelor stiluri, puteți alege între ele pentru site-ul dvs. Majoritatea vizitatorilor vor folosi imagini în mod prestabilit, dar sapă prin intermediul instrumentului dvs. de analiză a site-ului web dacă doriți date mai precise despre vizitatori.
Cuvintele destul, hai să intrăm în proiect! Vom începe prin construirea cadrului HTML de bază și trecerea la diferite efecte de styling. Pentru inceput trebuie să descărcați imaginea necesare pentru proiect.
Bare-Bones HTML
Încep să fiu documentul cu șablonul de pagină HTML5 standard. Aceasta include doctype implicit, CSS asociat și toate elementele de bază. Am adăugat codul de mai jos dacă doriți să începeți propriul document în acest fel. Rețineți că nu ar trebui să afecteze felul în care este afișat pescuitul dvs., prin urmare, dacă doriți, utilizați propriul șablon de pagină.
Pagina implicită
Voi împărți codul în două blocuri diferite. Primul bloc cu imagini este construit într-un mod ușor diferit, urmat de meniul nostru fără imagini. Fiecare set este dat propriu ID-ul astfel încât să putem identifica conținutul mult mai ușor. Dacă sunteți, de asemenea, un fan al jQuery puteți utiliza # Selector ID pentru a manipula toate elementele DOM interne.
Mai întâi avem conținând div cu id-ul “breadcrumb“. În fișierul demo am folosit acest lucru pentru a separa codul nostru și pentru a îl deplasa în pagină cu câteva margini adăugate. Ați putea să eliminați această diviziune exterioară, dar va trebui să re-modelați totul pentru a se potrivi cu noul șablon. Chiar nu durează să lăsați un container, deoarece veți putea controla poziționarea mult mai ușor.
Pe plan intern am construit pesmetul folosind o listă neordonată. Există atât de multe modalități unice de personalizare a listelor HTML cu stil, iar pesmeturile sunt doar una dintre ele. S-ar putea să observați că am dat elementul listei inițiale a clasă de “primul“. Acest lucru este necesar pentru unele materiale suplimentare pentru a păstra elementele de meniu în linie. În plus, un mic Span bloc este adăugat astfel încât să avem o margine stângă corespunzătoare, care să nu se suprapună imaginii de fundal.
În plus, fiecare legătură de ancorare este plantată cu un număr descrescător pentru z-index proprietate. Folosind imagini, trebuie să facem asta fiecare dintre legăturile noastre se suprapun pentru a afișa corect săgeata de pescuit. Cea mai ușoară modalitate de a realiza acest lucru este ajustarea indexului z astfel încât fiecare legătură suprapune următoarea. Am început cu 9 și a lucrat de acolo, dar dacă aveți mai multe linkuri în meniul dvs. începeți cu un număr întreg mai mare.
Meniu fără imagini
La grațios ne degradează pesmetul avem nevoie de un set secundar de elemente din lista HTML. Dacă încercați să faceți rezervări într-o singură navigare, puteți utiliza jQuery pentru a detecta agentul de browser și pentru a aplica un ID în consecință. Din păcate, acest lucru nu este întotdeauna de încredere (pentru anumiți utilizatori de telefonie mobilă, de exemplu). O altă soluție este includeți o foaie de stil specifică IE și ascunde sau afișează ce meniu funcționează cel mai bine - dar, desigur, această opțiune este numai pentru Internet Explorer.
breadcrumb2 este noul nostru ID folosit pentru a viza meniul fără imagini. Ținând cont de acest model pe care l-am folosit crumbs2 ca clasă pentru lista neordonată. Rețineți că motivul pe care îl folosim clase este pentru ei simplitatea de a duplica aceste meniuri, astfel încât atunci când doriți câteva pagini de pescuit diferite pe pagina dvs., cu aceste clase acest lucru nu va deveni niciodată o problemă.
Am păstrat-o .primul dar suplimentar anexat .ultimulclasă pe elementul listei finale. Fără imagini, nu putem duplica săgețile pentru fiecare element din meniul de navigare, așa că am folosit câteva colturi rotunjite pentru a alimenta meniul secundar. .primul clasă și .ultimul manipulați raza de graniță la marginile meniului nostru pentru a crea un stil foarte interesant pentru web 2.0.
Imagini de fundal culisante CSS
Pentru unele dintre cele mai simple efecte am cuplat ambele breadcrumbs împreună la construirea proprietăților. Acest lucru este util, deoarece nu numai că economisește spațiu, dar când se întoarce la editarea stilurilor este ușor de personalizat aspectul tău propriu.
Pentru amandoi #breadcrumb și # breadcrumb2 Am stabilit listă: nu există; astfel încât toate elementele interne nu vor avea marcatori. Ați putea lăsa aceste lucruri dacă vă place efectul, dar am constatat că HTML devine obositor pentru a lucra în jur și este mult mai ușor de a crea noi icoane. Deci, să începem cu noi .firimituri clasă.
.miezuri display: bloc; .crumbs li afișare: inline; .crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: vizitat culoare: # 666; afișare: bloc; plutește la stânga; font-size: 12px; margin-stânga: -13px; umplutură: 7px 17px 11px 25px; poziția: relativă; text-decorare: nici unul; .crumbs li a imagine-imagine: url ('... /img/bg-crumbs.png'); fundal-repet: nu-repeta; pozitie fundal: 100% 0; poziția: relativă; .crumbs li a: hover culoare: # 333; fundal-poziție: 100% -48px; cursor: pointer; .crumbs li a: activ culoare: # 333; pozitie fundal: 100% -96px; .crumbs li.first un interval height: 29px; lățime: 3px; frontieră stângă: 1px solid # d9d9d9; poziția: absolută; top: 0px; stânga: 0px; Noi setați lista noastră neordonată bloc astfel încât nimic altceva nu se întinde în jurul zonei. Observați că elementele din listă sunt afișate în linie în timp ce fiecare legătură de ancorare are mai mult spațiu de împrăștiere. Vrem ca întregul spațiu din meniul nostru să fie clicabil, astfel încât acest lucru este necesar construind ancorele noastre ca elemente de bloc.
Am folosit o imagine numită bg-crumbs.png pentru fundal. Aceasta este cunoscută ca o foaie de sprite simplă în CSS, sau alternativ a uși glisante tehnică. Aceasta înseamnă că atunci când utilizatorul se mișcă sau face clic pe un link, schimbăm poziția de fundal pentru a afișa stilul actualizat. Această singură imagine conține toate cele 3 desene sau modele de care avem nevoie pentru a crea fundaluri de pescuit în poziții diferite, astfel încât să putem folosi background-position proprietate pentru a se muta în funcție de interacțiunea utilizatorului.
Efecte personalizate cu CSS3
Designul original de pescuit cu paine este mult mai simplu de creat. Acest lucru este remarcabil deoarece multe dintre proprietățile CSS sunt mai elementare decât v-ați imagina, dar acum începem să ne concentrăm pe dublarea acestor efecte doar cu CSS3!
Stilurile individuale ocupă o mulțime de spațiu, așa că le voi descompune în două blocuri de coduri.
.firimituri2 display: bloc; margin-stânga: 27px; umplutura: 0; padding-top: 10px; .crumbs2 li afișare: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: vizitat culoare: # 666; afișare: bloc; plutește la stânga; font-size: 12px; umplutura: 7px 16px 7px 19px; poziția: relativă; text-decorare: nici unul; frontieră: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (linia, partea din stânga jos, partea stângă sus, stopul de culoare (0,45, rgb (241,241,241)), oprirea culorilor (0,73, rgb (245,245,245)); fundal-imagine: -moz-linear-gradient (fundul central, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * Pentru Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * Pentru Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first o frontieră-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last o frontieră-dreapta-lățime: 1px; raza de jos-dreapta-dreapta: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
.crumbs2 meniul este utilizat Gradienți CSS pentru a duplica efectele de fundal. Dacă nu sunteți familiarizați cu aceste recomandări, vă recomandăm ghidul CSS Tricks pentru Gradienții CSS3 care ar trebui să vă ajute să utilizați în mod eficient gradientele CSS3. Au inclus câteva proprietăți pentru browserele Microsoft și Opera, însă acestea nu sunt pe deplin acceptate în toate cazurile. Nu i-am inclus în codul demo aici - dar este bine să înțelegem toate opțiunile.
-webkit gradient și -Moz-liniar gradient sunt soluțiile de bază care fac cea mai mare parte a activității. Am inclus codul vechi pentru versiunile mai vechi ale Internet Explorer, dar nu este garantat pentru a afișa corect tot timpul (folosim tehnici puternice de redare a imaginilor, la urma urmei). Observați că am setat ambele coduri de culori RGB și hexă între proprietățile de fundal. Ai putea să stai într-o metodă sau pe cealaltă, dacă ești mai confortabil.
raza de rază codul se aplică numai navigării noastre secundare. Acest lucru oferă un efect elegant în partea stângă sus și în dreapta sus a întregului nostru meniu de navigare. Bara pare să apară aproape de pagină - cu adevărat un efect fantastic asupra browserelor care acceptă stilurile, însă acestea acoperă doar stările implicite pentru link-urile noastre. Acum, să construim efecte de hover similar cu imaginile pe care le-am folosit mai sus.
Frontiere și umbre CSS3
Ori de câte ori un utilizator se deplasează peste un link, vrem să actualizăm câteva lucruri. Mai întâi trebuie întunecă culorile de margine de pe partea superioară și inferioară a elementului nostru activ. Acest lucru poate fi văzut și în imagini, atât pentru stările de hover, cât și pentru cele active.
.crumbs2 li a: hover frontal-culoarea de sus: # c4c4c4; border-bottom-color: # c4c4c4; fundal-imagine: -webkit-gradient (linia, partea din stânga jos, partea superioară din stânga, stopul de culoare (0,45, rgb (241,241,241)), stopul de culoare (0,73, rgb (248,248,248)); fundal-imagine: -moz-linear-gradient (fundul central, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * Pentru Internet Explorer 5.5 - 7 * / filtru: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * Pentru Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; culoare: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: activă border-top-color: # c4c4c4; border-bottom-color: # c4c4c4; fundal-imagine: -webkit-gradient (liniar, stânga jos, partea stângă sus, stop color (0,45, rgb (224,224,224)), stop color (0,73, rgb (235,235,235)); fundal-imagine: -moz-linear-gradient (fund central, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * Pentru Internet Explorer 5.5 - 7 * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * Pentru Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = #ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; culoare: # 333;
Folosesc exact același cod de gradient ca cel folosit mai sus, dar de această dată culorile sunt mult diferite dacă ați observat valorile noastre RGB. Fiecare dintre stări va întuneca culoarea textului # 333, totuși, alți descriptori au fost ușor modificați pentru a corespunde comenzilor utilizatorilor.
Pe hover veți vedea a efect lucios lucios care împreună cu margini întunecate dă stilurile pop-up ale paginii. Dacă dați clic și țineți apăsat veți intra în starea activă care are a gradient de fundal întunecat. Acest efect face ca butoanele să arate că sunt de fapt “presat” în pagină.
De asemenea, aplicăm box-shadow proprietăți din noile specificații CSS3. -WebKit, -Moz, și stilurile implicite sunt utilizate cu aceleași setări. Afisarea cursorului afiseaza a lumina umbrei ieșind din partea de jos a link-ului selectat. Când este activă, umbra se va forma pe marginea superioară, dreaptă și inferioară. Acest efect este creat cu medalion cuvântul cheie adăugat la sfârșitul fiecărei linii de proprietate box-shadow. Din nou, CSS Tricks este cel mai bun prieten al tău aici, cu un articol minunat despre box-shadow, deoarece vorbește despre sintaxa și despre utilizarea corectă în CSS3.
Bonus: Mai multe stiluri
În plus față de codul tutorial am inclus imagini de fundal suplimentare cu schemele de culori adaptate. Am prelevat probe din mediile originale și am folosit Adobe Photoshop pentru a crea câteva variante pe care le puteți aplica pe propriul dvs. site web.
Aceste fișierele bonus sunt incluse în fișierul sursă pe care le puteți descărca în format .zip arhivă în secțiunea de mai jos.
Puteți verifica imaginea de mai sus pentru a obține o idee despre ceea ce vorbesc. Dacă aveți nevoie de o schemă de culori specifică deschisă Photoshop> Imagine> Ajustări> Nuanță / Saturație pentru a modifica schema de culori pentru a se potrivi cu propriul șablon, amintiți-vă bifați opțiunea Colorize (Colorare) în panoul Culoare / Saturație dacă culoarea nu s-a schimbat deloc.
Concluzie
Acest tutorial ar fi trebuit să vă familiarizeze cu unele dintre cele mai noi tehnici CSS3. Am creat două meniuri de pescuit fantastice, modelate într-o manieră similară și le-am construit în așa fel încât să se poată degrada grațios în browserele mai vechi. În plus, mi-am oferit codul meu demo și câteva imagini bonus pentru a vă juca.
Îți plac în special stilurile pe care le-am construit aici? Sau poate aveți întrebări sau idei despre cum să îmbunătățiți codul tutorial? Vă rugăm să vă împărtășiți gândurile cu noi în zona de discuții de mai jos și nu uitați să descărcați fișierele sursă pentru a putea juca cu demo-ul!
Mai multe tutoriale CSS3
Craving pentru mai multe CSS3? Mai jos sunt articolele noastre pentru a înțelege CSS3 teoretic și practic!
- CSS3: Creați un RSS Feed Logo
- CSS3: Creați un câmp de căutare
- CSS3: Creați un formular de contact AJAX
- CSS3: Construirea de pagini HTML5 / CSS3
