Iată un exemplu de site-ul demo CodePen care arată rezultatul final:
Să începem cu HTML
Markup pentru un meniu ascuns va fi puțin diferită de versiunea pentru navigare meniu standard. Mai degrabă decât a pus meniul in antetul site-ului (antet), va fi pus imediat după eticheta de deschidere a corpului. Structura de bază este după cum urmează:
După cum puteți vedea, aspectul site-ului nostru este format din trei elemente principale: navigare, caseta de selectare (checkbox) și etichete tag-ul asociat, precum și direct la conținutul site-ului. Aici ar trebui să rețineți câteva puncte:
Partiționarea cod de navigație situat în primul rând pentru că navigare este „în spatele“ toate celelalte elemente ale site-ului. Pentru a crea navigarea puteți utiliza orice HTML-tag-uri. În acest caz, eu sunt, folosind lista detaliată obișnuită.
Declanșatorul pentru extinderea tag-ul nostru de intrare de meniu va cu un tip de casetă de selectare și eticheta tag-ul. De obicei, eticheta tag-ul înainte de eticheta este de intrare sau de intrare tag-ul tag-ul etichetă înfășurat. Dar, în acest caz, eticheta de intrare pentru a merge direct la tag-ul etichetă. Și, mai departe, adăugând CSS-stiluri, vom vedea de ce.
Toate celelalte elemente ale site-ului ar trebui să fie înfășurat într-o etichetă div separat. Acest lucru trebuie făcut astfel încât, atunci când deschideți restul conținutului meniului pentru a vă deplasa în jos un pic pentru marginea ecranului pentru a afișa elementele ascunse de navigare.
Acum, că avem structura de bază HTML, putem lua aspectul meniul nostru!
CSS-stiluri pentru elementele de meniu
Să începem prin adăugarea de stiluri la meniul în sine și punctele sale. Primul lucru pe care trebuie să ne asigurăm că meniul nostru este o pagină conținutul, și stă în loc atunci când utilizatorul derulează pagina:
Apoi, am adăugat câteva stiluri pentru aspectul nostru de navigare mai atractiv (culoare de fundal, borduri, pante, etc.). Nu voi da acest cod aici, dar puteți vedea exact cum am făcut-o în exemplul demo. Acum avem câteva opțiuni de meniu frumos, dar, în general, acest lucru nu este sănătos, deoarece conținutul nostru este situat direct pe meniul nostru. Să adăugăm unele stil pentru a ascunde meniul până la momentul potrivit.
CSS-stiluri pentru site-ul „înveliș“
Pentru a începe, să se asigure că conținutul site-ului se ascunde complet meniul nostru. În această etapă, puteți adăuga câteva paragrafe din «Lorem ipsum» la elementul nostru cu clasa .site-wrap, în cazul în care nu ați adăugat niciun conținut.
Este demn de remarcat faptul că sunt necesare pentru a specifica fundalul unui element cu .site-wrap clasa, în caz contrar, meniul va arăta prin conținut. Puteți, desigur, instala orice fundal, care va dori. Personal, am folosit următoarele:
CSS-stiluri pentru Trigger meniu
Următorul pas este de a adăuga stiluri pentru a schimba aspectul meniului pentru a declanșa caseta de obicei pe o pictogramă „hamburger“ clasic, pe care știm cu toții și dragoste. În primul rând, să se ascundă în caseta de validare.
Așa că am ascunde caseta de selectare folosind proprietatea clip care necesită poziție proprietate: absolută pentru un element dat. Acum ne-am stabilit stilul pentru elementele de etichetare:
Am folosit ca element de SVG imagine de fundal încorporat. dar puteți utiliza orice altă pictogramă. inclusiv utilizarea unor pseudo-elementele: înainte și: după, să refacă pictograma „hamburger“ în CSS pură. Rețineți că am adăugat, de asemenea, un cursor caracteristică: pointer, pentru a evidenția vizual pictograma atunci când treceți.
CSS-stiluri, pentru a deveni un declanșator activ
Acum, când clearance-ul dat la meniul nostru, „ambalaj“ a site-ului și pe trăgaci, să adăugați câteva linii de CSS, toate au lucrat în cele din urmă.
A doua parte a stilurilor de mai sus bloc ne garantează că „wrap“ a site-ului și conținutul său va fi împins la 200 de pixeli. Am adăugat, de asemenea, o umbră (proprietate box-shadow) pentru „ambalaj“ a site-ului, ceea ce ar da un sentiment suplimentar de ceea ce este în meniul de sus.
Un prim selector (.nav-declanșare: + verificat eticheta) controlează locația declanșatorului atunci când deschideți meniul. Va trebui să adăugați numărul am folosit înainte de a eticheta [pentru = „nav-declanșare“], la valoarea, care este responsabil pentru cât de departe site-ul „înveliș“ se va muta departe. În acest caz: 15px + 200px = 215px.
Atunci devine importantă ordinea elementelor din codul de declanșare. Al doilea selector utilizează un simbol
elemente legate de management pentru a indica un element cu clasa .site-wrap, atunci când un element cu o clasă .nav-declanșare va fi activ. Clasament în tag-ul de intrare cu o casetă de selectare cod de tip nu este atât de important.
Cu toate acestea, trebuie să subliniem clasa elementul .site-wrap și eticheta noastre tag-ul, bazat pe ceea ce va fi caseta de selectare nostru este activ sau nu. Pentru a face acest lucru, folosim + (selector elemente adiacente) pentru a indica un element de etichetă care urmează caseta activă. Dacă am indicat prima etichetă tag-ul, atunci am fi avut nici o șansă să-l mute, împreună cu „împachetați“ a site-ului atunci când declanșatorul este activat.
Ca o notă finală, putem adăuga CSS-tranziție (de tranziție) și de declanșare pentru „wrap“ a site-ului, la descoperirea meniul nostru, însoțite de o animatie buna. Doar asigurați-vă că ați specificat în opțiunea dumneavoastră, va trebui să introduceți versiunea de furnizor sau de a folosi ceva de genul Autoprefixer plugin.
rezultat final
Revizie: Echipa webformyself.
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram