Corsi on-line

Navigazione responsive con Responsive Nav

Responsive Nav è il nome di una piccola libreria scritta in linguaggio JavaScript e concepita per la realizzazione di toggle menù, in sostanza delle componenti “a comparsa” per pagine Internet e Web Applications, che presenta il vantaggio di essere particolarmente contenuta nelle dimensioni, appena 1 Kb in versione minificata e compressa con GZip.

rnavProgettata soprattutto per garantire un livello di rendering ottimale sugli schermi dotati di diagonali di piccole dimensioni, come per esempio quelli degli smartphone, Responsive Nav viene rilasciata sotto licenza Open Source e non prevede alcuna dipendenza da librerie esterne come per esempio jQuery o altri framework JavaScript dello stesso tipo.

Per offrire il miglior supporto possibile alla user experience sui device mobili si avrà a disposizione il supporto per gli eventi touch e le transizioni di CSS3, il peso estremamente ridotto di Responsive Nav garantirà poi prestazioni elevate e tempi di caricamento limitati. Da segnalare inoltre la conversione automatica da height: 0 a height: auto che si rivelerà particolarmente utile in fase di ridimensionamento delle finestre.

Dopo aver scaricato la libreria, per utilizzarla basterà richiamare il foglio di stile ad essa associato tra i tag head e il necessario file JavaScript:

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

Fatto questo si dovrà passare all’HTML per la realizzazione del menù facendo attenzione che l’elemento nav sia associato al selettore nav-collapse (comunque modificabile nel nome tramite apposita opzione):

<nav class="nav-collapse">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Chi siamo</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</nav>

Si avranno comunque a disposizione numerosi parametri per personalizzare il menù scegliendo, per esempio, se attivare o meno le animazioni o con quale velocità dovranno essere effettuate le transizioni. La libreria consentirà di creare menù utilizzabili anche nel caso in cui JavaScript sia stato disabilitato sul browser Web.

Compatibile con tutti i browser più utilizzati (gli output saranno visibili persino su Internet Explorer 6), Responsive Nav produce menù accessibili tramite gli screen readers ed è talmente leggero che, in pratica, annulla qualsiasi latenza tra un touch e l’evento ad esso collegato.

Via Responsive Nav

Post correlati
I più letti del mese
Tematiche