Ente accreditato Regione Veneto n.4271

Flexbox, gestione del menù di navigazione [Lezione 3]

Implementare attributi e valori per la gestione di liste elenco flessibili completamente responsive

Pubblicato da Simone Baldassin // 23 marzo 2017 // 411 visualizzazioni

gestione menu flexbox

Iniziamo a fare sul serio, in questo terzo appuntamento andiamo a vedere come Flexbox ci permetta di gestire le liste elenco, che contengono i nostri menù di navigazione, in maniera molto performante e, naturalmente, responsive.

#Flexbox: gestione del menù di navigazione | LEZIONE 3 #venetoformazione #css Click to Tweet

MENU DELLE LEZIONI

Lezione 1: introduzione e primo approccio

Lezione 2: esercizi di base per la strutturazione

Lezione 3: gestione del menù di navigazione

Lezione 4: gestione dei layout multicolonna

Lezione 5: gestire il Grid System

La struttura che andremo a realizzare è quella della figura che segue

Flexbox Nav

Come possiamo vedere abbiamo un menù di navigazione che si presenta in 5 diverse modalità di visualizzazione; a ognuna delle liste, infatti, è stata data una differente formattazione utilizzando più attributi di Flexbox, fatta esclusione per la prima che ci presenta il default.

Flexbox Nav

Come sempre andiamo a effettuare un normalize del CSS e passiamo alla formattazione standard; definiamo un contenitore come da figura che contenga il tutto.

Flexbox Nav

Formattiamo le liste generali.

Flexbox Nav

Torniamo un attimo indietro nel foglio di stile e, tra il contenitore e la formattazione dei marcatori li, iniziamo a dare le regole alle ul; abbiamo chiamato la prima semplicemente .nav; andiamo ora a dichiararla come da figura successiva.

Flexbox Nav

Vediamo che, oltre a dichiarare la lista display: flex; andiamo a definire una direzione degli elementi al suo interno utilizzando i diversi valori forniti dall’attributo flex-direction.

I valori possibili sono:

  1. row: valore di default, gli elementi partono da sinistra;
  2. row-reverse: gli elementi partono da destra;
  3. column: gli elementi vanno uno sotto l altro;
  4. column-reverse: gli elementi vanno uno sotto l altro in ordine decrescente.

Possiamo già capire da soli come questi vadano a sostituire i valori classici che siamo abituati ad utilizzare normalmente.

Passiamo ora a creare le altre 4 liste, alle quali assegneremo la classe nav per la formattazione generale, e una seconda classe per gestire un attributo specifico che risponde al nome di justify-content. Chiameremo la prima .end, la seconda .center, la terza .between e la quarta .around.

Flexbox Nav

Nel CSS andiamo ad assegnare, ad ognuna di queste, un valore differente all attributo justify-content cosi che possiamo vedere subito come si comportano.

Flexbox Nav

Come possiamo vedere, i valori che utilizziamo sono flex-end, center, space-between e space-around.

Vediamoli nel dettaglio:

  1. flex-end: gli elementi partono a destra;
  2. center: gli elementi vanno al centro senza dover dare nessuna dichiarazione ulteriore;
  3. space-between: gli elementi si distribuisco sinistra, centro, destra sfruttando tutto lo spazio disponibile;
  4. space-around: gli elementi si distribuisco sinistra, centro, destra ma gestendo lo spazio vuoto.

Da bravi designer quali siete potete immaginare il quantitativo industriale di problematiche che questi attributi risolvono nei nostri layout.

Con la dovuta pratica potete far vostro questo metodo di lavoro in brevissimo tempo e bypassare le normali difficoltà nate dalla gestione dei parametri standard di liste e menù.

La prossima lezione sarà online il 6 Aprile e vedremo come mescolare queste dichiarazioni e come gestire i layout multicolonna in maniera semplice e efficace.

A buon rendere

Topic: , ,

Send this to a friend