Avatar billede ladyhawke Novice
23. april 2008 - 20:38 Der er 6 kommentarer og
1 løsning

Vertikal menu i 2 niveauer, med fold-ned for valgt niveau

Jeg vil gerne lave en vertikal menu i 2 niveauer (primært css, men lidt JS er fint nok).

Jeg vil gerne have at når man klikker på et menupunkt på øverste niveau, så foldes en boks ud direkte under dette punkt, med de underpunkter der findes.

Det vil sige at den nederste del af menuen skal skubbes nedad, når boksen foldes ud. Jeg vil også gerne kunne markere det aktive menupunkt (uanset om det er øverste niveau eller ej)

Jeg har kigget en del på nogle vertikale css menuer, men dem jeg har fundet folder ud til højre og/eller kun ved mouse over, det skal det helst ikke være...

Kan nogen hjælpe med et godt hint eller et link til en løsning?
Avatar billede w13 Novice
23. april 2008 - 20:57 #1
Jeg fandt denne kode frem, som jeg lavede til en anden bruger for lang tid siden. Kan den bruges som udgangspunkt?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.statusheadline{width:250px;cursor:pointer;background-color:#ccc;border:1px solid #ccc;font-size:14px:font-weight:bold}
.statustext{display:none;height:0;overflow:hidden;width:250px;border:1px solid #ccc;font-size:11px}
</style>
</head>
<body>

<script type="text/javascript" language="javascript">
var StatusWait=false;
function StatusBox(o){
    if(StatusWait)return;
    StatusWait=true;
    if(document.getElementById(o).style.overflow!="auto")appearStatusBox(o);
    else hideStatusBox(o);
}

function appearStatusBox(o,iHeight){
    var elm=document.getElementById(o);
    if(!iHeight)iHeight=0;
    if(iHeight<120){
        elm.style.display="block";
        elm.style.height=iHeight+"px";
        if(iHeight<70)iHeight+=3;
        else if(iHeight<100)iHeight+=2;
        else iHeight++;
        window.setTimeout("appearStatusBox('"+o+"',"+iHeight+")",10)
    }else{
        elm.style.overflow="auto";
        StatusWait=false
    }
}

function hideStatusBox(o,iHeight){
    var elm=document.getElementById(o);
    if(!iHeight)iHeight=elm.offsetHeight;
    if(iHeight>1){
        elm.style.overflow="hidden";
        elm.style.height=iHeight+"px";
        if(iHeight>50)iHeight-=3;
        else if(iHeight>30)iHeight-=2;
        else iHeight--;
        window.setTimeout("hideStatusBox('"+o+"',"+iHeight+")",10)
    }else{
        elm.style.display="none";
        StatusWait=false
    }
}
</script>

<div class="statusheadline" onclick="StatusBox('info1')">Overskrift</div>
<div id="info1" class="statustext">
    Andet tekst her!<br>
    Og her!
</div>

<div class="statusheadline" onclick="StatusBox('info2')">Overskrift</div>
<div id="info2" class="statustext">
    Andet tekst her!<br>
    Og her!
</div>

</body>
</html>
Avatar billede ladyhawke Novice
23. april 2008 - 21:06 #2
Det kan den godt, skal bare have fundet ud af at lave under menupunkter i stedet for tekstboksen (evt. en mulighed for at den folder det ikke aktive hovedmenupunkt sammen?) samt vise det aktivt valgte menupunkt, som kan være hovedmenupunkt eller et undermenupunkt og det skal man kunne se (hvad der er valgt pt.)

ideelt skal man kunne navigere via et link i teksten, til et menupunkt, som derefter vises som aktivt (når brugeren har klikket på linket naturligvis) - håber det giver mening
Avatar billede ladyhawke Novice
23. april 2008 - 21:07 #3
det er jo heller ikke sikkert der er samme antal under menupunkter i hvert hoved menupunkt...
Avatar billede ladyhawke Novice
23. april 2008 - 22:00 #4
den her giver faktisk noget brugbart
http://tutorials.alsacreations.com/deroulant/

skal bare have sat den på en side og finde ud af at linke til mine forskellige sider, uden at kopiere menuen til alle siderne
Avatar billede ladyhawke Novice
19. maj 2008 - 11:42 #5
læg lige et svar... det hjalp at få inspiration til at lede
Avatar billede w13 Novice
19. maj 2008 - 11:43 #6
Oki. ;)
Avatar billede w13 Novice
19. maj 2008 - 13:03 #7
Takker. :)
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