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 dichiarazione display: 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:

Figura 3. Menu basato su lista senza flexbox

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:

Figura 4. Menu basato su lista con flexbox

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;
}