blog}

Menu verticale multi livello con jQuery (Multi Level slide accordion menu with jQuery)

In questo post discuterò dell’utilizzo “concreto” di uno dei puù citati menù accordion jQuery, descritto in molti articoli come ad esempio:http://www.html.it/script/un-menu-verticale-con-il-plugin-jquery-multi-level-accordion-menu/
http://www.htmldrive.net/items/show/1020/multi-level-slide-accordion-menu-with-jQueryDa subito ci si renderà conto dell’impossibilità di utilizzare facilmente il menù in un sito web. Infatti il menù presenta 2 problemi: il primo è che non è possibile cambiare il valore di href negli item che possiedono sotto livelli ed il secondo è che anche cambiando il valore di href negli item figli, l’evento onclick su tali livelli sarà interdetto.Per spiegarmi meglio, consideriamo la struttura originale:?

<ul class="topnav">    <li><a href="#" target="scriptbreaker">Home</a></li>    <li><a href="#">JavaScript</a>        <ul>             <li><a href="#">Cookies</a></li>             <li><a href="#">Events</a></li>                <ul>                    <li><a href="#">CSS</a></li>                    <li><a href="#">JavaScript</a></li>                </ul>            </li>             <li><a href="#">Tabs</a></li>        </ul>    </li>    <li><a href="#">Tutorials</a>        <ul>             <li class="active"><a href="#">HTML</a></li>             <li><a href="#">CSS</a></li>             <li><a href="#">Java</a>                <ul>                    <li><a href="#">JSP</a></li>                    <li><a href="#">JSF</a></li>                </ul>            </li>             <li><a href="#">Tabs</a></li>        </ul>    </li>    <li><a href="#" target="_blank">Contact</a></li>    <li><a href="#">Upload script</a></li></ul>

 Analizzando il file scriptbreaker-multiple-accordion-1.js necessario per il funzionamento del menù si osserva che affinché l’effetto accordion funzioni si deve lasciare inalterato il valore di href (href=’#’) negli item che possiedo sotto item mentre è possibile cambiare il valore di href negli altri item. Ad esempio:?

<ul class="topnav">    <li><a href="pagina1.html" target="scriptbreaker">Home</a></li>    <li><a href="#">JavaScript</a>        <ul>             <li><a href="pagina2.html">Cookies</a></li>             <li><a href="#">Events</a></li>                <ul>                    <li><a href="pagina3.html">CSS</a></li>                    <li><a href="pagina4.html">JavaScript</a></li>                </ul>            </li>             <li><a href="pagina5.html">Tabs</a></li>        </ul>    </li>    <li><a href="#">Tutorials</a>        <ul>             <li class="active"><a href="pagina6.html">HTML</a></li>             <li><a href="pagina7.html">CSS</a></li>             <li><a href="#">Java</a>                <ul>                    <li><a href="pagina8.html">JSP</a></li>                    <li><a href="pagina9.html">JSF</a></li>                </ul>            </li>             <li><a href="pagina10.html">Tabs</a></li>        </ul>    </li>    <li><a href="pagina11.html" target="_blank">Contact</a></li>    <li><a href="pagina12.html">Upload script</a></li></ul>

Se si effettua la modifica sopra riportata si osserverà che dopo aver cliccato su una voce di menù principale per espandere le sotto voci, i link sulle sotto voci non funzionano più!Il problema è dovuto al file scriptbreaker-multiple-accordion-1.js ed in particolare alla seguente funzione:?

if($(this).find("a:first-child").attr('href') == "#"){                    $(this).click(function () {                        return false;                    });                }

che evita lo spostamento ad inizio pagina quando un item principale, con href=”#”, viene premuto. E’ quindi necessario cancellare o commentare la seguente funzione ed assegnare all’evento onclick in valore “return false” direttamente nelle voci principali. Quindi:?

<ul class="topnav">    <li><a href="pagina1.html" target="scriptbreaker">Home</a></li>    <li><a href="#" onclick='return false;'>JavaScript</a>        <ul>             <li><a href="pagina2.html">Cookies</a></li>             <li onclick='return false;'><a href="#">Events</a></li>                <ul>                    <li><a href="pagina3.html">CSS</a></li>                    <li><a href="pagina4.html">JavaScript</a></li>                </ul>            </li>             <li><a href="pagina5.html">Tabs</a></li>        </ul>    </li>    <li><a href="#" onclick='return false;'>Tutorials</a>        <ul>             <li class="active"><a href="pagina6.html">HTML</a></li>             <li><a href="pagina7.html">CSS</a></li>             <li onclick='return false;'><a href="#">Java</a>                <ul>                    <li><a href="pagina8.html">JSP</a></li>                    <li><a href="pagina9.html">JSF</a></li>                </ul>            </li>             <li><a href="pagina10.html">Tabs</a></li>        </ul>    </li>    <li><a href="pagina11.html" target="_blank">Contact</a></li>    <li><a href="pagina12.html">Upload script</a></li></ul>

Riguardo invece il primo problema riscontrato, ovvero l’impossibilità di rendere attivi gli item con sotto item, ovvero gli item con valore href=”#”, una possibile soluzione è quella di duplicare la voce come sottovoce. Pertanto:?

<ul class="topnav">    <li><a href="pagina1.html" target="scriptbreaker">Home</a></li>    <li><a href="#" onclick='return false;'>JavaScript</a>        <ul>            <li><a href="pagina13.html">JavaScript</a></li>             <li><a href="pagina2.html">Cookies</a></li>             <li onclick='return false;'><a href="#">Events</a></li>                <ul>                    <li><a href="pagina14.html">Events</a></li>                    <li><a href="pagina3.html">CSS</a></li>                    <li><a href="pagina4.html">JavaScript</a></li>                </ul>            </li>             <li><a href="pagina5.html">Tabs</a></li>        </ul>    </li>    <li><a href="#" onclick='return false;'>Tutorials</a>        <ul>            <li><a href="pagina15.html">Tutorials</a></li>             <li class="active"><a href="pagina6.html">HTML</a></li>             <li><a href="pagina7.html">CSS</a></li>             <li onclick='return false;'><a href="#">Java</a>                <ul>                    <li><a href="pagina16.html">Java</a></li>                    <li><a href="pagina8.html">JSP</a></li>                    <li><a href="pagina9.html">JSF</a></li>                </ul>            </li>             <li><a href="pagina10.html">Tabs</a></li>        </ul>    </li>    <li><a href="pagina11.html" target="_blank">Contact</a></li>    <li><a href="pagina12.html">Upload script</a></li></ul>

ti è piaciuto l'articolo? condividi

sharing my ICT knowledge and expertise through the documentation of my experiences

Eros Sormani

Mi occupo di progettazione e sviluppo di soluzioni software e di creazione, implementazione e mantenimento di infrastrutture digitali

Altri Articoli del BLOG

Torna su