Ciao a tutti,
dal titolo penso che non sia molto chiaro il mio problema.
sto usando mootools per la creazione di un menu.
Il menu e composto da delle sezione e delle sotto sezioni
Il mio problema riguarda il caricamento della mia pagina, che mi mostra il menu aperto con tutte le sezioni e sotto sezioni visibili e poi mi oscura solo le sottosezioni.
Il risultato finale è giusto ma io non vorrei mostrare per circa un secondo il menu aperto; ma bensi vorrei che mi faccia vedere solo il menu chiuso e poi al click mi visualizzi la sottosezione.
questo è il codice:
menuDx.php:
<div id="menu">
<div id="one">
<h1> Società </h1>
</div>
<div id="lista">
<ul>
[*] <h2> Storia </h2>
[*] <h2> Made in italy </h2>
[*] <h2> Team </h2>
[/list]
</div>
<div id="two">
<h1> Servizi </h1>
</div>
<div id="lista2">
<ul>
[*] <h2> Portfolio </h2>
[*] <h2> Macchine </h2>
[/list]
</div>
<div id="tree">
<h1> Contatti </h1>
</div>
<div id="four">
<h1> Prodotti </h1>
</div>
<div id="lista4">
<ul>
[*] <h2> Polveri </h2>
[*] <h2> Flaconi</h2>
[*] <h2> Prodotto3 </h2>
[*] <h2> Prodotto4 </h2>
[*] <h2> Sciroppi </h2>
[*] <h2> Prodotto6 </h2>
[*] <h2> Prodotto7 </h2>
[*] <h2> Prodotto8 </h2>
[*] <h2> Prodotto9 </h2>
[*] <h2> Prodotto10 </h2>
[*] <h2> Prodotto11 </h2>
[*] <h2> Prodotto12 </h2>
[*] <h2> Prodotto13 </h2>
[*] <h2> Prodotto14 </h2>
[*] <h2> Prodotto15 </h2>
[*] <h2> Prodotto16 </h2>
[*] <h2> Prodotto17 </h2>
[/list]
</div>
</div>
questo è il codice .js:
window.addEvent('load', function() {
var lista = new Fx.Slide('lista');
$('societa').addEvent('click', function(e){
e.stop();
lista.toggle();
});
var lista2 = new Fx.Slide('lista2');
$('servizi').addEvent('click', function(e){
e.stop();
lista2.toggle();
});
var lista4 = new Fx.Slide('lista4');
$('prodotti').addEvent('click', function(e){
e.stop();
lista4.toggle();
});
lista4.hide();
});
questo è l css:
#menu { width: 174px; min-height: 48px; border: 0px solid #000; margin: 0 auto; margin-top: 10px;}
#one { background-repeat: no-repeat; background-image: url(../img/IntestazioneMenu.gif); width: 170px; min-height: 48px; border: 0px solid #b0b2b3; text-align: center; }
#lista {width: 146px; border:0px solid #000; margin-left: 20px; text-align: center;}
#lista ul { list-style: none; margin-bottom: 5px; margin: 0 auto;}
#lista ul li { height:27px; width: 145px; background: url(../img/sezioniMenu.gif); }
#lista ul li a { width: 100%; margin-top: 0px; }
#lista ul li a:hover { text-decoration: underline; }
#two { background-repeat: no-repeat; background-image: url(../img/IntestazioneMenu.gif); width: 170px; min-height: 48px; border: 0px solid #b0b2b3; text-align: center; }
#lista2 {width: 146px; border:0px solid #000; margin-left: 20px; text-align: center;}
#lista2 ul { list-style: none; margin-bottom: 5px; margin: 0 auto;}
#lista2 ul li { height:27px; width: 145px; background: url(../img/sezioniMenu.gif); }
#lista2 ul li a { width: 100%; margin-top: 0px; }
#lista2 ul li a:hover { text-decoration: underline; }
#tree { background-repeat: no-repeat; background-image: url(../img/IntestazioneMenu.gif); width: 170px; min-height: 48px; border: 0px solid #b0b2b3; text-align: center; }
#lista3 {width: 146px; border:0px solid #000; margin-left: 20px; text-align: center;}
#lista3 ul { list-style: none; margin-bottom: 5px; margin: 0 auto;}
#lista3 ul li { height:27px; width: 145px; background: url(../img/sezioniMenu.gif); }
#lista3 ul li a { width: 100%; margin-top: 0px; }
#lista3 ul li a:hover { text-decoration: underline; }
#four { background-repeat: no-repeat; background-image: url(../img/IntestazioneMenu.gif); width: 170px; min-height: 48px; border: 0px solid #b0b2b3; text-align: center; }
#lista4 {width: 146px; border:0px solid #000; margin-left: 20px; text-align: center;}
#lista4 ul { list-style: none; margin-bottom: 5px; margin: 0 auto;}
#lista4 ul li { height:27px; width: 145px; background: url(../img/sezioniMenu.gif); }
#lista4 ul li a { width: 100%; margin-top: 0px; }
#lista4 ul li a:hover { text-decoration: underline; }
grazie in anticipo.
Rispondi quotando
