Tutorial jQuery: drop down menu con Droppy

Tutorial Jquery — 25 giugno 2012

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!

Fonte

Aspetta! Leggi anche:

« »

Autore

Magoo

Web Designer da lungo tempo. La mia e' una passione che sembra non avere mai fine. Ho lavorato per molti anni come Web Designer e Digital Artist per alcune aziende pubblicitarie, per poi prendere la decisione di mettermi in proprio. Adesso mi occupo principalmente di elaborazione grafica 3D, ma non disdegno creare pagine web, siti e portali di ogni genere. Mi puoi seguire sul mio Blog, accerchiarmi su Google+ o diventarmi amico su Facebook