Avatar billede freegeg Nybegynder
29. april 2006 - 23:13 Der er 4 kommentarer og
1 løsning

Animeret menu kollaps

Jeg har en menu

<div id="menuAncor"><img src="minimize.gif" OnMouseClick="menuCollaps();"> Menu
  <div id="Menu">
  <div id="menuItem" class="menuItem">Link</div>
  <div id="menuItem" class="menuItem">Link</div>
  <div id="menuItem" class="menuItem">Link</div>
  <div id="menuItem" class="menuItem">Link</div>
</div>
</div>

meget simpel :)

jeg ville gerne have menuCollaps() fik #Menu til at lave et animeret kollaps op i #menuAncor, også omvendt, vis den er kollapset.
Jeg er en klovn til Javascript, så ville høre om nogen kunne hjælpe.. jeg ved det sikkert er noget med et loop, drevet af en timeout().. men jeg kan ikke finde ud af det.. nogen der kan?
Avatar billede psykochicken Nybegynder
30. april 2006 - 17:24 #1
Er det noget i stil med det her du mener ?:

<script type="text/javascript">
function menuCollaps(id){
step = 5; // antal pixel pr. gentagelse
delay = 10; // forsinkelse mellem gentagelser
mysize = 100; // højde på menuen
mymenu = document.getElementById(id);
if( mymenu.style.height == '0px'){ myopen(); }
else{ myclose(); }
}

function myopen(){
thesize = parseInt(mymenu.style.height);
    if(thesize<mysize){
        mymenu.style.height=(thesize + step) + 'px';
        setTimeout('myopen()', delay);
    }
}

function myclose(){
thesize = parseInt(mymenu.style.height);
    if(thesize>0){
        mymenu.style.height=(thesize - step) + 'px';
        setTimeout('myclose()', delay);
    }
}
</script>

<div id="menuAncor" style="width:150px;cursor:pointer;background:#080;" onclick="menuCollaps('Menu')"><img src="minimize.gif"> Menu
</div>
<div id="Menu" style="width:150px;height:0px;overflow:hidden;background:#0f0;">
    <div id="menuItem1" class="menuItem">Link</div>
    <div id="menuItem2" class="menuItem">Link</div>
    <div id="menuItem3" class="menuItem">Link</div>
    <div id="menuItem4" class="menuItem">Link</div>
</div>

NB. husk id skal være unikt !

/psc
Avatar billede freegeg Nybegynder
30. april 2006 - 18:01 #2
mange tak :)
Avatar billede psykochicken Nybegynder
30. april 2006 - 18:49 #3
velbekomme ;o)
Avatar billede psykochicken Nybegynder
30. april 2006 - 19:53 #4
..og tak for point ;o)
Avatar billede freegeg Nybegynder
30. april 2006 - 21:14 #5
tak for hjælpen :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester