jQuery e CSS3: realizzare un menù con Drawer per smartphone

Nel classico appuntamento dedicato alle Risorse Utili e a jQuery, oggi andiamo a mettere in campo anche il CSS3, per realizzare un Menù Laterale Drawer. Grazie alla combinazione di jQuery e CSS3, è stato realizzato il plugin Drawer che rende la navigazione all’interno di un progetto web mobile in modo veloce, reattivo e animato.

Come si utilizza Plugin Drawer

Iniziamo con l’inserimento della libreria jQuery e cooker.css nella pagina HTML del nostro progetto:

<link href="cooker.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Adesso vanno inserire le antre due risorse jQuery e CSS di cui abbiamo bisogno:

<script src="cooker.drawer.js"></script>
<script src="cooker.drawer.css"></script>

Inseriamo anche la parte relativa a Bootstrap:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Andiamo a realizzare il menù vero è proprio:

</pre>
<pre><button class="drawer-toggle btn btn-outline-white">click or touch</button>
<div class="drawer drawer-default">
<nav class="drawer-nav" role="navigation">
<div class="drawer-brand"><a href="./">jQuery Drawer Plugin Demo</a> </div>
<ul class="nav drawer-nav-list">
<li><a href="http://www.jqueryscript.net/">Home</a></li>
<li><a href="http://www.jqueryscript.net/jquery-plugins/">Latest jQuery Plugins</a></li>
<li><a href="http://www.jqueryscript.net/popular/">Most Popular Plugins</a></li>
<li><a href="http://www.jqueryscript.net/recommended/">Recommended Plugins</a></li>
<li><a href="http://www.jqueryscript.net/blog/">Blog</a></li>
<li><a href="http://www.jqueryscript.net/submit/" rel="nofollow">Submit Plugins &amp; News</a></li>
</ul>
</nav>
</div>

Adesso attraverso il tag div andiamo a realizzare la classe drawer-overlay:

<div class="drawer-overlay">
Your main content goes here.
</div>

Con la seguente parte del codice, andiamo a inizializzare il nostro menù:

<script type="text/javascript">
$(document).ready(function() {
$('.drawer').drawer({
desktopEvent:'click'
});
});
</script>

Concludiamo con le varie opzioni presenti di default:

<script type="text/javascript">
$(document).ready(function() {
$('.drawer').drawer({
nav: 'drawer-nav',
navList:     'drawer-nav-list',
overlay:     'drawer-overlay',
toggle:      'drawer-toggle',
openClass:   'drawer-open',
closeClass:  'drawer-close',
desktopEvent: 'mouseover', // or click
speed: 200,
width: 280,
});
});
</script>

Metodi disponibili:

$('#element').drawer('open')
$('#element').drawer('close')
$('#element').drawer('toggle')
$('#element').drawer('resize')
$('#element').drawer('destroy')

Ecco adesso, se tutto è andato come si deve, dovreste ricevere questo risultato: DEMO.

Se considerate che il Plugin Drawer, è proprio la risorsa che stavate cercando e se pensate che sia molto semplice da configurare con il vostro progetto, non ci resta altro da fare che segnalarvi il link da dove scaricare questo plugin.

Download Plugin Drawer

Per il momento questo è tutto, continuate a seguirci per altri consigli utili dal mondo jQuery.

Seguiteci anche su Facebook, Google Plus, Tumblr e Twitter, per restare sempre in contatto con noi e con le nostre guide.

{Via: jqueryscript.net}

Flavius Florin Harabor

Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.

androidos-lab.it