Hjælp til drop-down menu (JavaScript)
Jeg har et lille problem med min dropdownmenu.Den funger fint, men problemet er at hvis man går hen over de to overpunkter "OVERVIEW" & "EDITING" lige efter hinanden, så bliver begges undermenuer stående. Kan det ikke laves således at når man går til et nyt overpunkt forsvinder dette? Dette må også gerne ske hvis man går til de sidste 3 menuer (som dog ikke har undermenuer).
Muligvis også sådan at baggrunden på undermenuerne er transparent i stedet for hvid (#FFFFFF) :-)
Her er koden:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height:22px color: #FFFFFF;}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF;}
A:link { text-decoration: none; color: #000000; }
A:visited { text-decoration: none; color: #000000; }
A:hover { text-decoration: none; color: #666666; }
#Event { left: 111px; position: absolute; top: 252px; visibility: hidden; z-index: 1 }
#Hdgeneral { left: 111px; position: absolute; top: 252px; visibility: hidden; z-index: 1 }
.menus { color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
text-decoration: none }
.menus:hover { color: #999999; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
text-decoration: none }
select { font-family: arial, verdana; font-size: 12px }
input.Small { font-family: arial, verdana; font-size: 12px }
input { font-family: arial, verdana; font-size: 12px }
input.Button { font-family: arial, verdana; font-size: 12px }
-->
</style>
<SCRIPT language=javascript>
//
<!--
window.onerror = null;
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null// LAYER SWITCHING CODE
if (NS4 || IE4) {
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
}
// SHOW MENU
function showLayer(layerName){
if (NS4 || IE4) {
if (timeOn != null) {
clearTimeout(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
onLayer = layerName
}
}// HIDE MENU
function hideLayer(layerName){
if (menuActive == 0) {
if (NS4 || IE4) {
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)
}// -->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- menu start -->
<div id="Event" style="left: 197px; top: 104px">
<table bgcolor="black" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table bgcolor="#FFFFFF" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
<td><a class="menus" href="overview.htm" onmouseout="menuOut('rollimg0')" onmouseover="menuOver('rollimg0')" target="_blank">Overview
</a></td>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
</tr>
<tr>
<td> </td>
<td><a class="menus" href="overview.htm" onMouseOut="menuOut('rollimg0')" onMouseOver="menuOver('rollimg0')" target="_blank">Overview</a></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><a class="menus" href="overview.htm" onMouseOut="menuOut('rollimg0')" onMouseOver="menuOver('rollimg0')" target="_blank">Overview</a></td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="Hdgeneral" style="left: 287px; top: 104px">
<table bgcolor="black" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table bgcolor="#FFFFFF" cellpadding="1" cellspacing="0">
<tbody>
<tr>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
<td><a class="menus" href="content.htm" onmouseout="menuOut('rollimg0')" onmouseover="menuOver('rollimg0')" target="_top">Content</a></td>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
</tr>
<tr>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
<td><a class="menus" href="pictures.htm" onmouseout="menuOut('rollimg1')" onmouseover="menuOver('rollimg1')" target="_top">Pictures</a></td>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
</tr>
<tr>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
<td><a class="menus" href="news.htm" onmouseout="menuOut('rollimg2')" onmouseover="menuOver('rollimg2')" target="_top">News</a></td>
<td><img alt border="0" height="1" src="line.gif" width="2"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- menu end -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr bgcolor="#000000">
<td height="40"><img src="images/trans.gif" width="1" height="40"></td>
</tr>
<tr>
<td height="40" valign="bottom"><img src="images/trans.gif" width="1" height="40"></td>
</tr>
<tr>
<td height="325">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15"><img src="images/trans.gif" width="1" height="21"></td>
<td width="150"> </td>
<td width="12"> </td>
<td> <a class="bigmenus" href="#" " onMouseOver="showLayer('Event')">OVERVIEW</a> <a class="bigmenus" href="#" " onMouseOver="showLayer('Hdgeneral')">EDITING</a> <a href="link.htm">LINK</a> <a href="writer.htm">WRITER</a> <a href="writer.htm">WRITER</a></td>
</tr>
<tr>
<td colspan="4" height="1"><img src="streg.gif" width="100%" height="1"></td>
</tr>
<tr>
<td width="15"><img src="trans.gif" width="15" height="1"></td>
<td width="150"> </td>
<td width="12"><img src="trans.gif" width="12" height="1"></td>
<td bgcolor="#CCCCCC"><img src="trans.gif" width="20" height="325">
</td>
</tr>
<tr>
<td colspan="4" height="1"><img src="streg.gif" width="100%" height="1"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr bgcolor="#333333">
<td> </td>
</tr>
</table>
</body>
</html>
__________
Line
