Ik ben een menu aan het maken, wat er na het laden zo uitziet:
en er zo uitziet wanneer het menu is uitgeklapt:
Ik heb het even on-line gezet http://pos5.nl/forumvraag/ zodat je de bron kunt bekijken (zie ook hieronder!.
Probleem is het volgende:
- Zodra het menu is geladen, staat alles door elkaar heen. Nadat je er een keer overheen 'gemuist' bent, is dit verdwenen... Hoe kan dit?
- Wanneer je een submenu 'kiest' gaat het vervolgens niet meer weg wanneer je er vanaf gaat (en bijvoorbeeld weer naar 'Sub1' of 'Sub2' gaat.
Heeft iemand een idee hoe ik de code moet aanpassen om het goed werkend te krijgen?
Alvast bedankt, Martijn
<html>
<head><title>Top</title>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
<!--
window.onload=shows;
function shows(id) {
var e = document.getElementById(id);
for (var k = 1; k<=10; k++) {
if (document.getElementById('ssmenu'+k)) {document.getElementById('ssmenu'+k).style.display='none';}
}
if (e) {e.style.display='block';}
}
//-->
</script>
<style type="text/css">
@import "style.css";
</style>
</head>
<BODY onresize="window.location.href = window.location.href">
<div id="menu">
<dl>
<dt onmouseover="show('smenu1');"><a href="#" TARGET="WINDOW-1">Home</a></dt>
</dl>
<dl>
<dt onmouseover="show('smenu2');"><a href="#" TARGET="WINDOW-1">ITEM1</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#" TARGET="WINDOW-1">Sub1</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub2</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub3</a></li>
<dl>
<dt onmouseover="shows('ssmenu1');"><a href="#" TARGET="WINDOW-1">Sub4</a></dt>
<dd id="ssmenu1">
<ul>
<li><a href="#" TARGET="WINDOW-1">SubSub1</a></li>
<li><a href="#" TARGET="WINDOW-1">SubSub2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="shows('ssmenu2');"><a href="#" TARGET="WINDOW-1">Sub5</a></dt>
<dd id="ssmenu2">
<ul>
<li><a href="#" TARGET="WINDOW-1">SubSub3</a></li>
<li><a href="#" TARGET="WINDOW-1">SubSub4</a></li>
</ul>
</dd>
</dl>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="show('smenu3');"><a href="#" TARGET="WINDOW-1">ITEM2</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#" TARGET="WINDOW-1">Sub1b</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub2b</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>
en er zo uitziet wanneer het menu is uitgeklapt:
Ik heb het even on-line gezet http://pos5.nl/forumvraag/ zodat je de bron kunt bekijken (zie ook hieronder!.
Probleem is het volgende:
- Zodra het menu is geladen, staat alles door elkaar heen. Nadat je er een keer overheen 'gemuist' bent, is dit verdwenen... Hoe kan dit?
- Wanneer je een submenu 'kiest' gaat het vervolgens niet meer weg wanneer je er vanaf gaat (en bijvoorbeeld weer naar 'Sub1' of 'Sub2' gaat.
Heeft iemand een idee hoe ik de code moet aanpassen om het goed werkend te krijgen?
Alvast bedankt, Martijn
<html>
<head><title>Top</title>
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
<!--
window.onload=shows;
function shows(id) {
var e = document.getElementById(id);
for (var k = 1; k<=10; k++) {
if (document.getElementById('ssmenu'+k)) {document.getElementById('ssmenu'+k).style.display='none';}
}
if (e) {e.style.display='block';}
}
//-->
</script>
<style type="text/css">
@import "style.css";
</style>
</head>
<BODY onresize="window.location.href = window.location.href">
<div id="menu">
<dl>
<dt onmouseover="show('smenu1');"><a href="#" TARGET="WINDOW-1">Home</a></dt>
</dl>
<dl>
<dt onmouseover="show('smenu2');"><a href="#" TARGET="WINDOW-1">ITEM1</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#" TARGET="WINDOW-1">Sub1</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub2</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub3</a></li>
<dl>
<dt onmouseover="shows('ssmenu1');"><a href="#" TARGET="WINDOW-1">Sub4</a></dt>
<dd id="ssmenu1">
<ul>
<li><a href="#" TARGET="WINDOW-1">SubSub1</a></li>
<li><a href="#" TARGET="WINDOW-1">SubSub2</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="shows('ssmenu2');"><a href="#" TARGET="WINDOW-1">Sub5</a></dt>
<dd id="ssmenu2">
<ul>
<li><a href="#" TARGET="WINDOW-1">SubSub3</a></li>
<li><a href="#" TARGET="WINDOW-1">SubSub4</a></li>
</ul>
</dd>
</dl>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="show('smenu3');"><a href="#" TARGET="WINDOW-1">ITEM2</a></dt>
<dd id="smenu3">
<ul>
<li><a href="#" TARGET="WINDOW-1">Sub1b</a></li>
<li><a href="#" TARGET="WINDOW-1">Sub2b</a></li>
</ul>
</dd>
</dl>
</div>
</body>
</html>