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> |
