Twitter Bootstrap: come realizzare dei menu accattivanti?

Eccoci ad un nuovo appuntamento con il  Twitter Bootstrap. Abbiamo visto finora gli elementi base che lo compongono: la griglia, la tipografia, le form, le tabelle ed i pulsanti. In questa lezione scoprirai come utilizzare questi elementi per realizzare strutture più complesse. Divideremo la lezione in due parti: nella prima realizzeremo insieme un dropdown, un button dropdown ed una barra di menu; nella seconda parte creeremo, invece, un sistema di paginazione, delle breadcrumb, dei messaggi di alert ed una progress-bar.

Come realizzare un dropdown?

Attraverso le classi del Bootstrap è possibile realizzare un dropdown anche piuttosto complesso senza alcuna fatica; è sufficiente infatti assegnare delle semplici classi agli elementi per avere il risultato già funzionante. Vediamo insieme come.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; width: 180px;">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

Il codice appena visto realizza il dropdown che di default è nascosto. L’unica classe di cui abbiamo bisogno è la classe dropdown-menu da assegnare direttamente alla lista; attraverso la classe divider da assegnare ad un elemento della lista, invece, possiamo inserire un comodissimo separatore.

Un primo esempio è disponibile al seguente link. Ho inserito dello stile in linea per visualizzare il dropdown già aperto.

Ora che abbiamo visto come realizzare un dropdown semplice, iniziamo a complicare un pò le cose aggiungendo un nuovo livello.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; width: 180px;">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li class="divider"></li>  
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">More options</a>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

Riprendendo il codice del primo esempio abbiamo aggiunto una nuova lista puntata come figlia della prima. All’elemento della lista che la contiene è stata assegnata la classe dropdown-submenu con cui attiviamo automaticamente il nuovo livello. Attraverso la classe appena vista possiamo anche inserire ulteriori sotto-livelli.

Nel seguente esempio possiamo vedere differenti livelli di dropdown.

Come realizzare un button con un dropdown?

Abbiamo visto che realizzare il dropdown è semplicissimo; abbiamo bisogno di due sole classi, senza alcun bisogno di codice CSS aggiuntivo. Vediamo ora come utilizzare un menu dropdown collegandolo ad uno dei button realizzati nella precedente lezione. Prima di vedere il codice, però, voglio precisare che, in questo caso, abbiamo bisogno di includere anche il file bootstrap.js descritto nella lezione iniziale del corso affinchè il menu si apra correttamente.

<div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
        Click Me
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
	  <li><a tabindex="-1" href="#">Action</a></li>
	  <li><a tabindex="-1" href="#">Another action</a></li>
	  <li><a tabindex="-1" href="#">Something else here</a></li>
	  <li class="divider"></li>  
	  <li class="dropdown-submenu">
	    <a tabindex="-1" href="#">More options</a>
	    <ul class="dropdown-menu">
	      <li><a tabindex="-1" href="#">Action</a></li>
	      <li><a tabindex="-1" href="#">Another action</a></li>
	      <li><a tabindex="-1" href="#">Something else here</a></li>
	    </ul>
	  </li>
	</ul>
</div>

Il codice precedente inserisce un menu dropdown a due livelli ad un semplice button e, automaticamente, implementa la sua apertura al click. Anche stavolta non abbiamo bisogno di nessun codice aggiuntivo ma della classe dropdown-toggle  e dell’attributo data-toggle con valore dropdown assegnati al pulsante. L’elemento span con classe caret, invece, è utilizzato per mostrare la freccetta verso il basso; utile per far comprendere all’utente che cliccando si aprirà un menu.

Come abbiamo visto nella lezione sui pulsanti, ci sono differenti stili che è possibile assegnare ai button attraverso una semplice classe. Anche nel caso di button con menu dropdown è possibile utilizzare queste classi.

Vediamo un esempio con button di stili differenti che implementano un menu dropdown.

Se anche tu come me sei rimasto stupito dalla semplicità con cui abbiamo realizzato qualcosa di piuttosto complesso e lungo da sviluppare utilizzando solo poche righe di HTML e nemmeno una di CSS, resterai ancora più esterrefatto vedendo come possiamo estendere ancora di più i button precedenti.

Possiamo, infatti, realizzare un menu dropdown in cui l’azione del button e il dropdown sono gestiti separatamente. Vediamo come:

<div class="btn-group">
    <button class="btn">Click Me</button>
	<button class="btn dropdown-toggle" data-toggle="dropdown">
	    <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
	  <li><a tabindex="-1" href="#">Action</a></li>
	  <li><a tabindex="-1" href="#">Another action</a></li>
	  <li><a tabindex="-1" href="#">Something else here</a></li>
	  <li class="divider"></li>  
	  <li class="dropdown-submenu">
	    <a tabindex="-1" href="#">More options</a>
	    <ul class="dropdown-menu">
	      <li><a tabindex="-1" href="#">Action</a></li>
	      <li><a tabindex="-1" href="#">Another action</a></li>
	      <li><a tabindex="-1" href="#">Something else here</a></li>
	    </ul>
	  </li>
	</ul>
</div>

Anche in questo caso è disponibile un esempio.

Come realizzare una barra di menu?

Chiudiamo la prima parte della quarta lezione scoprendo insieme come realizzare una barra di menu. In questa lezione ci limiteremo ad una barra di menu con un solo livello, nell’ultima lezione scopriremo invece come utilizzare il dropdown anche con la barra di menu.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Menu</a>
    <ul class="nav">
      <li class="active"><a href="#">File</a></li>
      <li><a href="#">Modifica</a></li>
      <li><a href="#">Visualizza</a></li>
      <li><a href="#">?</a></li>
    </ul>
  </div>
</div>

Anche in questo caso abbiamo avuto bisogno di alcune classi e nulla di più. Possiamo usare un elemento <a> con classe brand nel caso volessimo un titolo per il menu e una lista con classe nav per i vari elementi. Nell’eventualità di voler evidenziare un elemento corrente, è possibile assegnare la classe active all’elemento.

Esempio.

Conclusioni

Termina qui la prima parte della lezione quattro sul Twitter Bootstrap. Anche stavolta abbiamo potuto toccare con mano che la semplicità di utilizzo resta la medesima anche quando si ha a che fare con elementi più complessi.

Hai già iniziato a realizzare la tua applicazione con il Bootstrap? Quali benefici stai trovando con la libreria?

Indice

  1. Come sviluppare rapidamente applicazioni web?
  2. Come utilizzare le griglie?
  3. Come implementare l’uso di form e pulsanti?
  4. Come creare le interfacce delle nostre applicazioni?
    • Come realizzare dei menu accattivanti?
    • Come realizzare navigazione, alert e progress bar?
  5. Come far interagire gli utenti con le applicazioni?
Tag: , , ,

L'autore

Web Developer per vocazione. Team leader presso Your Inspiration Web. Ama tutto quello che gravita intorno alla User Experience e allo sviluppo web, con un occhio di riguardo a jQuery. Laureato in Informatica all'Università degli Studi dell'Aquila, scrive di web anche su blog stranieri. Facebook - Twitter - Google+

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

4 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo