Denne af roenving - se evt. spm her
http://www.eksperten.dk/spm/485556<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Expanding/contracting menu</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,
http://www.eksperten.dk/spm/485556"><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{position:relative;overflow:hidden;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">
var speed = 50;//tid imellem ny højde;
var diff = 2;//antal pixels, som højde ændres med;
var state = new Array(),menus = new Array(),initiated=false,actMenus=0,actM=null;
function showMenu(d){
d = (showMenu.arguments.length==1)?document.getElementById(d.id.substring(1)):false;
//if(initiated&&d&&state[d.id][2]==3)return;// <-- denne linje skal aktiveres, hvis man ikke skal kunne lukke åbne menuer !-)
var num = d?state[d.id][0]:null;
actM = d?num:actM;
var newHeight;
for(i=0;menus.length>i;i++){
var actId = menus[i].id;
switch(state[actId][2]){
case 0:
if(num===state[actId][0]){
document.getElementById("o"+actId+'pic').src = "../img/minus.gif"
state[actId][2] = 1;
actMenus++;
newHeight = state[actId][3] + diff;
if(newHeight>=state[actId][1]){
state[actId][3] = state[actId][1];
state[actId][2] = 3;
actMenus--;
}else
state[actId][3] = newHeight;
}
break;
case 1:
newHeight = state[actId][3] + diff;
if(newHeight>=state[actId][1]){
state[actId][3] = state[actId][1];
state[actId][2] = 3;
actMenus--;
}else
state[actId][3] = newHeight;
break;
case 2:
newHeight = state[actId][3] - diff;
if(0>=newHeight){
state[actId][3] = 0;
state[actId][2] = 0;
actMenus--;
}else
state[actId][3] = newHeight;
break;
case 3:
if(actM!=state[actId][0]||d){
document.getElementById("o"+actId+'pic').src = "../img/plus.gif"
state[actId][2] = 2;
actMenus++;
newHeight = state[actId][3] - diff;
if(0>=newHeight){
state[actId][3] = 0;
state[actId][2] = 0;
actMenus--;
}else
state[actId][3] = newHeight;
}
}
menus[i].style.height = state[actId][3] + 'px';
}
initiated = true;
if(actMenus>0)setTimeout('showMenu()',speed);
else actM = null;
}
function init(){
var divs = document.getElementsByTagName('DIV');
for(i=0;divs.length>i;i++){
if(divs[i].id.match(/^menu/)){
id = divs[i].id;
menus[menus.length] = divs[i];
state[id] = new Array();
state[id][0] = menus.length-1;
state[id][1] = divs[i].offsetHeight;
state[id][2] = 3;
state[id][3] = 0;
//divs[i].style.height = '0px';
}
}
showMenu();
}
</script>
</head>
<body onload="init();">
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img src="img/plus.gif" height="9" width="9" border="0" alt="Fold ud/ind" id="omenu1pic">
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 src="img/plus.gif" height="9" width="9" border="0" alt="Fold ud/ind" id="omenu2pic">
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 src="img/plus.gif" height="9" width="9" border="0" alt="Fold ud/ind" id="omenu3pic">
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 src="img/plus.gif" height="9" width="9" border="0" alt="Fold ud/ind" id="omenu4pic">
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 src="img/plus.gif" height="9" width="9" border="0" alt="Fold ud/ind" id="omenu5pic">
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>
