Ik ben een javascriptleek. Ben met knippen, plakken en aanpassen het een en ander aan het leren.
Ik probeer een menubalk met submenus te maken.
De bedoeling is dat als je met de muis over "menu3" gaat de submenu-links tussen "menu3" en "menu4" komen te staan. Dit is me nu gelukt, alleen wil ik nu dat de submenu-links weer verdwijnen als je over een andere link gaat. Hoe doe ik dit.
En verder komen er steeds meer spaties tussen "menu3" en "menu4" als ik er een paar keer over heen ga.
Iemand een idee?
Wat ik nu heb:
Ik probeer een menubalk met submenus te maken.
De bedoeling is dat als je met de muis over "menu3" gaat de submenu-links tussen "menu3" en "menu4" komen te staan. Dit is me nu gelukt, alleen wil ik nu dat de submenu-links weer verdwijnen als je over een andere link gaat. Hoe doe ik dit.
En verder komen er steeds meer spaties tussen "menu3" en "menu4" als ik er een paar keer over heen ga.
Iemand een idee?
Wat ik nu heb:
<html>
<head>
<style type="text/css">
#submenu {
display: none;
}
<!--
A:link {text-decoration: none; color: #ff0000}
A:visited {text-decoration: none; color: #ff0000}
A:active {text-decoration: none}
A:hover {text-decoration: none; color: #FFFFFF; background-color:
#ff0000} -->
</style>
<script type="text/javascript">
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {
abra.display= "block";
}
return false;
} else {
return true;
}
}
</script>
<script type="text/javascript">
function kadabra(zap) {
if (document.getElementById) {
var abra = document.getElementById(zap).style;
if (abra.display == "block") {
abra.display = "none";
} else {abra.display= "block";
}
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<table><tr><td>
<a href="#">menu 1</a>
<a href="#">menu 2</a>
<a href="#" onMouseOver="return kadabra('submenu');">menu 3</a></td>
<td id="submenu">
<a href="#">submenu 1</a>
<a href="#">submenu 2</a>
</td>
<td>
<a href="#">menu 4</a>
</td></tr></table>
</body>
</html>