Share
În acest tutorial, vom arunca o privire și vom vedea ce putem realiza cu HTML5 și CSS3 atunci când vine vorba de captarea site-urilor curente: meniul de navigare drop-down umil. De asemenea, vom folosi jQuery pentru a gestiona efectele și pentru a adăuga ultimele sfaturi pentru noi.
HTML5 aduce la spec. Un dedicat element care ar trebui să fie folosit ca container pentru orice structură de navigație majoră, cum ar fi meniurile de navigare principale pe verticală sau orizontală sau un cuprins în pagină, de exemplu. Din păcate, IE nu suportă încă acest element nou, dar există o soluție simplă pe care o putem folosi, despre care sunt sigur că sunteți cu toții conștienți.
Folosind CSS3 putem să îndepărtăm ceea ce ar fi necesitat utilizarea mai multor imagini de fundal și, eventual, a unui container suplimentar de ambalare sau a două și să ne bazăm (aproape) pur pe unele dintre noile proprietăți ale stilului, cum ar fi colțurile rotunjite și umbrele, de exemplu, care sunt disponibile pentru browserele de sprijin. Din nou, nu toate browserele (tuse, IE!) Acceptă aceste noi reguli, însă putem oferi cu ușurință soluții de back-back pentru browserele care nu se pot ocupa de stilurile noastre.
Apropo, Envato Market are o selecție imensă de meniuri CSS elegante de care puteți alege, cum ar fi PickArt, o soluție simplă, curată și elegantă, gata de utilizare și instalare pentru doar 4 dolari.
PickArt pe piața EnvatoPuteți încerca, de asemenea, unul dintre furnizorii de servicii de specialitate din Envato Studio. De exemplu, Lukasz Czerwinski va crea un nou plugin jQuery la specificațiile dvs. pentru 115 USD în șapte zile, cu un rating de satisfacție de 100%. Ofertele sale includ meniuri drop-down, galerii media integrate cu serviciile sociale, glisoare și multe altele.
Dacă nu găsiți ceea ce aveți nevoie sau dacă preferați să faceți acest lucru singur, citiți mai jos pentru a afla cum.
Vom avea nevoie de o copie a ultimei versiuni a jQuery, versiunea 1.4.2, la momentul redactării, precum și o copie a versiunii curente (1.1) a bibliotecii excelente Modernizr, pe care o vom folosi pentru a viza browserele de sprijin cu CSS3 pe care îl folosim.
Creați un dosar de proiect pentru fișierele pe care le vom crea undeva pe aparatul dvs. și îl sunați nav, în acest director creați trei dosare noi; unul a sunat js, unul a sunat css și unul a sunat da înapoi. Asigurați-vă că copiile jQuery și Modernizr sunt salvate în js pliant.
Începeți codarea creând următoarea pagină în editorul dvs. de cod preferat:
Meniul HTML5, CSS3 și jQuery Navigation
Salvați ca nav.html în nav pliant. Începem cu doctype HTML5 minimal, care ne permite să specificăm tipul de document într-un sfert din codul pe care l-am folosit. De asemenea, specificăm limba prestabilită și codificarea caracterelor; deși documentul va fi validat în continuare fără aceste două lucruri, este bine să le includeți, iar pagina va declanșa avertismente de validare dacă nu este specificată limba prestabilită. Apoi, facem legătura cu o foaie de stil (vom crea acest lucru) și vom folosi un comentariu condiționat care vizează IE pentru a încărca excelentul lui Remy Sharp html5.js dacă este necesar.
În corpul paginii avem element ca container pentru o listă tradițională de linkuri și am aruncat într-un submeniu pentru o măsură bună. Elementul nu creează în mod magic un meniu de navigare pentru noi și nu include elemente de meniu noi sau ceva asemănător, astfel încât o listă neordonată este încă o alegere potrivită. elementul este doar un container semantic pentru meniul nostru, care descrie funcția sa în document, pentru a înlocui genericul La sfârșitul corpului ne referim la fișierele noastre de scripturi jQuery și Modernizr. Vom folosi jQuery mai târziu când vom adăuga comportamentul pentru meniu, dar Modernizr își va face imediat lucrul, detecând capabilitățile browserului în uz și adăugând o serie de nume de clase la elementul HTML, care putem folosi pentru a adăuga CSS3, astfel încât acesta să fie aplicat numai browserelor care le pot folosi. De asemenea, am adăugat numele clasei no-js pentru a a paginii; o vom șterge mai târziu dacă JavaScript este activat, astfel încât să îl putem folosi și pentru a adăuga stiluri care ar trebui aplicate numai când JavaScript este dezactivat. Acum, să adăugăm un stil de bază; creați următoarea foaie de stil: Apoi putem adăuga CSS3: Utilizând clasele adăugate la element de la Modernizr putem adăuga cu ușurință și în siguranță stilurile CSS3 pe care le dorim. Noi folosim border-radius stil pentru a da colțuri rotunjite; Trebuie să oferim declarațiile de stil prefixate Mozilla și Webkit, precum și standardul border-radius stiluri pentru browserele care le suportă, cum ar fi Opera. Trebuie să facem acest lucru cu majoritatea stilurilor noastre CSS3. La fel ca și rotunjirea colțului de asemenea, îi oferim un gradient și o umbră. Stilurile de gradient sunt destul de complexe și sunt diferite pentru browserele bazate pe Mozilla și Webkit, care sunt singurele browsere care le implementează în prezent. Ambele browsere folosesc imagine de fundal proprietate. În Firefox folosim -Moz-liniar gradient pentru a adăuga un gradient liniar. Ea necesită valori care corespund punctului de pornire al gradientului (0%), punctul în care prima culoare se amestecă în a doua culoare (22px), unghiul axei de gradient (90deg), prima culoare (# 999) și a doua culoare (# 222). Putem obține același gradient în Safari sau Chrome folosind -webkit gradient și sintaxa este subtil diferită; specificăm că ar trebui să fie a liniar gradient și apoi să furnizeze două puncte care indică browserului unde începe și se termină gradientul. Valorile din exemplu corespund valorilor stânga, superioară și dreaptă de 0% și 70% pentru partea de jos, ceea ce ne oferă același stil ca și cel folosit în Firefox. În final, specificăm culorile gradientului. Atunci când aplicăm umbra, o combinăm cu clasa Modernizr pentru RGBA, precum și cu box-ul pentru ca umbra noastră să fie transparentă. Proprietățile pentru Mozilla și webkit sunt aceleași și, de asemenea, oferim realitatea box-shadow proprietate pentru suportul de browsere. Valorile pe care le specificăm pentru această regulă sunt compensarea stângă (2px), offsetul de sus (2px), valoarea de estompare (2px) și, în sfârșit, culoarea umbrei (0,0,0). Culoarea este locul în care utilizăm RGBA, ceea ce ne permite să setăm opacitatea la 75% (.75). Un alt stil interesant pe care îl folosim este transforma pentru a roti un text cu 180 de grade; atunci când scriem scenariul într-un moment, veți vedea că adăugăm un indicator submeniu sub forma unui semn de cartel la orice element din listă care conține un submeniu - acest stil va roti caracterul pe care îl îndreaptă, ceea ce înseamnă că în susținerea browserelor nu avem nevoie nici măcar să folosim o imagine pentru această caracteristică. Restul regulilor stabilesc gradiente diferite, marginile rotunjite, opacitatea cu RGBA și umbrele de pe alte elemente din meniu, cum ar fi colțuri inferioare rotunjite și o umbră de umplere pe submeniu, precum și inversarea gradientului pentru o stare atractivă de hover. Acum, meniul de navigare ar trebui să arate astfel într-un browser de asistență: În sprijinul browserelor putem face ca elementele noastre să arate destul de fierbinți fără a folosi o singură imagine, ceea ce înseamnă că paginile noastre se vor încărca mult mai repede cu mult mai puține cereri HTTP. Cu toate acestea, nu toate browserele vor suporta stilul CSS3, în special orice versiune de IE, deci este necesar să definim stilurile noastre alternative. Adăugați următorul cod în foaia de stil: Modernizr va adăuga, de asemenea, nume de clasă care arată ce caracteristici CSS3 nu sunt disponibile pentru browser, astfel încât să putem furniza cu ușurință reguli alternative, care utilizează remanieri bazate pe imagine în care nu sunt acceptate caracteristicile, precum și orice stiluri de care avem nevoie ca urmare folosind imaginile. Veți observa că folosim de asemenea selectori care vizează pe noi no-js și aici; acest lucru se datorează faptului că, atunci când JavaScript este dezactivat, Modernizr nu va rula și nu va adăuga numele de clasă de care avem nevoie pentru document, astfel încât non-CSS3 fallbacks noastre, de asemenea, să devină noastre non-js backbacks, de asemenea. Acum, să adăugăm un scenariu. Primul lucru pe care trebuie să-l facem este să eliminăm no-js clasa din corpul paginii când JavaScript nu este dezactivat. Vrem să facem acest lucru cât mai curând posibil în procesul de redare a paginii pentru a evita o pâlpâire atunci când stilurile sunt schimbate. Imediat după eticheta de deschidere a corpului, adăugați următorul cod: Tot ce facem este să luăm element după numele etichetei și setați proprietatea className la un șir gol. În mod normal, am folosi jQuery pentru a face asta pentru noi, dar pentru că jQuery nu va fi încărcat când acest script este executat, nu îl putem folosi. Am putea încărca jQuery înainte de asta, desigur, dar am avut apoi un succes masiv de performanță. Scriptul nostru are doar 2 linii de cod, astfel încât nu va cauza o întârziere semnificativă și deoarece va fi executat înainte ca browserul să fi procesat chiar marcajul pentru element, nu va exista nici un fulger de conținut neuniform. Acum, că clasa a fost eliminată din corp, submeniurile noastre CSS nu vor mai funcționa, astfel încât să putem adăuga acest comportament înapoi cu jQuery și să îl îmbunătățim puțin în același timp. La sfârșitul documentului, imediat după referința scriptului pentru Modernizr adăugați următorul cod: Scenariul este relativ direct; ne înfășurăm codul într-un interval de închidere și trecem în obiectul jQuery în siguranță în nume-spațiu față de semnul dolarului, doar în cazul în care o altă bibliotecă este utilizată atunci când codul este pus în producție. Apoi am cache o trimitere la astfel încât să ne putem referi la aceasta fără a o selecta din document în mod repetat. Apoi, procesăm fiecare element din listă din meniu. Pentru fiecare element de potrivire, îl verificăm pentru a vedea dacă conține elemente imbricate În acest moment ar trebui să fim într-un loc destul de frumos în ceea ce privește cele mai multe situații; în orice browser care acceptă HTML5, meniul nostru ar trebui să pară relativ similar, indiferent dacă este acceptat sau nu CSS3 și dacă scripting-ul este activat sau nu. Cu toate acestea, IE ne prezintă o problemă; când JS este activat, htmlshiv.js script-ul face IE să înțeleagă elementul și stilurile noastre non-css3 sunt preluate și implementate - toate foarte bune și bune (avem încă unele probleme cu IE7, ca printre altele, auto-curățarea :după regulile nu sunt înțelese sau aplicate, dar vom ajunge la asta în scurt timp). Cu toate acestea, problemele încep atunci când IE este folosit cu scripting dezactivat - în această situație, html5shiv.js scriptul nu este executat și IE nu înțelege element. Nici unul dintre selectorii noștri care includ nav în ele va fi pus în aplicare! Nu este totuși sfârșitul lumii; putem oferi o foaie de stil alternativă care este utilizată numai atunci când browserul are JS dezactivat și este IE. Imediat după scriptul care elimină no-js clasa de la element adaugă următoarele: O soluție simplă. Acum trebuie să creați foaia de stiluri noi; adăugați următoarele reguli la un document nou în editorul de cod: Salvați acest lucru în folderul css ca ie.css. După cum puteți vedea, nu țintim element în această foaie de stil; unele dintre stilurile pe care le-am dat Elementul anterior a fost adăugat la A trebuit să folosim încă câteva imagini pentru acest scenariu, deoarece nu mai avem element pentru a suspenda repetarea fundalului pentru gradientul principal. Deci, toate browserele moderne, cu JS activat și dezactivat, lucrează așa cum era de așteptat - folosind CS3 acolo unde este posibil și rețineri de imagine unde nu. IE7 va crea încă probleme pentru noi, chiar dacă scripting-ul este activat, dar putem remedia cu ușurință acest lucru folosind un alt comentariu condiționat pentru a viza IE7 în mod specific și furnizarea unei noi foi de stil doar pentru IE7 care rezolvă problemele de aspect; ceva de genul asta este tot ce ne trebuie: Salvați acest lucru în css dosar ca ie7.css și adăugați un nou comentariu condițional la Acolo mergem; un meniu de navigare construit și decorat cu cele mai recente elemente și stiluri cu backbacks și remedii pentru browserele mai vechi.
Pasul 3. Unele moduri de bază
/ * JS stiluri dezactivate * / .no-js nav li: hover ul afișare: bloc; / * stiluri de bază nav * / nav display: block; margine: 0 auto 20px; frontieră: 1px solid # 222; Poziția: relativă; background-color: # 6a6a6a; font: 16px Tahoma, Sans-serif; nav ul padding: 0; margin: 0; nav li poziție: relativă; plutește la stânga; list-style-type: none; nav ul: după conținut: "."; display: block; înălțime: 0; clar: ambele; vizibilitate: ascunse; nav li a afișare: bloc; padding: 10px 20px; frontieră-stânga: 1px solid # 999; frontieră-dreapta: 1px solid # 222; Culoare: #eee; text-decoration: none; nav li a: focalizare contur: nici unul; text-decoration: subliniază; nav li: primul-copil a border-left: none; nav li.last a border-right: none; nav span display: bloc; float: right; margin-left: 5px; nav ul ul afișare: nici unul; lățime: 100%; Poziția: absolută; stânga: 0; fundal: # 6a6a6a; nav ul ul float: none; nav ul ul a padding: 5px 10px; border-stânga: nici unul; border-dreapta: nici unul; font-size: 14px; nav ul ul a: mutați background-color: # 555; Salvați acest fișier în directorul css ca nav.css. Prima regulă este exclusiv atunci când JavaScript este dezactivat și permite afișarea submeniului ascuns pe hover pure cu CSS. Restul codului definește un set de stiluri de bază care formatează
Pasul 4. CSS3
/ * CSS3 * / .borderradius Nav -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; .cssgradients nav fundal-imagine: -moz-linear-gradient (0% 22px 90deg, # 222, # 999); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 70%, de la (# 999) la (# 222)); .boxshadow.rgba Nav -moz-box-shadow: 2px 2px 2px rgba (0,0,0, .75); -webkit-box-shadow: 2px 2px 2px rgba (0,0,0, .75); box-shadow: 2px 2px 2px rgba (0,0,0, .75); .cssgradients nav li: hover fundal-imagine: -moz-linear-gradient (0% 100px 90deg, # 999, # 222); fundal-imagine: -webkit-gradient (liniar, 0% 0%, 0% 100%, de la (# 222), la (# 555)); .borderradius nav ul ul -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-stânga-rază: 4px; -webkit-border-bottom-dreapta-rază: 4px; border-bottom-stânga-rază: 4px; border-bottom-dreapta-rază: 4px; .boxshadow.rgba nav ul ul fundal-culoare: rgba (0,0,0,0,8); -moz-box-shadow: 2px 2px 2px rgba (0,0,0, .8); -webkit-box-shadow: 2px 2px 2px rgba (0,0,0, .8); box-shadow: 2px 2px 2px rgba (0,0,0, .8); .rgba nav ul ul li granița-stânga: 1px solid rgba (0,0,0,0,1); frontieră-dreapta: 1px solid rgba (0,0,0,0,1); .rgba nav ul ul: hover fundal-culoare: rgba (85,85,85, .9); .borderradius.rgba nav ul ul li.last frontieră-stânga: 1px solid rgba (0,0,0,0,1); margine de fund: 1px rgba solidă (0,0,0,0,1); -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-stânga-rază: 4px; -webkit-border-bottom-dreapta-rază: 4px; border-bottom-stânga-rază: 4px; border-bottom-dreapta-rază: 4px; ; transformă ul într-un span -moz-transform: rotire (-180deg); - webkit-transform: rotate (-180deg);
/ * backbacks * / .no-cssgradients nav, .no-js nav padding-bottom: 4px; frontieră: nici una; fundal: adresa url (... /fallback/navBG.gif) repeat-x 0 0; .no-borderradius nav ul, .no-js nav ul (fundal: url (... /fallback/navRight.gif) no-repeat 100% 0; .no-borderradius nav ul ul, .no-js nav ul ul fundal: nici unul; .no-borderradius nav li, .no-js nav li înălțime: 44px; .no-cssgradients nav li: hover, .no-js nav li: hover fundal: url (... /fallback/navOverBG.gif) repeat-x 0 0; .no-borderradius nav li li, .no-js nav li li height: auto; lățime: 98%; stânga: -2px; .no-borderradius nav li: primul copil, .no-js nav li: primul copil background: url (... /fallbacknavnav.gif) no-repeat 0 0; .no-borderradius nav li: primul-copil: hover, .no-js nav li: primul-copil: hover background: url (... /fallbacknavoververify.gif) no-repeat 0 0; .no-borderradius nav li: primul copil, .no-js nav li: primul-copil fundal: nici unul; .no-rgba nav ul ul, .no-js nav ul ul left: 1px; padding-left: 2px; fundal: url (... /fallback/subnavBG.png) nu-repeta 100% 100%; .no-rgba nav ul ul a, .no-js nav ul ul a left: 3px; .no-rgba nav ul ul: hover fundal: url (... /fallback/subOverBG.png) repeta 0 0; . nu se transformă ul într-un interval height: 7px; lățime: 12px; margin-top: 8px; text-liniuță: -5000px; overflow: ascuns; fundal: adresa url (... /fallback/indicator.png) no-repeat 0 0; .no-borderradius ul ul li.last margin-bottom: 10px; .no-cssgradients.boxshadow nav căsuța-umbra: niciunul;
Pasul 5. Adăugarea scriptului
elemente și dacă adăugăm un nou Elementul elementului listei. Acesta va deveni indicatorul nostru submeniu. Când se găsește un submeniu, atașăm și el mouseenter () și mouseleave () ajutați participanții la elementul de listă care conține meniul. Toți acești ajutoare fac este să arătați și să ascundeți submeniul prin glisarea în jos sau respectiv în sus. Rețineți utilizarea Stop() care vă ajută să împiedicați deschiderea și închiderea animațiilor în așteptare dacă indicatorul mouse-ului este deplasat în mod repetat pe și în afara elementelor listă țintă.
/ * ie stiluri pentru când js este dezactivat * / ul display: block; padding: 0; margin: 0; fundal: url (... /fallback/navRightIE.gif) no-repeat 100% 0; font: 16px Tahoma, Sans-serif; ul: după content: "."; display: block; înălțime: 0; clar: ambele; vizibilitate: ascunse; li height: 44px; Poziția: relativă; plutește la stânga; list-style-type: none; fundal: adresa url (... /fallback/navBG.gif) repeat-x 0 0; li.last a border-right: none; li: hover (fundal: url (... /fallback/navOverBG.gif) repeat-x 0 0; li: primul-copil fundal: url (... /fallbacknavover.gif) no-repeat 0 0; li: primul-copil a frontieră-stânga: nici unul; li: primul copil: hover background: url (... /fallback/navOverLeft.gif) no-repeat 0 0; a a display: bloc; padding: 10px 20px; frontieră-stânga: 1px solid # 999; frontieră-dreapta: 1px solid # 222; Culoare: #eee; text-decoration: none; li li lățime: auto; clar: la stânga; li li: primul copil (fundal: nici unul; li li: se deplasează background-image: none; ul li li a: hover frontieră-dreapta: none; ul ul afișare: nici unul; padding-left: 2px; Poziția: absolută; stânga: 2px; fundal: url (... /fallback/subnavBG.png) nu-repeta 100% 100%; ul li: hover ul afișare: bloc; li li înălțime: auto; lățime: 98%; stânga: -2px; ul ul a: hover (fundal: url (... /fallback/subOverBG.png) repetați 0 0; ul a span înălțime: 7px; lățime: 12px; margin-top: 8px; text-liniuță: -5000px; overflow: ascuns; fundal: adresa url (... /fallback/indicator.png) no-repeat 0 0; ul ul li fundal: nici unul; ul ul li.last margin-bottom: 10px; ul ul li a umplutură: 5px 10px; border-left: 0; stânga: 3px; font-size: 14px; alb-space: pre;
element și există câteva stiluri noi care trebuie incluse în mod specific pentru acest scenariu. În esență, foaia de stil creează același efect ca înainte, astfel încât IE8 cu JS dezactivat ar trebui să apară în continuare astfel:
* stiluri pentru a repara IE7 * / ul display: inline-block; ul li a span poziție: absolută; dreapta: 5px; top: 10px; ul ul li a frontieră-dreapta: nici una; padding: 5px 10px; .content clar: ambele;
Accentsconagua