menu Opcje

[mundek88]

Witajcie,
pootrzebuję pilnie stworzyć menu działające identycznie jak na http://mootools.net/ (chodzi o te kolorowe duże menu)
Jako że w JS jestem laikiem po kilku męcząych godzinach pracy napisałem coś takiego:

Kod

<script>
animeInt=null;
odlicz=0;
blokada=0;

function powieksz(ktore)
{
        if (blokada==0){
        odlicz++;
        
        // glowny
        objl=document.getElementById("element_"+ktore);
        objl.style.width = parseInt(objl.style.width) + 8 + 'px';    
        
        //nastepne
        for (i=ktore; i<4; i++){
        obj=document.getElementById("element_"+eval(ktore+i));
        obj.style.width = parseInt(obj.style.width) - 1 + 'px';  }

        animeInt=setTimeout("powieksz("+ktore+")", 3)
        }
        if (odlicz==10) {clearTimeout(animeInt); blokada=1;}  
        window.status=odlicz+", "+blokada;
}

function zmniejsz(ktore)
{  
        if (blokada==1){
        odlicz--;
        
        // glowny
        objl=document.getElementById("element_"+ktore);
        objl.style.width = parseInt(objl.style.width) - 8 + 'px';    

        
        //nastepne
        for (i=ktore; i<4; i++){
        objp=document.getElementById("element_"+eval(ktore+i));
        objp.style.width = parseInt(objp.style.width) + 1 + 'px';  }
        

        animeInt=setTimeout("zmniejsz("+ktore+")", 3)
        }    
        
        if (odlicz==0) { blokada=0; clearTimeout(animeInt);}  
        window.status=odlicz+", "+blokada;
}


</script>


    <font color=white>

<div id="element_4" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>

<div id="element_5" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>

<div id="element_6" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>



<table><tr>
<td id="element_0" class="menu" onmouseover="powieksz(0)" onmouseout="zmniejsz(0)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_1" class="menu" onmouseover="powieksz(1)" onmouseout="zmniejsz(1)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_2" class="menu" onmouseover="powieksz(2)" onmouseout="zmniejsz(2)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_3" class="menu" onmouseover="powieksz(3)" onmouseout="zmniejsz(3)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

</tr></table>

</font>

^ działanie skryptu odbiega od tego na którym się wzoruje.
Dlatego zwracam się do Was z ogromną prośbą pomocy.

Z góry serdcznie dziękuje i czekam na odpowiedź, pozdrawiam..

[php programmer]

Najlepiej ściągnij sobie całą stronkę (Plik->Zapisz Jako -> Strona www, kompletna),
a potem wydziel sobie jedynie część kodu
zawierającą menu.

Ten post edytował php programmer 26.04.2007, 10:55:52

[mundek88]

tak właśnie kombinowałem, ale to menu jest oparte na JavaScript'owej bibliotece mootools - która waży 45kB (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) więc nie ma sensu dla samego menu zwiększać o tyle objętość kodu.

[php programmer]

45 KB, no bez przesady to nie jest dużo,
a oszczędzi ci mnóstwo czasu - po to są biblioteki,
skoro autorzy strony wybrali takie rozwiązanie,
dlaczego Ty byś nie miał zrobić tak samo

Ten post edytował php programmer 26.04.2007, 10:59:04

[mundek88]

bo to jest strona poświęcona właśnie tej bibliotece (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Autorzy pokazali w ten sposób jej możliwości.
Jestem pewien że można by to napisać w ~10kB, 45kB zwiekszy mi dość znacznie rozmiar index'u..

[vokiel]

Nie wnikałem w kod tej biblioteki, ale zapewne cały nie jest tylko do tego menu, zatem może warto go przejrzeć i wyciągnąć te części, które przydadzą sie w Twoim projekcie, reszty sie pozbyć, albo przynajmniej bedziesz wiedzial jak to zostało zrobione, będzie sie na czym wzorować

pzdr