Menu verticale in jQuery

In questo articolo vi spiego come realizzare un menu verticale in jQuery che ci permette di avere un effetto di comparsa a tendina dei sottomenu. Lo script realizzato presenta una duplice versione di questo: il primo è un semplice menu, al secondo ho aggiunto invece l’effetto fisarmonica:

DEMO - Menu verticale in jQuery

La struttura HTML è molto semplice ed è basato su liste nidificate.

HTML

 
<div class="menu_box">
            <div class="menu_header"><label>Semplice</label></div>
            <div class="menu">
                 <ul class="title_ul">
                      <li class="title">
                            <ul>
                               <li class="submenu_title"><a href="#">Sub menu one</a></li>
                               <li class="sub">
                                      <ul>
                                           <li><a href="#">Item one</a></li>
                                           <li><a href="#">Item two</a></li>
                                           <li><a href="#">Item three</a></li>
                                      </ul>
                                </li>
                             </ul>
                           </li>
                           <li class="title">
                              <ul>
                                    <li class="submenu_title"><a href="#">Sub menu two</a></li>
                                          <li class="sub">
                               <ul>
                                     <li><a href="#">Item one</a></li>
                                     <li><a href="#">Item two</a></li>
                                </ul>
                            </li>
                          </ul>
                        </li>
                                   . . . .
                                   . . . .
                 </ul>
        </div>
</div>
 

CSS

Niente di particolare nel CSS, ho definito uno stile molto semplice e presentabile. L’unica istruzione da notare è la proprietà display della lista dei sottomenu che ho settato a none perché devono essere resi visibili dall’animazione jQuery solo al click su un item del menu.

 
.sub
{
            display: none;
}
 

jQUERY

Al click su un link del menu più esterno, quello principale per chiarirci, lo script esegue la funzione slideToggle sul rispettivo sottomenu: in questo modo questo comparirà o scomparirà a seconda che prima fosse visibile o nascosto.

Per applicare al menu l’effetto fisarmonica basta aggiungere la riga di codice che è nel commento dello script in modo tale da nascondere tutti i sottomenu eccetto quello che si sta per aprire. La funzione not ha proprio il compito di escludere un elemento dalla funzione a cui lo si collega.

 
$(document).ready(function()
    {
            $('.submenu_title a').click(function(ev)
            {
                       var sub = $(this).parent().next();
                       // PER L’EFFETTO FISARMONICA BASTA AGGIUNGERE:
                          // $('.sub').not(sub).slideUp();
                       sub.stop(false,true).slideToggle();
                          // impedisco allo script di seguire il link
                       ev.preventDefault();
            });
});