Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Come realizzare una navigazione Off-Canvas con CSS Grid

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Il pattern off-canvas è un approccio classico della navigazione responsive. Quando il viewport è abbastanza piccolo da giustificarlo, la navigazione di troppo è nascosta "off-canvas" e portata in vista solamente quando si attiva.

Oggi realizzeremo una navigazione off-canvas usando CSS per farla attivare (non è richiesto Javascript) e il nostro buon amico Grid per creare la struttura della pagina. Ecco l'intera pagina demo di quello su cui lavoreremo.

Struttura della pagina di base

Iniziamo costruendo una pagina di base; puntiamo a qualcosa del genere:

Semantic page structure
Struttura della pagina semantica

Questa è una struttura abbastanza tipica di una pagina semantica; vedrete che tutto rimane in una singola colonna nei viewport piccoli, poi l'aside si sposta sugli schermi più grandi. L'elemento <nav> è evidenziato in blue per chiarezza.

Ecco il nostro codice:

Ora aggiungiamo qualche stile visivo e alcune regole Grid.

Spassiamocela con Grid

Iniziamo avvolgendo tutti i nostri elementi strutturali in un elemento contenitore di qualche tipo - questo sarà il nostro contenitore Grid. Sto utilizzando <div class="container"></div>.

Adesso aggiungiamo qualche stile di base per grid.

Qui dichiariamo che il contenitore dovrà essere display:grid;, che dovrà avere una singola colonna di una frazione di unità (non strettamente necessaria a questo punto, ma l'abbiamo aggiunta per essere precisi), e che lo spazio tra tutti gli elementi di grid dovrà essere di 10px.

Poi aggiungiamo degli stili visivi per rendere le cose un po' più chiare:

Rendiamolo responsive

Aggiungiamo una media query, cosicché quando il viewport raggiunge una certa misura (diciamo 600px) il layout cambia.

Così ora, sugli schermi più grandi, la dichiarazione grid cambia così grid-template-columns: repeat(4, 1fr);. Questo ci dà quattro colonne di egual larghezza, così dobbiamo poi dichiarare quanto largo vogliamo ognuno dei nostri elementi strutturali. Header, nav e footer si estenderanno di 4 (estenderanno sulle quattro colonne) mentre section si estenderà solo su tre, lasciando uno spazio di una colonna per aside che si riempirà automaticamente.

Infine, qualche stile per modificare il modo in cui appare nav:

Ecco ciò che abbiamo finora:

Avventurarsi nell'Off-Canvas

Questo è un esempio perfetto di come il posizionamento di CSS può ancora funzionare sugli elementi strutturali, anche dentro un Grid dichiarato. Prenderemo la nostra nav, la rimuoveremo dal flusso del documento, e la posizioneremo off-canvas. Gli altri elementi di grid si sistemeranno bene.

Iniziamo con un'altra media query. Abbiamo già la nostra query min-width, ma questa volta vogliamo solo dare uno stile agli elementi con max-width. Finché il nostro viewport raggiunge i magici 600px vogliamo che nav sia posizionato off-canvas:

Abbiamo dato a nav una larghezza fissa, posizionandolo a sinistra abbastanza da nasconderlo completamente. Abbiamo usato anche position fixed, benché possiamo anche usare absolute dipende se vogliamo che nav scrolli con la finestra o meno.

Abbiamo anche notato la regola transition, che avrà effetto una volta che avremo costruito dei controlli di attivazione.

Attivazione

Avendo fatto sparire il nostro nav, ora abbiamo bisogno di alcuni controlli per riportare indietro ciò che ci serve. Aggiungiamo un link per dare il via ad esso e un link per chiuderlo di nuovo.

Aggiungiamo questo a header:

e questo a nav:

Non abbiamo bisogno di aprire il link per essere visibili sugli schermi più grandi, quindi nasconderemo l'elemento .toggle dentro la nostra media query min-width:

:target

Quello che è importante nei link sopra è la presenza di un "identificatore di frammento" (nav nel href). Questi identificatori sono usati dai browser per navigare direttamente verso gli elementi specifici di una pagina. In questo caso, stiamo dirigendo qualunque elemento che combina l'id "nav" e una volta che è stato centrato possiamo dargli lo stile usando la pseudo classe :target. Non è necessario Javascript!

Aggiungiamo il seguente alla nostra media query con max-width:

Questo è tutto! Questo è il nostro interruttore.

Ecco cosa abbiamo adesso:

Avrete bisogno di dare un'occhiata all'intera pagina demo per apprezzare pienamente cosa è stato fatto.

Conclusioni

E abbiamo finito! Ho tenuto lo stile al minimo per non essere d'intralcio, ma siate liberi di darvi alla pazza gioia e farlo esattamente come desiderate.

Potreste anche preferire un interruttore Javascript, invece di :target, nel qual caso abbiate tutti i pezzi a posto per fare anche questo lavoro.

Spero che vi sia piaciuto questo piccolo esercizio con Grid, restate sintonizzati per i prossimi che verranno!

Risorse utili

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.