Aici este o versiune demo prezinta rezultatul final:
A se vedea Pen Awnjk 7661
Să începem cu marcajul HTML
Această bază de markup structura html:
Intreaga structura a site-ului nostru este format din trei părți principale: un meniu de navigare, o etichetă casetă de selectare, iar conținutul site-ului.
-
Repere markup:
Acum, când vom obține structura HTML putem începe să facă afară frumos.
CSS pentru elementele de meniu
Să începem cu setările de meniu și a elementelor sale. În primul rând, trebuie să ne asigurăm că meniul de navigare se află în spatele conținutul nostru și că acesta rămâne în vigoare, chiar dacă utilizatorul se mută într-o pagină:
Am adăugat stiluri pentru a personaliza designul meniului nostru (culoare de fundal, borduri, pante, etc.). Nu voi repeta codul aici, dar îl puteți găsi în exemplul demo.
Acum avem un elemente de meniu frumos, dar meniul este de peste conținutul paginii. Trebuie să adăugați stiluri pentru a ascunde meniul până când ne-am înființat pagina cu conținut.
CSS pentru a bloca site-ul de conținut
Pentru a începe, să ne asigurăm că conținutul unui site acoperă complet meniul nostru. Puteți adăuga câteva paragrafe în RybaTeksta .site-wrap, în cazul în care nu ați adăugat încă conținut.
Rețineți că trebuie să specificați fundal .site-wrap, un alt meniu va apărea în spatele conținutului. Puteți utiliza, desigur, orice fundal pe care doriți. Am adăugat următorii parametri:
CSS pentru butonul de meniu
Acum vom adăuga stiluri care se va adăuga casetele de selectare pentru eticheta noastre și toate forma obișnuită la care toate utilizate pentru a.
În primul rând, să ascunde caseta.
Setări Displa: bloc de important. În mod implicit, elementele de intrare afișa ca inline-bloc. așa că trebuie să-l instalați ca un bloc. astfel încât să putem seta lățimea și înălțimea la zero. Dacă vom folosi display: none sau vizibilității pentru: ascuns ar tăia interacțiunea tastaturii cu meniul, asa ca l-am evitat.
Acum a lasa Ornament:
În primul rând, vom stabili poziția: fix; Acum, eticheta va fi la o locație fixă în timpul paginii de defilare. proprietăți de sus și din stânga a specifica cât de departe de marginea butonului va fi localizat. Am stabilit, de asemenea, z-index, care ar fi fost deasupra butonului .site-wrap.
În continuare, vom adăuga o pictogramă pentru buton.
Am folosit SVG încorporat ca imagine de fundal, dar puteți folosi orice pictogramă.
Vă rugăm să rețineți, am inclus, de asemenea, un cursor: pointer; pentru afișarea vizuală a butoanelor interactive.
animație CSS
Acum, când stilurile noastre de meniu și butonul sunt gata, să adăugați câteva linii de CSS pentru toate anima.
Al doilea bloc asigură că conținutul site-ului se va deplasa spre dreapta cu 200 de pixeli. Am adăugat, de asemenea, o umbra picătură pentru a bloca conținutul pentru a oferi o imagine vizuală suplimentară a faptului că te face sa razi.
Un prim selector (.nav-declanșare: verificat + etichetă) monitorizează poziția declanșatorului atunci când meniul este deschis. Valoarea 215 se obține din suma valorilor 15 (eticheta [pentru = „nav-declanșare“] valoare din stânga) și 200 (.nav-trigger: verificat
Site-folie de valoare din stânga)
Codul în cazul în care ordinea elementelor devine un declanșator important. Utilizări al doilea selector
Selector pentru .site-wrap, atunci când .nav-declanșare selectat.
În cele din urmă, se acoperă pentru a derula pe orizontală.
versiune gata
A se vedea Pen Awnjk 7661
Acum, că știi cum se face, puteți utiliza diferite variante și personalizare, încercați să experimenteze.