Menu med undermenuer
Jeg har kigget lidt på muligheden for at lave en menu, der ved hjælp af javascript kan have nogle undermenuer til nogle menupunkter.Trykker man på MENU 1 kommer der et antal undermenuer til syne, og trykker man på MENU 2 bliver MENU 1 først lukket sammen igen hvorefter MENU 2 foldes ud.
Ud fra det jeg har set, har jeg strikket dette sammen, men det fungerer ikke :-(
Hvor er jeg gået galt i byen?
------------------------------------------------------
<html>
<head>
<style>
.menu {
height : 20px;
overflow : hidden;
}
html { margin : 0px; }
body { margin : 0px; margin-left : 10px; }
</style>
<script language=JavaScript1.2>
function toggleMenu(e) {
collapseMenus();
expandMenu(e);
}
function collapseMenus();
element = document.getElementById('menu1');
element.style.height=20;
element = document.getElementById('menu2');
element.style.height=20;
element = document.getElementById('menu3');
element.style.height=20;
}
function expandMenu(e) {
element = document.getElementById(e);
element.style.height=80;
}
</script>
</head>
<body>
<div class="menu" id="menu1" onclick="toggleMenu('menu1')">
<a href="">Menu punkt 1</a><br />
- <a href="">Undermenu punkt 1</a><br />
- <a href="">Undermenu punkt 2</a><br />
- <a href="">Undermenu punkt 3</a><br />
</div>
<div class="menu" id="menu2" onclick="toggleMenu('menu2')">
<a href="">Menu punkt 2</a><br />
- <a href="">Undermenu punkt 1</a><br />
- <a href="">Undermenu punkt 2</a><br />
- <a href="">Undermenu punkt 3</a><br />
</div>
<div class="menu" id="menu3" onclick="toggleMenu('menu3')">
<a href="">Menu punkt 3</a><br />
- <a href="">Undermenu punkt 1</a><br />
- <a href="">Undermenu punkt 2</a><br />
- <a href="">Undermenu punkt 3</a><br />
</div>
</body>
</html>
