Il pattern off-canvas è un approccio classico alla navigazione reattiva. Quando il viewport è abbastanza piccolo da giustificarlo, la navigazione ingombrante è nascosta "off-canvas" e viene visualizzata solo quando attivata.
Oggi costruiremo una navigazione off-canvas, usando i CSS per fare la commutazione (non è richiesto JavaScript) e la nostra buona amica Grid per formare la struttura della pagina. Ecco la demo della pagina completa su cosa stiamo lavorando.
Struttura della pagina di base
Iniziamo con la costruzione di una pagina di base; puntiamo a qualcosa del genere:
Struttura della pagina semantica
Questa è una struttura di pagina semantica abbastanza tipica; vedrai che tutto rimane in una singola colonna per le piccole finestre, quindi la parte si sposta su schermi più grandi. Il l'elemento è evidenziato in blu per chiarezza.
Ecco il nostro markup:
Intestazione
Articolo
Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Mecenate placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo a 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 vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.
Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, presso rhoncus mi faibus. In et tellus vitae leo scelerisque fringilla nec al nunc.
Ora aggiungiamo alcuni stili visivi e alcune regole Grid.
Gettin 'Griddy With it
Inizia avvolgendo tutti i nostri elementi strutturali in un elemento di contenimento di qualche tipo: questo sarà il contenitore della griglia. sto usando .
Qui stiamo dichiarando che il contenitore dovrebbe essere display: grid;, che dovrebbe avere una singola colonna di un'unità frazionaria (non strettamente necessaria a questo punto, ma la aggiungiamo per essere completa) e che il divario tra tutti gli elementi della griglia dovrebbe essere 10px.
Quindi aggiungi un paio di stili visivi per rendere le cose un po 'più chiare:
.contenitore> * color: # 353535; font-size: 1.2em; altezza della linea: 1,5; imbottitura: 20px; sfondo: # d0cfc5; .container nav background: # 136fd2; nav ul list-style: none; margine: 0; padding: 0; nav a color: # d0cfc5 nav a: hover text-decoration: none;
Rendilo reattivo
Aggiungiamo una query multimediale, in modo che quando la vista raggiunge una certa dimensione (andiamo per 600px) il layout cambia.
@media solo schermo e (min-larghezza: 600px) / * grid * / .container grid-template-columns: repeat (4, 1fr); / * stili degli articoli specifici * / .container header, .container nav, .container footer grid-column: span 4; .container section grid-column: span 3;
Così ora, su schermi più grandi, la dichiarazione della griglia diventa grid-template-columns: repeat (4, 1fr);. Questo ci dà quattro colonne di uguale larghezza, quindi dobbiamo dichiarare quanto vogliamo ciascuno dei nostri elementi strutturali. Il intestazione, nav, e footer copriranno tutti 4 (span su quattro colonne) mentre il sezione attraverserà solo tre, lasciando uno spazio di una colonna per il a parte riempire automaticamente.
Infine, alcuni stili per modificare il modo in cui appare la nav:
/ * stili di navigazione * / nav ul li display: inline-block; riempimento: 0 20px 0 0;
Ecco cosa abbiamo finora:
Avventurarsi fuori tela
Questo è un esempio perfetto di come il posizionamento CSS possa ancora funzionare su elementi strutturali, anche all'interno di una griglia dichiarata. Prendiamo il nostro nav, lo rimuoviamo dal flusso del documento e lo posizioniamo off-canvas. Gli altri elementi della griglia andranno a posto correttamente.
Inizia con un'altra query multimediale. Abbiamo già il nostro min-width query, ma questa volta vogliamo solo creare uno stile fino a a larghezza massima. Fino a quando la nostra vista raggiunge quella magia 600px vogliamo che il nav sia posizionato fuori dal canvas:
@media solo schermo e (larghezza massima: 599px) #nav posizione: fissa; / * o scegli 'absolute' in base al comportamento desiderato * / top: 0; fondo: 0; larghezza: 300 px; a sinistra: -340px; transizione: trasforma .3s easy-in-out;
Abbiamo dato al nav una larghezza fissa, posizionandola a sinistra abbastanza da nasconderla completamente.
Abbiamo usato la posizione fisso, ma potresti anche usarlo assoluto qui, a seconda se vuoi che nav navighi con la finestra o meno.
Noterai anche il transizione regola, che entrerà in vigore una volta creati alcuni controlli di attivazione / disattivazione. Passeremo alla visualizzazione del pannello di navigazione usando trasformare. Grazie a Rachel Nabors e Joe Zimmerman per avermelo ricordato trasformare è sempre più performante per l'animazione di posizione!
Commutazione
Dopo aver fatto sparire il nostro nav, ora abbiamo bisogno di alcuni controlli per portarlo indietro quando necessario. Aggiungiamo un link per attivarlo e un link per chiuderlo di nuovo.
Aggiungi questo all'intestazione:
Aperto
e questo al nav:
vicino
Non è necessario che il link aperto sia visibile su schermi più grandi, quindi nasconderemo gli elementi .toggle all'interno della nostra query media di larghezza minima:
.attiva / disattiva display: none;
:bersaglio
Ciò che è importante nei link sopra è la presenza di un "identificatore di frammento" (il #nav nel href). Questi identificatori vengono utilizzati dai browser per spostarsi direttamente su elementi specifici in una pagina. In questo caso, stiamo prendendo di mira qualsiasi elemento corrisponda all'id "nav", e una volta che è stato preso di mira, possiamo modificarlo usando il :bersaglio pseudo classe. Non è necessario JavaScript!
Nota: l'uso di un identificatore di frammento in questo modo causerà l'aggiunta di una voce alla cronologia del browser ogni volta che viene fatto clic. Questo potrebbe non essere il risultato desiderato dai tuoi utenti! Grazie a Joe Zimmerman per averlo indicato.
Aggiungi quanto segue alla nostra query multimediale di larghezza massima:
#nav: target transform: translateX (340px);
Questo è tutto! Questo è il nostro interruttore.
Ecco cosa abbiamo ora:
Dovrai dare un'occhiata alla demo della pagina completa per apprezzare appieno cosa sta facendo.
Conclusione
E abbiamo finito! Ho ridotto lo stile al minimo per non intromettermi, ma sentitevi liberi di impazzire e di dare questo aspetto esattamente come volete.
Potresti anche preferire un interruttore JavaScript, anziché il :bersaglio, nel qual caso hai tutti i pezzi in posto per fare anche quel lavoro.
Spero che ti sia piaciuto questo piccolo esercizio di Grid, rimanete sintonizzati per altri a venire!
Risorse utili
Informazioni sulla serie di layout griglia CSS su Tut+
Esaminando la Navigazione Responsive: Off Canvas Patterns di Steven Bradley
Iscriviti a csslayout.news
Animazioni ad alte prestazioni di Paul Lewis e Paul Irish
Accentsconagua
Share
Struttura della pagina semantica
