Tutorial jQuery: Creare un menu verticale con sottolivelli

• Tweet

• Tweet

Qualcuno di voi a problemi a creare un menu verticale con sottolivelli?

Bene, ora vi farò vedere come è semplice costruirne uno con jQuery. Guardate prima l’esempio on-line

Menu verticale a sottolivelli

Ok ora effettuiamo una breve scansione del codice di come realizzare un menu ad una voce e 2 sottolivelli

<div id="container_menu">
  <ul>
   <li>
    <div>
    <div><a href="#" onclick="slide('sub_menu1'); return false;">Primo Livello SubMenu</a></div>
    <div id="sub_menu1">
      <ul>
        <li><a href="#" onclick="slide('sub_menu2'); return false;">Secondo Livello SubMenu</a>
          <div id="sub_menu2">
            <ul>
              <li><a href="#" onclick="slide('sub_menu3'); return false;">Terzo Livello SubMenu</a>
                <div id="sub_menu3">
                  <ul>
                    <li><a href="#">Prova Link</a></li>
                    <li><a href="#">Prova Link</a></li>
                    <li>Test</li>
                  </ul>
                </div>
              </li>
              <li><a href="#">Prova Link</a></li>
              <li>Test</li>
             </ul>
           </div>
         </li>
         <li><a href="#">Prova Link</a></li>
         <li><a href="#">Prova Link</a></li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Ed ora la funzione jQuery slide() che andrà scritta tra i tag <script>

function slide(id){
 $("#"+id).children().slideToggle("fast");
}

Praticamente slide prendera il nodo figlio a quello passato e ne farà lo slide cioè al click del link lo nasconderà o lo mostrerà.Logicamente questo potrà dare vita a infiniti sottomenu

Per maggior comprensione anche delle regole associate vi lascio il download dell’esempio

Download Menu verticale con sottolivelli

Se avete dubbi potete commentare qui in basso oppure tramite e-mail, che trovate nella sezione team, a presto

Riccardo Tartaglia

Tags: download menu verticale jQuery, jquery menu, menu javascript verticale, menu verticale con sottolivelli, menu verticale jQuery

Category: Javascript, Web