[JS] Script per espandere menù

todoslogos

[JS] Script per espandere menù

Salve ragazzi, ho da porvi un problema che ho riscontrato sul mio sito utilizzando uno script in JS che permette, cliccando su del testo, di espandere (un pò come ciò che fa wikipedia nelle sue pagine delle categorie, quando si clicca per vedere le sottocategorie). Lo script che utilizzo è basato sugli elenchi numerati.
In pratica lo script mostra ciò che è racchiuso tra i tag <h3> e nasconde l'elenco sottostante; cliccando sulla scritta tra gli <h3> compaiono tutte le voci del menù.

Il codice JS è il seguente (il file che lo contiene è expand.js):

 
window.onload=function(){
if(document.getElementsByTagName && document.getElementById){
    document.getElementById("nav").className="jsenable";
    BuildList();
    }
}
function BuildList(){
var hs=document.getElementById("nav").getElementsByTagName("h3");
for(var i=0;i<hs.length;i++){
    hs*.onclick=function(){
        this.parentNode.className=(this.parentNode.className=="show") ? "hide" : "show";
        }
    }
}

Poi ho creato un file css che è il seguente (il file si chiama jsmenu.css):

 
div.jsenable h3{cursor: pointer; text-decoration: underline;}
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: #CCFFCC}

La pagine html è invece così strutturata:
[html]
<head>
<link rel="stylesheet" type="text/css" href="jsmenu.css">
<script type="text/javascript" src="expand.js"></script>
</head>
<body>
<div id="nav">
<ul>
<li><h3>Linguaggi</h3>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">DOM</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li><br>
<li><h3>Software</h3>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Fireworks</a></li>
<li><a href="#">Dreamweaver</a></li>
</ul>
</li><br>
<li><h3>Webdesign</h3>
<ul>
<li><a href="#">Webdesign</a></li>
<li><a href="#">Accessibilità</a></li>
<li><a href="#">Usabilità</a></li>
</ul>
</li><br>
</ul>
</div>
</body>
[/html]

Il tutto funziona perfettamente, ed arrivo così al problema.
Una volta che uploado tutti i file, se apro la pagina .php strutturata come sopra, prima il menù è completamente espanso, quindi passano 2-3 secondi, e il menù si comprime, e funziona come vorrei... E io non voglio assolutamente questa transizione show/hide appena carica la pagina... è moooolto fastidioso..
Perchè succede questo? come prevengo?? utilizzo I.E. 6.x

Grazie a chi mi risponderà, e perdonate il post lunghissimo!!

Nota: lo script è stato preso ed adattato da html.it

dario.scarano

Ciao TodosLogos e benvenuto nel ForumGT!

Ho provato il tuo script in locale e funziona benissimo. Il problema di cui parli tu a me dura una frazione di secondo ed è quasi impercettibile.

todoslogos

hai ragione PsYCHo in locale lo script è perfetto...

il problema nasceva nel momento in cui pubblicavo le pagine, e i tempi di caricamento facevano diventare BEN visibile quella fastidiosa attesa...

ho comunque risolto momentaneamente aggiungento <li class="hide">, perchè lo script funzionava all'onload, e finchè non caricava tutto, non fungeva... e allora ho nascosto il tutto, così da non avere problemi...

ma è una soluzione momentanea in attesa di server più potenti

grazie per la risposta