Slidebars jQuery Plugin: mostrare menu e barre laterali in un sito web responsive, navigando da desktop, tablet e smartphone con la stessa impostazione

Il presente articolo è stato tradotto in italiano con il permesso del legittimo proprietario: Adam Smith. L'articolo originale in lingua inglese è reperibile all'URL: Slidebars

Slidebars è un plugin jQuery che permette di implementare, in maniera rapida e semplice, un nuovo modo di navigare un sito web, mostrando o sovrapponendo le barre laterali, facendo apparire i menu.

Slidebars nasce dalla necessità di creare la modalità di navigazione "off-canvas" tipica dei menu per smartphone, in tema di responsive web design. Molto leggero, 1469 bytes (js) e 499 bytes (css), se compresso con "gzip" ed usa le transizioni con accelerazione hardware per le animazioni "smoothing".

Il plugin Slidebars non è stato pensato solo per palmari o smartphone. Può essere utilizzato per realizzare siti web con qualsiasi dimensione di schermo. Per vederlo in azione, è sufficente premere una delle due icone, poste in alto a destra e sinistra nella presente pagina. Riducendo la pagina del browser, è possibile apprezzare come la stessa si adatti a qualsiasi dimensione del viewport.

Slidebars gestisce anche i cambiamenti di orientamento e si ridimensiona in maniera ottimale.

Di seguito la screen della home page di Slidebars:

Home page Slidebars
Home Page Slidebars

Come si può notare dall'immagine precedente, risulta molto evidente ed intuitiva la navigazione, posta nella parte superiore della header, a destra e sinistra. Per chi naviga da smartphone o tablet, non dovrebbe avere problemi nel capire che i menu del sito sono apparentemente "nascosti" ed è sufficente premere l'icona "Three Line" (come viene definita in gergo), affinchè appaiano gli stessi menu con le voci.

Left sidebar
Left Sidebar

A supporto di quanto appena scritto poco più su, nell'immagine appena riportata, è possibile vedere l'effetto "off-canvas" nella parte sinistra del sito. Premendo l'icona posta in alto a sinistra, viene "traslato" tutto il sito verso destra, mostrando i menu della colonna sinistra. Stessa cosa avviene se si volessero mostrare informazioni poste nella parte destra del sito.

Right sidebar
Right Sidebar

Download

Slidebars versione 0.9 rilasciata il 10 Marzo 2014

La versione originale, "minificata", è inclusa nel download, insieme al template di base, esempi solo per il mobile, utilizzo delle API, personalizzazione delle larghezze e stili di animazione. Di seguito la documentazione di utilizzo. Slidebars è rilasciato sotto licenza MIT. Si è liberi di usarlo per qualsiasi progetto, personale o commerciale. Se lo si utilizza, sarebbe gradito un messaggio attraverso il form dei contatti.

Download Visualizza in GitHub

E' possibile installarlo anche via Bower

bower install Slidebars

Cosa c'è di nuovo

La versione 0.9 offre nuovi stili di animazione, supporto migliorato per iOS < 5, aumento delle funzioni API, e qualche correzione di bug.

Utilizzare Slidebars

Implementare Slidebars nel proprio progetto è molto semplice. Prima di tutto, va effettuato il download del plugin.

Passaggi di base

Di seguito i passaggi fondamentali affinchè Slidebars sia incluso come progetto nel proprio sito. Ci sono anche descrizioni più approfondite e l'utilizzo di API verso la fine della pagina.

  1. Aggiungere il meta tag viewport nella <head> della pagina.
  2. Includere l'intero design della pagina in un elemento con ID #sb-site.
  3. Creare elementi per Slidebars, assegnando una classe dal nome .sb-slidebar.
  4. Impostare il lato dal quale Slidebars deve essere traslato, con aggiunta di classi appositamemte create.
  5. Aggiungere classi per il controllo agli elementi di Slidebars.
  6. Includere i files jQuery, slidebars.min.js e slidebars.min.css nelle pagine.
  7. Richiamare il metodo $.slidebars().

Template di base

Il template di base per cominciare con Slidebars. Lo stesso file è incluso nel pacchetto di download.

<!doctype html>
<html>
<head>
<title>Slidebars Basic Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- Slidebars CSS -->
<link rel="stylesheet" href="/path/to/slidebars.min.css">
</head>

<body>
<div id="sb-site">
<!-- Your main site content. -->
</div>

<div class="sb-slidebar sb-left">
<!-- Your left Slidebar content. -->
</div>

<div class="sb-slidebar sb-right">
<!-- Your right Slidebar content. -->
</div>

<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- Slidebars -->
<script src="/path/to/slidebars.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
</body>
</html>

Istruzioni step by step

01) Viewport

Includere il meta tag viewport nella <head> della pagina, per garantire un rendering corretto.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

02) Contenitore Sito

Tutti i contenuti del sito (eccetto Slidebars) devono essere inseriti in un elemento con ID #sb-site, che deve essere figlio diretto di <body>.

<div id="sb-site">
<!-- Contenuti del sito. -->
</div>

03) Aggiungere le Slidebars

Ogni Slidebar deve essere figlia diretta di <body> e deve avere una classe di base .sb-slidebar oltre ad una classe aggiuntiva per impostare il lato di traslazione (left o right).

<div class="sb-slidebar sb-left">
<!-- Contenuti Slidebar Left. -->
</div>

Classe principale

Aggiungere la classe .sb-slidebar a tutte le Slidebars.

Classi di modifica

