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.
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 & 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.
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.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.