Her er et eksempel på hvordan sådan noget kan gøres - det her er et rimeligt simpelt, ikke særligt pænt, og ganske skod-kodet eksemplar af en \"folde ud-folde sammen\"-menu.. Du angiver menupunkternes titel, tekst, url osv.osv i \"BuildMenu\" funktionen.. good luck!
<html>
<head>
<STYLE TYPE=\"text/css\">
BODY{BACKGROUND-COLOR:#c8c4c0;}
#menuen
{
POSITION:absolute;
TOP:10;
LEFT:10;
WIDTH:140;
HEIGHT:300;
CLIP:rect(0px 140px 300px 0px);
LAYER-BACKGROUND-COLOR:#ffffff;
BACKGROUND-COLOR:#ffffff;
BORDER:inset 2px white;
}
</STYLE>
<SCRIPT LANGUAGE=javascript>
<!--
function document_onload()
{
IE=document.all?true:false;
BuildMenu()
}
function BuildMenu()
{
MenuPointMaxWidth=100
var m=new Array()
m[0]=new MenuPoint(\"main1\",12,\"Verdana,Arial\",false,null,null)
m[1]=new MenuPoint(\"main2\",12,\"Verdana,Arial\",false,null,null)
m[2]=new MenuPoint(\"main3\",12,\"Verdana,Arial\",false,null,null)
var s=new Array()
s[0]=new SubMenu(\"sub1,1\",\"
http://www.jubii.dk\",m[0],10,\"Verdana,Arial\")
s[1]=new SubMenu(\"sub1,2\",\"
http://www.jubii.dk\",m[0],10,\"Verdana,Arial\")
s[2]=new SubMenu(\"sub2,1\",\"
http://www.jubii.dk\",m[1],10,\"Verdana,Arial\")
s[3]=new SubMenu(\"sub2,2\",\"
http://www.jubii.dk\",m[1],10,\"Verdana,Arial\")
s[4]=new SubMenu(\"sub2,3\",\"
http://www.jubii.dk\",m[1],10,\"Verdana,Arial\")
s[5]=new SubMenu(\"sub3,1\",\"
http://www.jubii.dk\",m[2],10,\"Verdana,Arial\")
s[6]=new SubMenu(\"sub3,2\",\"
http://www.jubii.dk\",m[2],10,\"Verdana,Arial\")
var str = \"\"
for (var i in MenuPoints) str+=MenuPoints[i].GetHTML();
for (var i in SubMenues) str+=SubMenues[i].GetHTML();
menuWrite(str)
for (var i in MenuPoints) MenuPoints[i].Init();
for (var i in SubMenues) SubMenues[i].Init();
SetAllPositions(4)
}
function menuWrite(str)
{
if (IE) document.all[\'menuen\'].innerHTML=str;
else {
document.menuen.document.write(str);
document.menuen.document.close();
}
}
function SetAllPositions(x)
{
if (typeof(x)==\"undefined\") x=MenuStartLeft;
else MenuStartLeft=x;
var theTop=0
for (var i=0;i<MenuPoints.length;i++) {
var obj=MenuPoints[i];
obj.SetPosition(theTop,x)
theTop+=MenuPoints[i].height;
if (obj.isOpen) {
for (var j=0; j<obj.children.length;j++) {
obj.children[j].SetPosition(theTop,x)
theTop+=obj.children[j].height;
}
}
theTop+=2
}
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE=javascript>
<!--
MenuPoints=new Array();
MenuPointExpanded=null;
function MenuPoint(title,fontSize,fontFamily,isImg,width,height)
{
this.name=\"MP\"+MenuPoints.length;
this.obj=this.name+\"obj\";
eval(this.obj+\"=this\");
this.count=MenuPoints.length;
MenuPoints[this.count]=this;
this.title=title;
this.isImg=isImg;
this.fontSize=fontSize;
this.fontFamily=fontFamily;
this.width=this.isImg?width:MenuPointMaxWidth;
this.height=this.isImg?height:this.fontSize+6;
this.isOpen=false;
this.children=new Array();
this.GetHTML=MenuPoint_getHTML;
this.Init=MenuPoint_init;
this.SetPosition=MenuPoint_setPosition;
this.Expand=MenuPoint_expand;
this.Collapse=MenuPoint_collapse;
this.Mousedown=MenuPoint_mousedown;
}
function MenuPoint_getHTML()
{
var styleStr=\'POSITION:absolute;TOP:0;LEFT:0;\'
styleStr+=\'width:\'+this.width+\';height:\'+this.height+\';CLIP:rect(0px \'+this.width+\'px \'+this.height+\'px 0px);CURSOR:hand;\'
return \'<div id=MP\'+this.name+\' STYLE=\"\'+styleStr+\'\">\'+this.title+\'</DIV>\';
}
function MenuPoint_init()
{
this.element=IE?document.all[\'MP\'+this.name]:document.menuen.document.layers[\'MP\'+this.name];
this.css=IE?this.element.style:this.element;
if (!IE) this.element.captureEvents(Event.MOUSEDOWN);
this.element.onmousedown=new Function(\"e\",this.obj+\".Mousedown()\");
}
function MenuPoint_setPosition(y,x)
{
this.css.top=y;
if (typeof(x)!=\"undefined\") this.css.left=x;
}
function MenuPoint_expand(){
this.isOpen=true;
if (MenuPointExpanded!=null) MenuPointExpanded.Collapse();
MenuPointExpanded=this;
for (var i in this.children) this.children[i].Show()
}
function MenuPoint_collapse(){
this.isOpen=false;
MenuPointExpanded=null;
for (var i in this.children) this.children[i].Hide();
}
function MenuPoint_mousedown()
{
if (this.isOpen) this.Collapse();
else this.Expand();
SetAllPositions()
}
//-->
</SCRIPT>
<SCRIPT LANGUAGE=javascript>
<!--
SubMenues=new Array()
function SubMenu(title,url,parentMenu,fontSize,fontFamily,width)
{
this.name=\"SM\"+SubMenues.length;
this.obj=this.name+\"obj\";
eval(this.obj+\"=this\");
this.count=SubMenues.length;
SubMenues[this.count]=this;
this.title=title;
this.url=url;
this.parentMenu=parentMenu;
this.fontSize=fontSize;
this.fontFamily=fontFamily;
this.width=typeof(width)==\"undefined\"? MenuPointMaxWidth:width;
this.height=this.fontSize+6;
this.parentMenu.children[this.parentMenu.children.length]=this;
this.GetHTML=SubMenu_getHTML;
this.Init=SubMenu_init;
this.SetPosition=SubMenu_setPosition;
this.Show=new Function(\"\",\"this.css.visibility=\'visible\'\");
this.Hide=new Function(\"\",\"this.css.visibility=\'hidden\'\");
this.Mousedown=SubMenu_mousedown;
}
function SubMenu_getHTML()
{
var styleStr=\'POSITION:absolute;TOP:0;LEFT:0;WIDTH:\'+this.width+\';HEIGHT:\'+this.height+\';CLIP:rect(0px \'+this.width+\'px \'+this.height+\'px 0px);VISIBILITY:hidden;FONT:\'+this.fontSize+\'px \'+this.fontFamily+\';CURSOR:hand;\';
return \'<DIV ID=SM\'+this.name+\' STYLE=\"\'+styleStr+\'\">\'+this.title+\'</DIV>\'
}
function SubMenu_init()
{
this.element=IE?document.all[\'SM\'+this.name]:document.menuen.document.layers[\'SM\'+this.name];
this.css=IE?this.element.style:this.element;
if (!IE) this.element.captureEvents(Event.MOUSEDOWN);
this.element.onmousedown=new Function(\"e\",this.obj+\".Mousedown()\");
}
function SubMenu_setPosition(y,x)
{
this.css.top=y;
if (typeof(x)!=\"undefined\") this.css.left=x;
}
function SubMenu_mousedown()
{
window.open(this.url)
}
//-->
</SCRIPT>
</head>
<body onload=\"document_onload()\">
<DIV ID=menuen>
</DIV>
</body>
</html>
