Modelul off-panza este o abordare clasică pentru navigarea receptivă. Atunci când portul de vizualizare este suficient de mic pentru a justifica acest lucru, navigarea voluminoasă este ascunsă "în afara panoului" și este adusă în vedere doar atunci când se comută.
Astăzi vom construi o navigație off-canvas, folosind CSS pentru a face schimbarea (fără JavaScript necesar) și bunul nostru prieten Grid pentru a forma structura paginii. Iată demo-ul complet al paginilor la care lucrăm.
Structura paginii de bază
Să începem prin construirea unei pagini de bază; căutăm pentru așa ceva:
Structura paginii semantice
Aceasta este o structură destul de tipică a paginii semantice; veți vedea că totul rămâne într-o singură coloană pentru ferestrele mici de vizualizare, apoi de lângă se deplasează pe ecrane mai mari. elementul este evidențiat în albastru pentru claritate.
Iată marcajul nostru:
Antet
Articol
Curabitur orci lacus, auctor ut facilisis nc, ultricies quis nibh. Fasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas plăcută elit vel hendrerit convallis. Sed în mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu în vehicula vehicula. Dont varianta justo la nulla aliquet volutpat.
Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulpii libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sedm eros și ultricii susțin. Aenean sed efficitur orci. Nulla vel tempus mi.
Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, la rhoncus mi faucibus. În cazul în care se spune că leo scelerisque fringilla nec la nunc.
Acum, să adăugăm câteva stiluri vizuale și câteva reguli Grid.
Grăbește-te cu asta
Începeți prin împachetarea tuturor elementelor noastre structurale într-un element care conține un anumit tip - acesta va fi containerul Grid. eu folosesc .
Aici declarăm că containerul ar trebui să fie afișare: grilă;, că ar trebui să aibă o singură coloană dintr-o unitate fracționată (nu este strict necesară în acest moment, dar noi am adăugat-o să fie amănunțită) și că decalajul dintre toate elementele de rețea ar trebui să fie de 10px.
Apoi adaugati cateva stiluri vizuale pentru a face lucrurile un pic mai clare:
.container> * culoare: # 353535; font-size: 1.2m; înălțimea liniei: 1,5; padding: 20px; fundal: # d0cfc5; .container nav fundal: # 136fd2; nav ul list-style: none; marja: 0; umplutura: 0; nav a culoare: # d0cfc5 nav: hover text-decorare: nimic;
Faceți-o responsabilă
Să adăugăm o interogare media, astfel încât atunci când fereastra de vizualizare atinge o anumită dimensiune (hai să mergem la 600 de pixeli), aspectul se modifică.
@media numai pe ecran și (min-width: 600px) / * grid * / .container grid-template-coloane: repeat (4, 1fr); / * stiluri specifice de elemente * / header .container, .container nav, .container footer grid-column: span 4; .container section grid-column: span 3;
Acum, pe ecranele mari, declarația de rețea se schimbă grilă-șablon-coloane: repeat (4, 1fr);. Acest lucru ne dă patru coloane de lățime egală, deci trebuie să declare cât de mare ne dorim fiecare dintre elementele noastre structurale. antet, nav, și subsol va cuprinde toate 4 (span pe patru coloane) în timp ce secțiune va trece peste doar trei, lăsând un decalaj de o coloană pentru deoparte pentru a umple automat.
În cele din urmă, unele stiluri pentru a modifica modul în care arată nav:
/ * stiturile nav * * / nav ul li display: inline-block; umplutura: 0 20px 0 0;
Iata ce avem pana acum:
Venturing Off-Canvas
Acesta este un exemplu perfect pentru modul în care poziționarea CSS poate funcționa în continuare asupra elementelor structurale, chiar și în cadrul unei rețele declarate. O să ne luăm nava, să o scoatem din fluxul de documente și să o poziționăm în afara panzei. Celelalte elemente ale grilei se vor situa foarte bine.
Începeți cu o altă interogare media. Avem deja pe noi min lățime interogare, dar de data aceasta nu vrem decât să stilim elemente de până la lățimea maximă. Până când fereastra noastră de vizualizare ajunge la acea magie de 600px, dorim ca navul să fie poziționat în afara panzei:
Numai ecranul @media și (max-width: 599px) #nav position: fixed; / * sau alegeți 'absolut' în funcție de comportamentul dorit * / top: 0; fund: 0; lățime: 300px; stânga: -340px; tranziție: transformare .3 ușurință în ieșire;
Am oferit navei o lățime fixă, poziționându-l lăsând suficient pentru a-l ascunde complet.
Am folosit poziția fix, dar ați putea folosi de asemenea absolut aici, în funcție de dacă vreți navigatorul să deruleze cu fereastra sau nu.
Veți observa de asemenea tranziție , care va intra în vigoare odată ce vom construi comenzi de comutare. Vom trece din nou panoul nav în vederea utilizării transforma. Mulțumesc lui Rachel Nabors și lui Joe Zimmerman pentru că mi-a adus aminte de asta transforma este întotdeauna mai performant pentru animație decât poziţie!
basculând
După ce a dispărut vasul nostru, avem nevoie acum de niște controale pentru ao aduce înapoi când este necesar. Să adăugăm un link care să-l declanșeze și un link să îl închidem din nou.
Adăugați-o în antet:
deschis
și asta la nav:
închide
Nu avem nevoie ca link-ul deschis să fie vizibil pe ecrane mari, astfel încât să ascundem elementele .toggle în cadrul interogării media min-width:
.comutați display: none;
:ţintă
Ceea ce este important în legăturile de mai sus este prezența unui "identificator de fragmente" ( #nav în href). Aceste identificatori sunt utilizate de browsere pentru a naviga direct către anumite elemente dintr-o pagină. În acest caz, vizăm oricare element care se potrivește cu id-ul "nav" și, odată ce a fost vizat, îl putem modela utilizând :ţintă pseudo-clasă. Nu este necesar JavaScript!
Notă: utilizarea unui identificator de fragmente în acest mod va determina adăugarea unei intrări în istoricul browserului de fiecare dată când este făcut clic. Acest lucru nu poate fi rezultatul dorit de utilizatori! Mulțumită lui Joe Zimmerman pentru că a arătat acest lucru.
Adăugați următoarele la interogarea noastră media maximă:
#nav: țintă transform: translateX (340px);
Asta e! Asta e treaba noastră.
Iată ce avem acum:
Va trebui să aruncați o privire la demonstrația completă a paginii pentru a aprecia pe deplin ce face.
Concluzie
Și am terminat! Am păstrat stilul până la un nivel minim, pentru a nu vă lăsa în cale, dar nu ezitați să faceți nuci și să faceți acest lucru exact cum doriți.
De asemenea, puteți prefera o comutare JavaScript, în loc de :ţintă, caz în care aveți toate piesele în loc pentru a face acest lucru prea.
Sper că v-ați bucurat de acest mic exercițiu Grid, stați la dispoziție pentru mai multe!
Resurse utile
Înțelegerea seriei CSS Grid Layout pe Tuts+
Examinând navigarea responsabilă: modelele de pe panza de pe Steven Bradley
Abonați-vă la csslayout.news
Animații de înaltă performanță de Paul Lewis și Paul Irish
Accentsconagua
Share
Structura paginii semantice
