foldud menu med grafik

Selve menuen sættes op her, så det du skal gøre i dette tilfælde er udskifte de steder der fx. står [choice 0] med et billede <img src="dinfil.jpg">

<!-- Menu container -->
<div id="divFoldCont">
    <!-- Top 1 -->
    <div id="divFold0" class="clFold"><a href="#" onclick="foldmenu(0); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0" width=12 height=12 alt="" border=0> [choice 0]</a><br>
        <div id="divFoldSub0_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub0"  alt="" border=0> [choice 0_0]</a><br>
            <div id="divFoldSub0_0_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_2</a><br>
            </div>
        </div>
        <div id="divFoldSub0_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub1"  alt="" border=0> [choice 0_1]</a><br>
            <div id="divFoldSub0_1_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_3</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_4</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_1_5</a><br>
            </div>
        </div>
        <div id="divFoldSub0_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub2"  alt="" border=0> [choice 0_2]</a><br>
            <div id="divFoldSub0_2_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_2_3</a><br>
            </div>
        </div>
       
        <!-- Here's an example of how the next "submenu" will look:
       
        <div id="divFoldSub0_3" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,3); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub3"  alt="" border=0> [choice 0_3]</a><br>
            <div id="divFoldSub0_3_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_3_3</a><br>
            </div>
        </div>
       
        Note all the numbers that are changed:
       
        divFoldSub0_CHANGED
        subfoldmenu(0,CHANGED)
        imgFold0SubCHANGED
        divFoldSub0_CHANGED_0
       
        Locate those places to see where the numbers should be increased by one each time.
        If you add more submenus be sure to change it in the submenus array as well.
       
        -->
    </div>
    <!-- Top 2 -->
    <div id="divFold1" class="clFold"><a href="#" onclick="foldmenu(1); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1" width=12 height=12 alt="" border=0> [choice 1]</a><br>
        <div id="divFoldSub1_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub0"  alt="" border=0> [choice 1_0]</a><br>
            <div id="divFoldSub1_0_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_0_1</a><br>
            </div>
        </div>
        <div id="divFoldSub1_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub1"  alt="" border=0> [choice 1_1]</a><br>
            <div id="divFoldSub1_1_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_1_3</a><br>
            </div>
        </div>
        <div id="divFoldSub1_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(1,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub2"  alt="" border=0> [choice 1_2]</a><br>
            <div id="divFoldSub1_2_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 1_2_3</a><br>
            </div>
        </div>
    </div>
    <!-- Top 3 -->
    <div id="divFold2" class="clFold"><a href="#" onclick="foldmenu(2); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2" width=12 height=12 alt="" border=0> [choice 2]</a><br>
        <div id="divFoldSub2_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub0"  alt="" border=0> [choice 2_0]</a><br>
            <div id="divFoldSub2_0_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_0_2</a><br>
            </div>
        </div>
        <div id="divFoldSub2_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(2,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold2Sub1"  alt="" border=0> [choice 2_1]</a><br>
            <div id="divFoldSub2_1_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 2_1_0</a><br>
            </div>
        </div>
    </div>
    <div id="divFold3" class="clFold"><a href="#" onclick="foldmenu(3); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3" width=12 height=12 alt="" border=0> [choice 3]</a><br>
        <div id="divFoldSub3_0" class="clFoldSub"><a href="java script://this link doesn't have a onclick, and can be used just like a regular link" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub0"  alt="" border=0> [empty]</a>
            <div id="divFoldSub3_0_0" class="clFoldSub2"></div>
        </div>
        <div id="divFoldSub3_1" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,1); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub1"  alt="" border=0> [choice 3_1]</a><br>
            <div id="divFoldSub3_1_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_1_2</a><br>
            </div>
        </div>
        <div id="divFoldSub3_2" class="clFoldSub"><a href="#" onclick="subfoldmenu(3,2); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub2"  alt="" border=0> [choice 3_2]</a><br>
            <div id="divFoldSub3_2_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_2</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 3_2_3</a><br>
            </div>
        </div>
    </div>
   
<!--
    Here's how it would look if we added one more top menu.
    (in this case a top menu with one sublevel.
   
   
    <div id="divFold4" class="clFold"><a href="#" onclick="foldmenu(4); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold4" width=12 height=12 alt="" border=0> [choice 4]</a><br>
        <div id="divFoldSub4_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(4,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold4Sub0"  alt="" border=0> [choice 4_0]</a><br>
            <div id="divFoldSub4_0_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 4_0_0</a><br>
            </div>
        </div>
    </div>   
   
    Note all the places the numbers changed:
   
    divFoldCHANGED
    foldmenu(CHANGED)
    imgFoldCHANGED
    divFoldSubCHANGED_0
    subfoldmenu(CHANGED,0)
    imgFoldCHANGEDSub0
    divFoldSubCHANGED_0_0
   
    Locate those places to see where the numbers should be increased by one each time.
    If you add more topmenus be sure to change the "mainmenus" variable
    and add it in the "submenus" array.
-->   
</div>

Det her er den første af dem, med første hovedpunkt og første underpunkt

<div id="divFold0" class="clFold"><a href="#" onclick="foldmenu(0); return false" class="clFoldLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0" width=12 height=12 alt="" border=0> [choice 0]</a><br>
        <div id="divFoldSub0_0" class="clFoldSub"><a href="#" onclick="subfoldmenu(0,0); return false" class="clSubLinks" onfocus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold0Sub0"  alt="" border=0> [choice 0_0]</a><br>
            <div id="divFoldSub0_0_0" class="clFoldSub2">
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_0</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_1</a><br>
                <a href="#" class="clSubLinks2" onfocus="if(this.blur)this.blur()">Sub 0_0_2</a><br>
            </div>
        </div>

Du kan udskifte teksten hvor der står choice og sub, de svarer til de punkter der er i menuen. Før teksten er der et billede, det er det billede der er pilen, denne kan du også udskifte eller helt fjerne.

jo, men er hvad med "hoved-menu" knappen som jeg gerne vil have bliver en anden, samtidig med at den åbner sin undermenu?
(eks. rød choice1 knap bliver til en grøn choice1 knap når man klikker på den, og åbner dens undermenu).

nå, jeg har fundet en anden løsning - så jeg lukker spørgsmålet og giver point til spacemaninc