Abbiamo già visto come realizzare degli ottimi menù drop down in un recente articolo; quella che vi propongo oggi è una validissima alternativa di facile implementazione, con ottimi effetti grazie alle librerie jQuery, e con la possibilità di utilizzare i sub-menù ad apertura orizzontale, attraverso il click o il rollover attivati da un solo comando.
Tutorial jQuery Drop Down menu’
Apriamo un nuovo file Index.html, e nella main directory del sito creiamo la cartella js (che conterrà i files Javascript) e css (per i fogli di stile).
Implementiamo all’interno dell’<head> tutti i files necessari, e che andranno collocati nei rispettivi path:
<link rel="stylesheet" href="css/main.css" type="text/css" /> <script type='text/javascript' src='js/jquery.js'></script> <link rel="stylesheet" href="css/droppy.css" type="text/css" /> <script type="text/javascript" src="js/droppy.js"></script>
Troverete tutti files all’interno del pacchetto .zip alla fine dell’articolo: scaricateli e posizionateli nel path suggerito dallo script qua sopra.
Andiamo a vedere come funziona l’html:
<ul class='nav'>
<li><a href='#'>Top level 1</a></li>
<li><a href='#'>Top level 2</a>
<ul>
<li><a href='#'>Sub 2 - 1</a></li>
<li>
<a href='#'>Sub 2 - 2</a>
<ul>
<li>
<a href='#'>Sub 2 - 2 - 1</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 1 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 1 - 4</a></li>
</ul>
</li>
<li><a href='#'>Sub 2 - 2 - 2</a></li>
<li>
<a href='#'>Sub 2 - 2 - 3</a>
<ul>
<li><a href='#'>Sub 2 - 2 - 3 - 1</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 2</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 3</a></li>
<li><a href='#'>Sub 2 - 2 - 3 - 4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Sub 2 - 3</a></li>
</ul>
</li>
</ul>
L’<ul> principale con classe “nav” è il contenitore di tutti i menù: all’interno i vari <li> (gli elementi della lista) possono contenere tutti gli <ul> dei sub-menù, cui potrete abbinare tutti i <li> che vi servono. Fate attenzione a indentare correttamente l’html, e pertanto a chiudere <ul> e <li> nella maniera giusta, per non perdere l’ordine gerarchico degli elementi.
L’ultimo elemento da prendere in considerazione è la funzione di apertura del sub menù. Inserite il seguente script all’interno del <body>:
<script type='text/javascript'>
$(function() {
$('.nav').droppy({trigger: 'click'});
});
</script>
L’impostazione di default per attivare lo slider è tramite click. Per attivarla con l’hover, è necessario cambiare la riga come da esempio sotto riportato:
<script type='text/javascript'>
$(function() {
$('.nav').droppy({trigger: 'hover'});
});
</script>
Ed eccoci al download.
Alla prossima!
Pacman
Nostradamus
Magical Cat Adventure
Snake