Corsi on-line

Sidebar responsive con Sidr e jQuery

Sidr è un plugin per il framework JavaScript jQuery che consente di realizzare sidebar, in particolare dei menù per la navigazione, secondo i criteri del Responsive Design; in sostanza si tratta di una soluzione che permetterà di ottenere un effetto molto simile a quello utilizzato per esempio su Facebook per la visualizzazione della barra laterale su dispositivo mobile, con in più la garanzia della maggior adattabilità possibile ai display dei vari device e alle dimensioni delle loro diagonali.

CatturaSidr è un’estensione gratuita rilasciata sotto licenza Open Source e scaricabile dalla piattaforma di code hosting GitHub, motivo per il quale potrà essere utilizzata e modificata liberamente anche per la creazione di fork; una volta acquisita la propria copia del plugin lo si potrà integrare in una pagina Web, dopo aver richiamato jQuery, tramite una semplice inclusione. Lo sviluppatore avrà inoltre la possibilità di scegliere tra uno dei due temi in dotazione: “Dark” e “Light”.

L’esempio seguente mostra un’impostazione standard nella quale vengono coinvolti il file CSS del tema “Dark”, il file JavaScript del framework e infine quello che contiene il codice dell’estensione:

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->

    <!-- Inclusione del file CSS per il tema -->
    <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
  </head>
  <body>
    <!-- ... -->

    <!-- Inclusione di jQuery -->
    <script src="javascripts/jquery.js"></script>
    <!-- Inclusione di Sidr -->
    <script src="javascripts/sidr/jquery.sidr.min.js"></script>
  </body>
</html>

Il codice successivo mostra la procedura per creare una divbox associata all’identificatore sidr nella quale verrà posizionato il menù; come impostazione predefinita quest’ultimo non sarà visibile (toggle menù) ma diventerà disponibile clickando un apposito link che potrà essere utilizzato per nascondere nuovamente tale elemento:

<a id="simple-menu" href="#sidr">Sidebar con Sidr</a>

<div id="sidr">
  <!-- ... -->
<ul>
<li><a href="#">Prima voce di menù</a></li>
<li class="active"><a href="#">Seconda voce di menù</a></li>
<li><a href="#">Terza voce di menù</a></li>
</ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

Sidr consentirà anche di creare più menù in una sola pagina così come di caricare contenuti da remoto, potrà essere inoltre utilizzato in associazione con librerie che supportano gli eventi touch, come per esempio il plugin touchwipe di jQuery, per garantire una user experience ottimale sui dispositivi mobili.

Via Sidr

Post correlati
I più letti del mese
Tematiche