Uno degli elementi comuni a tutti i siti web è la barra di navigazione (o navbar). La navbar è l’elemento strutturale che contiene i link che consentono di muoversi tra le varie sezioni del sito web: in poche parole è l’area della pagina che ospita il menu ed altre utilità di navigazione come, ad esempio, un motore di ricerca interna.
Bootstrap propone diverse navbar e offre la possibilità di inserirvi molti elementi oltre ai collegamenti verso altre pagine: è possibile inserire un campo di ricerca, un elenco a discesa e molti altri elementi…. Le barre di navigazione di Bootstrap sono responsive per impostazione predefinita: quando la finestra del browser diventa piccola, gli elementi della barra vengono nascosti e, al loro posto, viene visualizzato un pulsante che permette di ri-visualizzarli in pila, quindi non più in orizzontale.
La barra di navigazione è predisposta per contenere un logo che rimane sempre visibile anche quando la barra è minimizzata.
In questa lezione cominceremo proponendo una barra di navigazione semplificata in modo da focalizzarci sul meccanismo di funzionamento della barra stessa. Il codice che segue va inserito prima del div di classe container.
<nav class="navbar navbar-default" role="navigation">
<!—Logo e pulsante per barra ridimensionata -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Espandi barra di navigazione</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Logo</a>
</div>
<!—Elementi della barra -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</nav>Vediamo qualche screenshot.
La barra di navigazione estesa:
La barra di navigazione minimizzata:
La barra di navigazione è realizzata mediante il tag HTML 5 nav che appunto è deputato a contenere gli elementi di navigazione di una pagina. All’interno di questo tag abbiamo due tag div che costituiscono i due elementi fondamentali della pagina:
navbar-header
il primo con classe navbar-header contiene gli elementi che devono essere visibili anche quando la barra è minimizzata per i display di piccole dimensioni:
- si tratta del logo, realizzato mediante un collegamento con classe navbar-brand;
- e il pulsante (classe navbar-toggle) che viene mostrato quando la barra è minimizzata e serve, quando cliccato, per visualizzare (in pila) il contenuto della barra stessa. A tal fine è molto importante l’attributo "data-target", come vedremo in seguito.
Il pulsante contiene tre elementi span di classe icon-bar. Ciascuno di questi disegna una lineetta sul pulsante:
Il pulsante che permette di espandere la barra contiene anche lo span di classe sr-only con il quale è possibile definire un testo utilizzato dagli screen reader per segnalare agli utenti non vedenti che questo pulsante permette di espandere la barra.
navbar-collapse
La seconda parte della barra è costituita dagli elementi di navigazione veri e propri: essi sono racchiusi in un div di classe collapse navbar-collapse navbar-ex1-collapse e in una lista non ordinata di classe nav navbar-nav.
E’ bene precisare che la classe "navbar-ex1-collapse" non ha effetti stilistici ma è utilizzata per associare l’azione del bottone all’apertura del menu (questa classe corrisponde al valore di data-target del bottone con classe "navbar-toggle").
Si noti, ancora, che tra i vari item della lista uno è contrassegnato con la classe active: questa serve per formattare quella specifica voce di menu in modo distinto dalle altre e segnala che il collegamento di quella voce porta alla pagina corrente (cioè quella che stiamo già visualizzando).
TIP: se desiderate distanziare la barra di navigazione del bordo della finestra del browser sarà sufficiente aggiungere un po’ di padding all’elemento body della pagina.
