Drop down menu ved brug af "div's" - hvad gør jeg galt?
Jeg ønsker at lave en tekstbaseret drop down-menu, som skal virke med netscape og explorer.Først ville jeg lave en test, hvor jeg ville implementere netscape-delen.
Idéen er at arbejde med dokumentets "layers"-objekt (document.layers["menu-hide"].visibility="hide";)
Virkemåde: Ved "mouseover" på "Menukategori" skulle undermenuen "Huuu!" forsvinde. Dette virker dog ikke!
Kan nogen fortælle hvad jeg gør galt?
- Kan "div's" ikke betragtes som "layer"-objekter?
- Er det "layer" jeg får frem med "document.layers["layerid"] ikke et objekt?
Her er Koden:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script language="javascript">
function hideDiv() { /* Dette skulle fungere med netscape, men ikke med IE !! */
/* document.writeln("før 'hide ' "); */
/* document.layers[0].visibility="hide"; */
document.layers["menu-hide"].visibility="hide";
/* document.writeln("efter 'hide ' "); */
}
/* Error: window.document.layers has no properties
Source File: file:///C:/Apache/htdocs/JavaScript-fors%F8g/mine%20fors%F8g/test01.html Line: 14
*/
</script>
<style>
div {
font-family: Arial, Helvetia, sans-serif;
font-size: 12px;
background-color:#FFCC33;
visibility: visible;
}
div.div2 {
font-family: Arial, Helvetia, sans-serif;
font-size: 12px;
background-color:#FFCC33;
visibility: visible;
}
</style>
</head>
<body >
<!-- **menu** -->
<div id="menu" style="z-index: 2; position: absolute; width:140px; height:20px; left:10px; top: 80px; font-size: 12px; margin:0px" onMouseOver="hideDiv()">
<span style="font-size: 13px; font-weight: bold; color: #666666">Menukategori</span>
</div>
<!-- **menu-hide** -->
<div class="div2" id="menu-hide" style="z-index: 1; position: absolute; width:140px; height:20px; left:10px; top: 100px; font-size: 12px; margin:0px">
<span style="font-size: 13px; font-weight: bold; color: #666666">Huuu!</span>
</div>
</body>
</html>
