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>
