Grunden til at jeg omtaler det som en menu er, at det jo principielt er det samme som at have en menu: Man starter med at have det foldet sammen, men der er mulighed for at folde ud, så alt loades fra starten, så det kun er et spørgsmål om at vise eller ikke vise:
<!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="søgeord adskilt af komma">
<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 = "../billede.jpg";
}
}
st = document.getElementById('menu'+id).style;
st.display = (st.display!='block')?'block':'none';
document.getElementById(d.id+'pic').src = (st.display=='block')?"../eksperten_logo_new.gif":"../billede.jpg";
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="../billede.jpg" height="10" width="10">
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="../billede.jpg" height="10" width="10">
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="../billede.jpg" height="10" width="10">
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="../billede.jpg" height="10" width="10">
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="../billede.jpg" height="10" width="10">
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>
