Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Creare un menu di navigazione orizzontale

Manipolare elementi flessibili intervenendo solo sul contenitore. Un esempio tipico è rappresentato da menu di navigazione orizzontali basati su liste.
Manipolare elementi flessibili intervenendo solo sul contenitore. Un esempio tipico è rappresentato da menu di navigazione orizzontali basati su liste.
Link copiato negli appunti

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
screenshot

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
screenshot

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

Ti consigliamo anche