En udvidelse af min simple menu kunne være sådan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Simpel menu</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/414464"><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;cursor:pointer;color:#9d52be;background:#fff;font-weight:800;font-style:italics;font-size:10px;width:250px;}
.menu{display:none;padding-left:5px;}
.menu a{text-decoration:none;}
.menu a:link{color:black;}
.menu a:visited{color:black;}
.menu a:hover{color:red}
.menu a:active{color:red}
</style>
<script language="javascript" type="text/javascript">
function showMenu(d){
var id = d.id.substring(5);
divs = document.getElementsByTagName('DIV');
for(i=0;divs.length>i;i++){
if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
divs[i].style.display='none';
document.getElementById('o'+divs[i].id+'pic').src = "../img/plus.gif";
}
}
st = document.getElementById('menu'+id).style;
st.display = (st.display!='block')?'block':'none';
document.getElementById(d.id+'pic').src = (st.display=='block')?"../img/minus.gif":"../img/plus.gif";
skrivCookie('actMenu',d.id,(st.display=='none')?0:1);
}
window.onload = function(){
var d = hentCookie('actMenu');
if(d){
d = document.getElementById(d);
var id = d.id.substring(5);
st = document.getElementById('menu'+id).style;
st.display = (st.display!='block')?'block':'none';
document.getElementById(d.id+'pic').src = (st.display=='block')?"../img/minus.gif":"../img/plus.gif";
}
}
function skrivCookie(name,value,expTime,path){//Tid i dage
switch(skrivCookie.arguments.length){
case 1:
var expTime = 0;
var path = "/";
case 2:
var expTime = 0;
var path = "/";
case 3:
var path = "/";
}
var exp = new Date().getTime()+expTime*24*60*60*1000;
exp = new Date(exp).toGMTString();
var cook = name + " = " + escape(value) + ";expires=" + exp + ";path=" + path;
document.cookie = cook;
}
function hentCookie(name){
if (document.cookie){
var n = document.cookie.indexOf(name+"=");
if (n>-1){
var val = document.cookie.substring(n+name.length+1);
n = val.indexOf(";");
if(n>-1)val=val.substring(0,n);
return unescape(val);
}
}else return null;
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 1
<div id="menu1" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
<img id="omenu2pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 2
<div id="menu2" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
<img id="omenu3pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 3
<div id="menu3" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">
<img id="omenu4pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 4
<div id="menu4" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
<img id="omenu5pic" src="../img/plus.gif" height="10" width="10" alt="Fold ud/ind">
Punkt 5
<div id="menu5" class="menu" onclick="event.cancelBubble=true">
<a href="#" onclick="return false;">Underpunkt 1</a><br>
<a href="#" onclick="return false;">Underpunkt 2</a><br>
<a href="#" onclick="return false;">Underpunkt 3</a><br>
<a href="#" onclick="return false;">Underpunkt 4</a>
</div>
</div>
</body>
</html>
