Share
Următorul în seria PSD codată de Orman Clark este minunatul său navigator vertical Navigation Menu. Îl vom recrea cu CSS3 și jQuery în timp ce vom folosi cantitatea minimă de imagini posibile.
Singurele imagini pe care le vom folosi sunt icoanele - voi crea un sprite folosind un nou instrument numit SpriteRight, dar acest lucru este opțional. În plus, voi folosi GradientApp pentru a crea gradienții CSS3, dar din nou acest lucru este opțional.
Să începem prin aruncarea unui marcaj de bază, a unui document HTML5 gol:
Meniul de navigare vertical: CSS3 codificat
Și acum marcajul pentru meniul nostru; o listă neordonată într-un ambalaj care conține.
- Prieteni 340
- Videoclipuri 147
- Galerii 340
- Podcast-uri 222
- Roboți 16
În cele din urmă, vom crea submeniuri prin plasarea unei liste neordonate imbricate în fiecare dintre elementele de listă existente.
- Prieteni 340
- Cute Kittens 14
- Ciudate "Stuff" 6
- Funcționează automat 2
- Videoclipuri 147
- Cute Kittens 14
- Ciudate "Stuff" 6
- Funcționează automat 2
- Galerii 340
- Cute Kittens 14
- Ciudate "Stuff" 6
- Funcționează automat 2
- Podcast-uri 222
- Cute Kittens 14
- Ciudate "Stuff" 6
- Funcționează automat 2
- Roboți 16
- Cute Kittens 14
- Ciudate "Stuff" 6
- Funcționează automat 2
Bine, s-ar putea să pară mult acolo, dar nu te lăsa să te deranjeze. Mai întâi am creat o listă neordonată cu cinci elemente de listă, fiecare cu o etichetă de ancorare înăuntru. Apoi am adăugat liste imbricate neordonate, fiecare cu trei elemente de listă.
De asemenea, am adăugat o clasă la fiecare element din listă, doar pentru a face stilul mai ușor mai târziu. În cele din urmă, pentru numerele create, am creat o etichetă de span în interiorul fiecărei etichete de ancorare. Dacă îl vedeți în browser, ar trebui să arate astfel:
Mai întâi vă vom asigura că meniul nostru este afișat corect. Adăugați aceste reguli la css / styles.css, vor stabili marginea și umplutura tuturor uls la 0 și eliminați stilul listei.
ul, ul ul margine: 0; umplutura: 0; listă: nu există;
Înainte de a începe stilul meniului nostru, vom crea un wrapper cu o lățime fixă și o dimensiune a fontului de 13px (exprimată în unități em). Mai întâi vom adăuga o regulă corpului, font-size: 100%;. Acest lucru ne va asigura că stilul nostru se bazează pe dimensiunea implicită a browserului (de obicei 16 pixeli).
Acum, pentru a explica modul în care dimensiunea fontului de ambalaj funcționează. Trebuie să o exprimăm ca pe un em; proporțional cu dimensiunea dimensiunii fontului părintelui. Vrem spre 13px, deci presupunem că mărimea parintelui este de 16px, rezultatul nostru fiind 13/16 = 0,8125. 13px este 0.8125 * 16px.
Măsurarea fonturilor (și a altor elemente) în unitățile em le va face să fie fluide. Acum, dacă modificăm mărimea fontului (sau mărimea implicită a browserului), întregul meniu se va ajusta în funcție de baza respectivă. Încercați să nu vă lăsați confuz, dacă aveți nevoie de ajutor pentru a vă converti fonturile, vă sugerăm să vizitați pxtoem.com.
corp font-size: 100%; a text-decoration: none; ul, ul ul margine: 0; umplutura: 0; listă: nu există; #wrapper width: 220px; margine: 100 pixeli automat; font-size: 0.8125em;
Am oferit wrapper-ului o lățime fixă de 220px și am centrat-o cu o margine de top prin adăugare margine: 100 pixeli automat;.
Apoi vom adăuga un stil pentru meniu. Vom face lățimea și înălțimea meniului ul auto, apoi aplicați o umbră întregului lucru. Prin adăugarea înălțimii ca auto, umbra se va ajusta când se deschide glisorul.
Apoi etichetele ancorei; vom adăuga o lățime de 100%, ceea ce înseamnă că se vor întinde la lățimea de 220px a ambalajului. Pentru o înălțime vom folosi ems, deci gândiți-vă la dimensiunea fontului principal de 13 pixeli. Clipul nostru .psd are o înălțime de 36px, deci este ținta noastră. Vom lua 36 și o vom împărți cu 13, care iese la aproximativ 2,75 (36/13 = 2.76923077). Vom folosi, de asemenea, 2.75em pentru înălțimea liniei (pentru a centra întregul text pe verticală), apoi aplicați niște text-liniuță pentru a împinge textul, făcând mai târziu spațiu pentru pictograma noastră.
Vom adăuga un gradient CSS3 pentru fundal, am mers înainte și am creat acest lucru cu GradientApp. Apoi vom schimba fontul, vom aplica fontul Helvetica Neue și o culoare albă împreună cu o umbră de text. Notă nu am folosit aici o dimensiune a fontului. Acest lucru se datorează faptului că fontul de bază este de 13 pixeli pentru ambalajul pe care ancorele noastre l-au moștenit, deci nu este nevoie să îl adăugați.
corp font-size: 100%; a text-decoration: none; ul, ul ul margine: 0; umplutura: 0; listă: nu există; #wrapper width: 220px; margine: 100 pixeli automat; font-size: 0.8125em; .menu width: auto; înălțime: auto; -webkit-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); -moz-box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); box-shadow: 0px 1px 3px 0px rgba (0,0,0, .73), 0px 0px 18px 0px rgba (0,0,0, .13); .menu> li> a background-color: # 616975; background-image: -webkit-gradient (liniar, stânga sus, partea stângă a stânga, de la (rgb (114, 122, 134)) la (rgb (80, 88,100)); fundal-imagine: -webkit-gradient liniar (top, rgb (114, 122, 134), rgb (80, 88, 100)); fundal-imagine: -moz-linear-gradient (top, rgb (114, 122, 134), rgb (80, 88, 100)); fundal-imagine: -o-gradient linear (top, rgb (114, 122, 134), rgb (80, 88, 100)); fundal-imagine: -ms-linear-gradient (top, rgb (114, 122, 134), rgb (80, 88, 100)); fundal-imagine: gradient liniar (top, rgb (114, 122, 134), rgb (80, 88, 100)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 727a86', EndColorStr = "# 505864"); frontieră-fund: 1px solid # 33373d; -webkit-box-shadow: inserție 0px 1px 0px 0px # 878e98; -moz-box-shadow: inset 0px 1px 0px 0px # 878e98; box-shadow: inset 0px 1px 0px 0px # 878e98; lățime: 100%; înălțime: 2,75cm; Înălțimea liniei: 2,75cm; text-indent: 2,75; afișare: bloc; poziție: relativă; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-greutate: 600; culoare: #fff; text-shadow: 0px 1px 0px rgba (0,0,0, .5);
Bine! Acum începe să arate mai bine și avem și noi o structură! Dar cum să adăugăm o culoare de fundal, astfel încât meniul să iasă mai bine ...
corp background: # 32373d;
Din CSS de mai sus puteți vedea că este ușor să uitați ce înseamnă unitățile em. Este o idee bună să lăsați comentarii din calculele dvs. inițiale, astfel încât atunci când vă veți întoarce la codul dvs. în viitor, puteți încă să descifrați ce se întâmplă. Amintiți-vă formula: dorit px / părinte px = rezultatul em și utilizați simbolul aproximativ (≈) dacă rotunjiți rezultatul.
#wrapper font-size: 0.8125em; / * 13/16 = 0,8125 * / .menu> li> a înălțime: 2,75cm; / * 36/13 ≈ 2,75 * / înălțimea liniei: 2,75; / * 36/13 ≈ 2,75 * / text-indent: 2,75; / * 36/13 ≈ 2,75 * /
Este timpul să adăugați unele CSS pentru submeniurile albe. Va trebui să adăugăm un fundal alb cu niște chenare gri. Observați că pentru ultima nu are o margine inferioară, așa că o vom direcționa cu :ultimul copil pseudo selectorul pentru al elimina. Are o graniță albastră închisă, pentru a elimina cea gri, adăugând o culoare albastră.
Următorul pas va fi similar cu cel precedent; vom adăuga din nou înălțimile și înălțimile, vom schimba fundalul în alb. De data aceasta trebuie să schimbăm dimensiunea fontului. Vrem spre 12 pixeli, folosind calculul nostru dorit px / părinte px = rezultatul em noi primim 0.923
Să schimbați, de asemenea, culoarea textului la gri. Notă am folosit display: block. Dacă am fi folosit plutește la stânga meniurile nu ar anima fără probleme, așa că folosim un bloc de afișare pentru a le ajuta să se miște frumos și fără probleme. veți observa, de asemenea, că am adăugat un stil suplimentar; aplicăm acest lucru ultimului copil al sub-ul. Trebuie să facem acest lucru, astfel încât să putem schimba culoarea frontală.
.meniul ul li a background: #fff; frontieră-fund: 1px solid # efectff0; lățime: 100%; înălțime: 2,75cm; Înălțimea liniei: 2,75cm; text-indent: 2,75; afișare: bloc; poziție: relativă; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.923; greutatea fontului: 400; culoare: # 878d95; .menu ul li: ultimul copil a border-bottom: 1px solid # 33373d;
Începe să arate foarte bine acum!
Vom adauga acum cateva stiluri de actiune si actiune, mai ales cand acordeonul este deschis! De asemenea, vom adăuga o margine de fund în meniul activ. Acum, dacă vă gândiți, "de ce nu am adăugat o clasă activă?". Ei bine, prietenul meu, asta va face jQuery mai târziu.
.meniu> li> a: hover, .menu> li> a.activ culoare-fundal: # 35afe3; fundal-imagine: -webkit-gradient (liniuță, stânga sus, fund stânga, de la (rgb (69, 199, 235)) la (rgb (38, 152, 219)); fundal-imagine: -webkit-gradient linear (top, rgb (69, 199, 235), rgb (38, 152, 219)); fundal-imagine: -moz-linear-gradient (top, rgb (69, 199, 235), rgb (38, 152, 219)); fundal-imagine: -o-gradient linear (top, rgb (69, 199, 235), rgb (38, 152, 219)); fundal-imagine: -ms-gradient linear (sus, rgb (69, 199, 235), rgb (38, 152, 219)); fundal-imagine: gradient liniar (top, rgb (69, 199, 235), rgb (38, 152, 219)); filtru: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# 45c7eb', EndColorStr = "# 2698db"); frontieră-fund: 1px solid # 103c56; -webkit-box-shadow: inserție 0px 1px 0px 0px # 6ad2ef; -moz-box-shadow: inserție 0px 1px 0px 0px # 6ad2ef; box-shadow: inset 0px 1px 0px 0px # 6ad2ef; .menu> li> a.activă border-bottom: 1px solid # 1a638f;
Vom adăuga pictogramele utilizând :inainte de pseudo. Mai întâi vom direcționa toate etichetele ancorei sub-ul, vom aplica sprite-ul de fundal și nu l-am repeta. Îi vom da o dimensiune a fontului de 36 px, deși nu există text; vom folosi 36 de pixeli, astfel încât să putem utiliza o lățime și o înălțime de 1, care acum va fi egală cu 36 de pixeli. Apoi vom împinge elementul în jos cu 50% și vom elimina .5em de pe marginea superioară pentru ao centra.
Folosind clasele pentru fiecare element din lista de sub-uri, le vom direcționa și le vom da fiecărei poziții de fundal corespunzătoare pentru sprite.
Notă: Am creat acest sprite folosind noua aplicație numită SpriteRight, dacă doriți să vă mișcați în jurul cu sprite, am inclus imaginile și fișierele de proiect în fișierele sursă.
.meniu> li> a: înainte de content: "; background-image: url (... /images/sprite.png); : 0: 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; .item3> a: înainte de background-position: 0 -38px; .item4> a: înainte de background-position: -38px -38px; ;
Bine, amintiți-vă acele spații pe care le-am adăugat? Acestea vor crea numerele!
Mai întâi vom adăuga un font de 11px (care convertește la aproximativ 0.857em). Le vom poziționa absolut și le împingeți din dreapta spre 1EM, din nou - pentru a face acest lichid. Îl împingem cu 50% din partea de sus și eliminăm marginea superioară pentru ao centra. Un fundal va fi adăugat împreună cu unele umbre de cutie, una insetată și una de început.
Încă o dată, pentru ao face fluidă, vom folosi polizoare pentru a crea lățimea și înălțimea. Am folosit chiar ems pe raza de graniță; vom avea nevoie de acest lucru, deoarece dacă textul va deveni mai mare, ele vor apărea disproporționate. Am adăugat, de asemenea, un alt stil pentru momentul în care se hovering sau o clasă activă este aplicată la link.
.meniu> li> a span font-size: 0.857em; afișare: inline-block; poziția: absolută; dreapta: 1em; top: 50%; fundal: # 48515c; linia-înălțime: 1em; înălțime: 1em; padding: .4em .6em; marja: -8em 0 0 0; culoare: #fff; text-indent: 0; text-align: centru; -webkit-border-radius: .769em; -moz-border-radius: .769em; raza de frontieră: .769em; -webkit-box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); -moz-box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, .26), 0px 1px 0px 0px rgba (255, 255, 255, .15); text-shadow: 0px 1px 0px rgba (0,0,0, .5); greutatea fontului: 500; .menu> li> a: deschiderea cursorului, .menu> li a.activ span background: # 2173a1;
Acest proces va fi similar cu pasul anterior, așa că nu voi intra în detaliu. Principalele diferențe aici sunt că am eliminat culoarea de fundal, am schimbat marginea și am schimbat culoarea fontului. Trebuie, de asemenea, să adăugăm această săgeată și să ne bazăm din nou pe :inainte de psuedo. Definim o lățime și înălțime și adăugăm o anumită poziționare stânga folosind ems pentru a ne asigura că este fluidă.
În cele din urmă, o stare de hover (datorită celor din comentariile care au subliniat absența inițială). Pur și simplu aplicăm o culoare mai închisă (# 32373D) la textul de ancorare, pseudo săgeată și numărul în intervalul.
.meniul ul> li> un interval font-size: 0.857em; afișare: inline-block; poziția: absolută; dreapta: 1em; top: 50%; / background: #fff; frontieră: 1px solid # d0d0d3; linia-înălțime: 1em; înălțime: 1em; padding: .4em .7em; marja: -9em 0 0 0; culoare: # 878d95; text-indent: 0; text-align: centru; -webkit-border-radius: .769em; -moz-border-radius: 769cm; raza de graniță: 769cm; text-shadow: 0px 0px 0px rgba (255,255,255, .01)); .menu> li> ul li a: înainte de conținut: '▶'; font-size: 8px; culoare: #bcbcbf; poziția: absolută; lățime: 1m; înălțime: 1em; top: 0; stânga: -2,7; .menu> li> ul li: hover a, .menu> li> ul li: hover a span, .menu> li> ul li: hover a: înainte de culoare: # 32373D;
Deci, arata destul de cool acum? Cred că este momentul să adăugăm câteva funcționalități în acest sens!
Pariu ai așteptat să ajungi aici ?! Ei bine, suntem în sfârșit la punctul jQuery. Mai întâi trebuie să ne conectăm la biblioteca jQuery folosind una găzduită de Google. Ultima versiune curentă este 1.7.1. Adăugați următoarele în secțiunea cap de pagină HTML:
Acum adăugați următoarele în partea de jos a documentului html, înainte de închidere
Accentsconagua
var menu_ul = $ ("meniu> li> ul"), meniu_a = $ (".menu> li> a '); Mai întâi stocăm submeniul și etichetele de ancorare ale meniului principal în două variabile diferite, ceea ce face mai ușor să le referi mai târziu la acestea.
menu_ul.hide ();
Aceasta va ascunde toate submeniurile când se încarcă pagina
menu_a.click (funcția (e)
Mai întâi, îi vom spune să facă ceva când facem clic pe unul dintre etichetele de ancorare ale meniului principal.
e.preventDefault ();
Aici împiedicam etichetele de ancoră să urmărească orice link sau să schimbe adresa din bara de adrese. de exemplu. dacă creați vreodată o etichetă de ancoră cu o legătură de "#", când faceți clic pe ea, nu va apărea în bara de adrese acum. Etichetele de ancorare sunt practic dezactivate.
dacă (! $ (acest) .hasClass ('activ')) menu_a.removeClass ('activ'); Acum, vom instrui că dacă meniul_a are clasa "activă", eliminați-o.
menu_ul.filter ( ': vizibil') slideUp ( 'normal');.
Aici folosim ".filter" și ": visible". Dacă un meniu este deschis, glisați-l cu o viteză normală.
$ (Aceasta) .addClass ( 'activ') următor () stop (true, true) .slideDown ( 'normal')..;
Dacă meniul este închis, adăugați clasa "activă" (astfel încât să putem accesa stilul CSS frumos) și glisați-l cu o viteză normală.
altceva $ (this) .removeClass ("activ"); . $ (Aceasta) .Etapele () opri (true, true) .slideUp ( 'normal'); Acum, va trebui să folosim un ELSE ca parte a declarației noastre condiționate. Deci, ELSE elimina clasa activă și glisați meniul sus pentru al ascunde. Aceasta este doar pentru a putea codifica orice meniu fără a trebui să reîncărcați pagina.
Notă: Dacă doriți să schimbați viteza diapozitivului, schimbați-l în mod normal, de ex. '500'. Aceasta va aluneca la 500 de milisecunde.
Dacă sunteți interesat să învățați jQuery de la zero, ați fi sfătuiți să vizitați gratuit cursul Learn jQuery în cursul de 30 de zile de la tutsplus.com.
Ei bine, am reușit până la urmă! Am codificat meniul vertical de navigare al lui Orman, folosind CSS3 și jQuery! Rămâi acordat pentru un sfat rapid cu privire la modul de a crea acest lucru folosind doar CSS3 cu: pseudo selector țintă.
#wrapper width: 440px; font-size: 1em Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