E' possibile aggiungere classi di modifica per le Slidebars per lo stile ed il comportamento. Ogni Slidebar deve avere le sue impostazioni.

.sb-left Imposta lo scorrimento della Slidebar verso sinistra.

.sb-right Imposta lo scorrimento della Slidebar verso destra.

.sb-static Corregge la Slidebar in modo tale che scorra naturalmente con il sito. Introdotto nella versione 0.8

.sb-style-push Posizione della Slidebar "off-canvas" favorendo lo spostamento del sito quando è aperta. Introdotto nella versione 0.9

.sb-style-overlay Posizione della Slidebar "off-canvas" favorendo la sovrapposizione sul sito quando è aperta. Introdotto nella versione 0.9

.sb-width-thin Larghezza personalizzata, 15% in meno della larghezza standard. Introdotto nella versione 0.9

.sb-width-wide Larghezza personalizzata, 15% maggiore della larghezza standard. Introdotto nella versione 0.9

Larghezze personalizzate Introdotte con la versione 0.8

Per impostare una larghezza personalizzata, per la Slidebar, aggiungere la classe .sb-width-custom e fornire una larghezza come attributo data. È possibile fornire una larghezza in pixel per un layout fisso, o in percentuale per un layout fluido. Si veda il seguente esempio:

<div class="sb-slidebar sb-left sb-width-custom" data-sb-width="15%">
<!-- Contenuto della Slidebar left. -->
</div>

04) Aggiungere Classi di Controllo

Alcune Classi opzionali, da aggiungere agli elementi, possono essere utilizzate per il controllo delle Slidebars. Se non si desidera utilizzarle, è possibile impostare i propri elementi per controllare le Slidebars utilizzando le API.

.sb-toggle-left può essere utilizzata per l'apertura e la chiusura della Slidebar sinistra.

.sb-toggle-right al contrario della precedente, permette la chiusura e l'apertura della Slidebar destra.

.sb-open-left per aprire la barra di scorrimento di sinistra quando si fa clic sull'icona.

.sb-open-right per aprire la barra di scorrimento di destra quando si fa clic sull'icona.

.sb-close per chiudere le Slidebars.

05) Inclusione dei files di base

È necessario includere slidebars.min.css o slidebars.css nella <head> della pagina, prima degli altri fogli di stile.

<link rel="stylesheet" href="/path/to/slidebars.min.css">
Prima della chiusura del tag </body> deve esserci il link al file jQuery (1.8+), seguito da slidebars.min.js.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/path/to/slidebars.min.js"></script>

06) Inizializzare Slidebars

Dopo aver incluso i files jQuery e Slidebars, è necessario richiamare la funzione $.slidebars(). È possibile copiare e incollare questo codice.

<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>

Opzioni

E' possibile introdurre alcune opzioni quando si inzializza Slidebars.

<script>
(function($) {
$(document).ready(function() {
$.slidebars({
siteClose: true // true or false
disableOver: 480 // integer or false
hideControlClasses: true // true or false
});
});
}) (jQuery);
</script>

siteClose Consente la chiusura della Slidebar cliccando nel sito. Opzioni: true, false. Default: true. Introdotto nella versione 0.7.1

disableOver Disabilita l'over sulla Slidebar specificando la larghezza dello schermo. Opzioni: integer, false. Default: false. Introdotto nella versione 0.8

hideControlClasses Nasconde le classi di controllo della Slidebar sull'over, con la larghezza specificata in disableOver. Opzioni: true, false. Default: false. Introdotto nella versione 0.8.

API

Slidebars ha alcuni metodi API. Dovranno essere create delle istanze di Slidebars quando si inzializza il plugin. E' possibile utilizzare alcune delle seguenti, per il controllo delle Slidebars.

.open(side) Apre le Slidebars, specificando il lato: .open('left') o .open('right')

.toggle(side) Alterna le Slidebars, specificando il lato: .open('left') o .open('right')

.close() Chiude qualsiasi Slidebar aperta

.init Restituisce true se Slidebars è stata inizializzata e funzionante.

.active(side) Restituisce true se Slidebars è aperta, specificando il lato: .active('left') o .active('right'). Introdotto nella versione 0.9.

Di seguito un esempio di inizializzazione di Slidebars, con l'utilizzo delle API.

<script>
(function($) {
$(document).ready(function() {
var mySlidebars = new $.slidebars();
$('.my-button').on('click', function() {
mySlidebars.open('left');
});
$('.my-other-button').on('click', function() {
mySlidebars.toggle('right');
});
$('.my-third-button').click(mySlidebars.close);
});
}) (jQuery);
</script>

La Classe Animation

E' possibile aggiungere la classe .sb-slide ad altri elementi che si vogliono animare. Questo è utile se si dispone di elementi con position:fixed, come la barra di navigazione in alto.

Classi di Supporto

Slidebars ha alcune classi di supporto per la stilizzazione del sito.

html.sb-init quando Slidebars è stato inizializzato ed è in esecuzione.

html.sb-active quando una Slidebar è aperta.

html.sb-active-left quando la Slidebar sinistra è aperta.

html.sb-active-right quando la Slidebar destra è aperta.

html.sb-android quando si è in presenza del browser Android versione 2. Utilizzare tale classe con elementi che hanno position:fixed. Abbandonati dalla versione 0.9

html.sb-static con browser Android < 3 o iOS < 5. Utilizzare tale classe con elementi che hanno position:fixed. Abbandonati nella versione 0.9

Applicare la classe .sb-disable-close su un link nella Slidebar per evitare la chiusura quando si fa click. Introdotto nella versione 0.7.1.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati