menu espandibile con js - Multilivello

[stelici]

Ciao a tutti,

ho realizzato il menu espandibile di cui alla presente guida di html:

http://javascript.html.it/articoli/l...cript-e-css/1/


Vorrei che ad una determinata voce (es "I top"), si aprisse un nuovo <ul> come da codice.
[*]<h3>Fanta news</h3>
<ul>[*]Le formazioni[*]Espulsi e ammoniti[*]I top
<ul>
[*]Marcatori
[/list]
[/list]


Credo di dover agire anche sul file css e forse su quello js, ma non sono riuscito.


Cortesemente potreste aiutarmi.

grazie

[GabbOne]

Ti posso dare qualche indizio su come lavorare perche il tuo problema non è cosi immediato da risolvere

......
   <ul>[*]Le formazioni[*]Espulsi e ammoniti[*]I top
              <ul>-->devi impostare nel css la proprieta display:none;[*]Marcatori[/list]
....

poi nel javaScript al verificarsi di un certo evento ad esempio onMouseOver sul tag[*] di [*]I top
ad esempio:
<li onmouseover="apriSottoMenu(this)" onmouseout="chiudiSottoMenu(this)">

punti all'elemento <ul>al suo interno e modifichi la proprieta display
come in quest esempio :

function apriSottoMenu(elment)
{

	elment.getElementsByTagName('ul')[0].style.display="block"; 
                                      //punta al primo elemento <ul> di element  
							
}

function chiudiSottoMenu(elment)
{
	 elment.getElementsByTagName('ul')[0].style.display="none"; 
}

Naturalmente per avere un buo risultato devi avere anche un buon css che ti affianchi i sotto menu in maniera appropriata

[stelici]

Ciao GabbOne, ho provato le tue indicazioni ma nulla da fare.

Ti posto il code originario, se puoi darmi un'occhiata. Grazie

[code menu_espandibile.css]
div#nav{width:170px;margin-left: 30px;background: #00005A;
border: 1px solid #00005A; font: 11px Arial, Helvetica, sans-serif}
div#nav h3{font-size: 100%;margin: 0;padding: 4px 10px;
border-top: 1px solid #FFF;color: #000;background-color: #7BA5E7}
div#nav ul,div#nav li{margin: 0;padding: 0;list-style-type: none}
div#nav li{margin: 0 0 1px 0}
div#nav a{display: block;padding-left: 15px;height: 18px;line-height: 18px;
border-top: 1px solid #FFF;background-color: #BDBDBD;color: #000;
text-decoration: none;font-weight: bold}
div#nav a:hover{color: #00005A;background-color: #0099FF}
div#nav ul ul a{color: #333; background-color: #AECDFF;font-weight: normal}
[code]

[code menu_espandibile-js.css]
div.jsenable h3{cursor: pointer}
div.jsenable ul ul{display:none}
div#nav li.hide ul{display:none}
div#nav li.show ul{display:block}
div#nav li.show h3{background-color: #FF0}

[code]

[code menu_espandibile-1.js]
var prev="null";

window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
document.getElementById("nav").className="jsenable ";
BuildList();
}
}

function BuildList(){
var hs=document.getElementById("nav").getElementsByTag Name("h3");
for(var i=0;i<hs.length;i++){
hs[i].onclick=function(){
if(this.parentNode.className!="show"){
this.parentNode.className="show";
if(prev && prev!=this.parentNode) prev.className="hide";
prev=this.parentNode;
}
else this.parentNode.className="hide";
}
}
}

[code]



P.S.: ora per aprire un elenco, basta click sulla voce, quando clicco su altra voce si apre altro elenco e si chiude il precedente, ma rimane ultimo elenco aperto se non clicco altro. Si puo fare in modo che so ciude in auto.

[stelici]

gabbone sei sparito!!!

Nessuno che mi controlla il codice.

Grazie a tutti