Astăzi ne vom concentra pe dezvoltarea de deplasare meniu alunecare folosind CSS3-tranziții. Meniul va fi inițial ascunse de la vedere, iar tranziția va avea loc numai după apăsarea butonului corespunzător.
Să ne găsim mai întâi diferența dintre cele două tipuri de meniuri:
* Meniul va părăsi slide marginea ecranului asupra conținutului paginii atunci când este apăsat butonul.
* Push-meniu va părăsi marginea ecranului, și în același timp, schimba conținutul paginii.
Înainte de a continua, permiteți-mi să subliniez câteva aspecte importante:
* Acest ghid este construit pe CSS-tranzițiile pentru funcționarea lină. Pe browserele mai vechi, cu toate acestea, conținutul va „sări“ în poziția dorită.
* Noi folosim classie.js pentru îndepărtarea rapidă și ușoară și clase adăugarea.
* Noi folosim j # 097; vascript-funcția querySelector și querySelectorAll, care sunt susținute în IE8 și de mai sus.
În cele din urmă, să ne uităm la cele 8 variante de meniu, dezvoltarea pe care le vom face:
* Stânga meniu de diapozitive, care iese din partea stângă a ecranului, asupra conținutului
* Dreapta meniu de diapozitive, care iese din partea dreapta a ecranului, asupra conținutului
* Top meniu de diapozitive, care iese din partea de sus a ecranului în partea de sus a conținutului
* Meniu jos de diapozitive, care lasă în partea de jos a ecranului în partea de sus a conținutului
* Meniu Push stânga, care iese din partea stângă a ecranului și se mută la conținutul corect
* Push meniul din dreapta, care iese din partea dreaptă a ecranului și se mută la conținutul stânga
* Push meniu de sus, care iese din partea de sus a ecranului și se mută conținutul în jos
* Meniu împinge de jos, care lasă în partea de jos a ecranului și se mută conținutul în sus
Când meniul este deschis, vom afișa „masca“ pe partea de sus a carcasei de bază. Acesta va fi o suprapunere semi-transparent, care ascunde conținutul principal. Atunci când utilizatorul face clic pe meniul de suprapunere este ascunsă din nou la vedere. Fiecare meniu va cuprinde, de asemenea, un buton de închidere, care va fi utilă în cazul în care pe dispozitive cu mic meniu, aparatul preia întregul ecran. Să ne aruncăm o privire la marcajul de bază și CSS-cod.
Noi parametru corp overflow-x pus pe ascuns, pentru că nu avem nevoie de defilare, atunci când shell-ul este deplasat spre stânga sau spre dreapta. Când ea se mișcă vertical, nu contează. E mai important pentru a plasa meniurile noastre de navigare depășesc plicul, așa cum este evident că, atunci când un element de transformare care urmează să fie aplicat, acesta va fi temporar pe poziționarea relativă. Din moment ce meniul nostru de navigare ar trebui să fie fixat în raport cu exteriorul ferestrei browser-ului, nu avem nevoie de ea în interiorul elementului cu poziționare relativă. În cadrul fiecărui meniu are o listă de elemente de meniu și butonul de închidere.
Dezvoltatorii nu au ajuns la un consens cu privire la activitatea de poziționare absolută / stânga / sus împotriva transformatele / traducere. Paul Irish mai detaliat în continuare în acest subiect, și a citit despre ea, poți aici. În acest caz, vom folosi de poziționare, precum și să ofere o soluție de rezervă în browsere mai vechi, fără tranziție, fără utilizarea foilor de stil condiționate. De asemenea, după ce am testat ambele versiuni, diferențele au fost aproape invizibile pentru ochiul uman. Să aruncăm o privire la versiunea de meniul nostru.
Slide meniul din stânga
Acest lucru lasă meniul din partea stângă asupra conținutului. Și CSS-cod pentru ea:
Slide meniul din dreapta
Acest lucru lasă meniul de pe partea dreaptă asupra conținutului. Și CSS-cod pentru ea:
Acest meniu pleacă din partea de sus asupra conținutului. Și CSS-cod pentru ea:
Bottom Slide Meniu
Acest meniu lasă pe partea de jos asupra continutului. Și CSS-cod pentru ea:
Acest lucru lasă meniul din partea stângă, și transferate la conținutul adecvat. Cele mai multe dintre codul este ca codul pentru meniul, merge la stânga, cu excepția faptului că se mișcă, de asemenea, și coajă. Să ne uităm la CSS-cod:
Push meniul din dreapta
Acest lucru lasă meniul de pe partea dreaptă și se mută la conținutul din stânga. Cele mai multe dintre codul este ca codul pentru meniul, merge spre dreapta, cu excepția faptului că se mișcă, de asemenea, și coajă. Să ne uităm la CSS-cod:
Acest lucru lasă meniul din partea de sus, și mută conținutul în jos. Cele mai multe dintre codul este ca codul pentru meniul, merge din partea de sus, cu excepția faptului că se mișcă, de asemenea, și coajă. Să ne uităm la CSS-cod:
Push meniul de jos
Acest meniu lasă pe partea de jos, și se mută conținutul în sus. Cele mai multe dintre codul este ca codul pentru meniu, merge la partea de jos, cu excepția faptului că se mișcă, de asemenea, și coajă. Să ne uităm la CSS-cod:
Acum, să ne uităm la j # 097; vascript-cod care trece cursurile noastre când faceți clic pe un alt buton de meniu. Cu aceasta, am afișat, de asemenea, masca nostru pe partea de sus a restului conținutului, și pune în aplicare butonul de închidere funcțională, atunci când utilizatorul face clic pe un buton sau o mască. Amintiți-vă că folosim classie.js pentru a adăuga sau elimina clase. j noastre # 097; vascript-cod, desigur, se referă la toate 8 meniu. Este posibil să doriți să reducă la minimum dumneavoastră j # 097; vascript-cod și scoateți-l din părțile nedorite. Să aruncăm o privire la j # 097; vascript-cod:
Și asta e! Acum, efectele noastre mari pentru meniuri sunt gata pentru a fi utilizate în proiectele tale! Am implementat de asemenea, aici interogări media, astfel încât să puteți descărca, fără îndoială, aceste coduri, sau de a lua cunoștință cu funcționalitatea în prezentul proces.
Obțineți codul sursă | Vizualizare demo