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