- Learn
- Flexbox, guida pratica
- Creare un menu di navigazione orizzontale
Creare un menu di navigazione orizzontale
Il caso della centratura dimostra come in tanti scenari possiamo manipolare come desideriamo elementi flessibili intervenendo solo sul loro contenitore. Un altro esempio tipico è rappresentato da menu di navigazione orizzontali basati su liste.
Tipicamente per questa operazione si procede in questo modo:
- si prepara la lista eliminando il marcatore e resettando margini e padding;
- si usa la proprietà
float
o la dichiarazionedisplay: inline-block
per sistemare gli item di lista l’uno accanto all’altro orizzontalmente; - si formattano le voci del menu impostando larghezza, margini, padding, colori.
Con flexbox gli step necessari rimangono 3, ma il secondo passaggio non prevede l’adozione di float
o inline-block
. Vediamo come.
Nella seconda demo siamo partiti da questa struttura HTML, un elemento nav
con all’interno una lista ul
:
<nav class="main-nav">
<ul class="main-menu">
<li class="menu-item"><a class="menu-link" href="#">home</a></li>
<li class="menu-item"><a class="menu-link" href="#">italia</a></li>
<li class="menu-item"><a class="menu-link" href="#">mondo</a></li>
<li class="menu-item"><a class="menu-link" href="#">politica</a></li>
<li class="menu-item"><a class="menu-link" href="#">economia</a></li>
<li class="menu-item"><a class="menu-link" href="#">tecnologia</a></li>
<li class="menu-item"><a class="menu-link" href="#">cultura</a></li>
<li class="menu-item"><a class="menu-link" href="#">sport</a></li>
<li class="menu-item"><a class="menu-link" href="#">motori</a></li>
</ul>
</nav>
Una volta azzerata la lista, senza flexbox otteniamo questo:
Agiamo quindi sul box contenitore, la lista con classe .main-menu
:
.main-menu {
display: flex;
display: -webkit-flex;
}
Abbiamo già fatto più di metà dell’opera, gli item sono ora disposti orizzontalmente, uno accanto all’altro, senza float e simili:

Non ci rimane che agire sui link contenuti nei li
per dare l’aspetto visuale che desideriamo:
.menu-link {
font-weight: bold;
color: #fff;
display: block;
padding: 10px;
}
.menu-link:hover {
background-color: #51caf3;
color: #fff;
}
Ancora una volta è bastato agire sull’elemento contenitore. Ed è bastato fare ricorso solo a display: flex
, senza specificare ulteriori proprietà del flexbox. In realtà è come se avessimo scritto:
.main-menu {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
}
Gli item si collocano infatti su una riga (row), in orizzontale. Ma flex-direction: row
è il valore di default per i box flessibili, e pertanto la dichiarazione si può omettere.
Varianti: disposizione delle voci del menu
La seconda demo contiene, oltre al menu nella sua configurazione di base, 4 varianti. Per ciascuna di esse abbiamo modificato la proprietà justify-content
usando tutti i suoi possibili valori, ovvero (dall’alto in basso):
flex-end
;center
;space-between
;space-around
.
Nel primo menu il valore è quello di default, flex-start
, che allinea gli elementi all’inizio della riga.
/* Stili navigazione varianti */
.end {
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
.center {
justify-content: center;
-webkit-justify-content: center;
}
.between {
justify-content: space-between;
-webkit-justify-content: space-between;
}
.around {
justify-content: space-around;
-webkit-justify-content: space-around;
}
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Attacco a MD5 con Back Track – parte 1
Violare un codice MD5 con un cosiddetto “attacco a dizionario” è relativamente facile: con un piccolo script Python cerchiamo la […]