HTML:
codice:
<ul>
<li class="menu">Radice
<ul class="submenu" id="submenu-1">
<li class="menu">Canale 1
<ul class="submenu" id="submenu-1-1">[*]Link[*]Link[/list]
<li class="menu">Canale 2
<ul class="submenu" id="submenu-1-2">[*]Link[*]Link[/list]
<li class="menu">Canale 3
<ul class="submenu" id="submenu-1-3">[*]Link[*]Link[/list]
[/list]
[/list]
Javascritp:
codice:
<script>
/* gestione del menu */
function mmenu(ID)
{ var menu = document.getElementById(ID);
var display = menu.style.display;
menu.style.display = (display == "block") ? "none" : "block";
menu.parentNode.style.listStyleImage = (display == "block") ? "url(../piu.jpg)" : "url(../meno.jpg)";
}
/* inizializzazione del menu */
window.onload = function()
{ var uls = document.getElementsByTagName("ul");
for (i=0;i<uls.length;i++) {
if(uls[i].getAttribute("class")=="submenu")uls[i].style.display = "none";
if(uls[i].getAttribute("id") && uls[i].getAttribute("id").search("submenu-")!= -1) uls[i].style.display = "none";
}
}
</script>
CSS:
codice:
<style>
ul
{ list-style: disc url(../meno.gif);
margin: 0;
padding: 8 2em;
}
li.menu
{ list-style: square url(../meno.jpg);
}
</style>
Devi naturalmente sostituire meno.jsp e piu.jpg con delle immagini tue