Come creare menu vericale e orizzontale con Bootstrap

Oggi è difficile trovare un sito che non avrebbe la barra di navigazione (menu). E 'ciò che lega tutte le pagine insieme e permette al visitatore senza problemi muoversi fra di loro. Aspetto visivo del menu è una cosa molto importante di un sito web. E nella realizzazione di un bel menu senza perdere nella qualità ci puo aiutare framework Bootstrap.

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Come realizzare accordeon

Come creare markup html del menu di navigazione in Bootstrap

 Per non complicare la vita vediamo di utilizzare la nostra bozza della pagina dalla lezione precedente sto parlando del fail index3.html, vediamo di modificare il codice e a posto della lista numerata creare non numerata e aggiungere classe row al div che contiene questa lista che sara il  nostro futuro menu o navigazione del sito. Esso occuperà tutta la larghezza della pagina (riempe 12 colonne di larghezza secondo la sistema a griglia di Bootstrap ):

<div class="row">
<ul>
<li><a href="#">Css pratica</a></li>
<li><a href="#">Sito web da 0</a></li>
<li><a href="#">Dominio e Hosting</a></li>
<li><a href="#">Dominio e Hosting</a></li>
</ul>
</div>

 

menu bootstrap7

Menu in forma delle schede o tab

Vediamo di stilizzare il nostro menu utilizzando le opportunità di Bootstrap 3. Tutto quello che dovete fare, aggiungere rispetivi classi del nostro farmework . Per creare un menu in stile delle schede(tab), è necessario aggiunto al tag della lista non numerata la classe nav nav-tabs, beh, e al tag <li>, come abbiamo fatto in precedenza per la pagina in vista aggiungere la classe active (che l'utente sapia la risposta alla domanda: "dove mi trovo? ").

<div class="row">   
    <ul class="nav nav-tabs">
    <li><a href="#">Css pratica</a></li>
    
    <li class="active"><a href="#">Sito web da 0</a></li>
    
    <li><a href="#">Dominio e Hosting</a></li>
    
    <li ><a href="#">Dominio e Hosting</a></li>
    </ul>
 </div> 

Di conseguenza, una semplice lista magicamente si trasforma in un menu degno dello sguardo del nostro futuro lettore:

Fantastico, eh? Mi piace bootstrap.

Classi del  menu verticale in Bootstrap

Se si vuole creare un menu verticale, è necessario aggiungere solo un altra classe: nav-stacked e otterremo qualcosa simile :

<ul class="nav nav-tabs nav-stacked">
     ...
     </ul>

La verità e che nel nostro caso sarà inutile, ma nel menu verticali molto spesso si aggiungono elementi secondarie di navigazione (racchiudendoli in una colonna a sinistra o a destra del sito), quindi è necessario capire come posimo farle anche questo tipo del menu in Bootstrap.

A proposito, la scelta di tab di Bootstrap per menu verticale non è il massimo, quindi è meglio in questo caso utilizzare bottoni per varie voci del menu , che possono essere realizzati sostituendo la classe nav-tabs con nav-pills:

<div class="row">   
    <ul class="nav nav-pills nav-stacked">
    <li><a href="#">Css pratica</a></li>
    
    <li class="active"><a href="#">Sito web da 0</a></li>
    
    <li><a href="#">Dominio e Hosting</a></li>
    
    <li ><a href="#">Dominio e Hosting</a></li>
    </ul>
 </div> 

 

E subito posiamo notare che il nostro menu occupa tutta la larghezza della pagina. Cosa facciamo? Ma certo! vediamo di inserire il nostro menu in un altra scatola indicando la sua larghezza con la classe  col-lg-3

<div class="row" >   
     <div class="col-lg-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">Css pratica</a></li>
            
            <li class="active"><a href="#">Sito web da 0</a></li>
            
            <li><a href="#">Dominio e Hosting</a></li>
            
            <li ><a href="#">Dominio e Hosting</a></li>
        </ul>
    </div>
 </div> 

E vediamo risultato :

 

menu bootstrap10

La pagina attualmente aperta (ativa ) del menu è evidenziata  con l'aggiunta della classe active al tag desiderato <li>. Quindi, come potete vedere, tutto è uscito abbastanza bello e senza problemi. Posiamo sempre modificare in seguito colore o qualche altro stile del nostro menu creando dei stili personalizati e inserendo esso in un foglio di stili  css e non diretamente nel fail css di bootsatrp.

Menu orizzontale in forma di bottoni

In realtà, menu che abiamo creato al inizio, quello orizzontale, anche esso possiamo trasformare dai tab ai bottoni con una semplice sostituzione dei classi (nav-tabs a nav-pills ) al interno del tag <ol>, che crea markup del  menu nel codice Html della pagina. Vedimo il risultato dopo aver sostituito i classi :

Come allargare menu di Bootstarp per tutta la pagina

 Pero per impostazione predefinita il nostro menu orizzontale no si allarga per l'intera larghezza della pagina. Ad alcune persone puo anche piacere , ma qualcuno vorrà di più. In generale, per allungare un menu in Bootstrap 3 per tutta la larghezza disponibile, ancora una volta basterebbe aggiungere un'altra classe nav-justified :

<ul class="nav nav-pills nav-justified ">/* nav> creare menu, nav-pills>  creare menu orizontale in forma di bottoni, nav-justified> allargare menu per tutta la larghezza disponiobile  */
            <li><a href="#">Css pratica</a></li>
            
            <li class="active"><a href="#">Sito web da 0</a></li>
            
            <li><a href="#">Dominio e Hosting</a></li>
            
            <li ><a href="#">Dominio e Hosting</a></li>
        </ul>

menu bootstrap12

Così, utilizzando queste cinque classi, è possibile modificare l'aspetto (e anche l'orientamento) della barra di navigazione con pochi clic.

Come adattarlo per schermi piccoli vediamo nella prossima lezione. Anche se già adesso è responsivo ma non ha l'aspetto gradito. Provate di rimpicciolire la finestra del browser con la vostra pagina di prova.

 

Letto 2354 volte