Njelo
Threadersteller
Dabei seit: 18.07.2003
Ort: Leonberg
Alter: 43
Geschlecht: 
|
Verfasst Mi 28.06.2006 10:53
Titel JS-Dropdown Menu |
  |
|
Hallo,
das ist mein Menu:
| Code: | <script type="text/javascript">
// ||||||||||||||||||||||||||||||||||||||||||||||||||
Menu = {timer : null, current : null};
Menu.getStyle = function(name){
if(document.getElementById) return document.getElementById(name).style;
else if(document.all) return document.all[name].style;
else if(document.layers) return document.layers[name];
}
Menu.show = function(name){
if(this.timer) clearTimeout(this.timer);
this.getStyle(name).visibility = "visible";
this.current = name;
}
Menu.hide = function(){
this.timer = setTimeout("Menu.doHide()",200);
}
Menu.doHide = function(){
if(this.current){
this.getStyle(this.current).visibility = "hidden";
this.current = null;
}
}
// ||||||||||||||||||||||||||||||||||||||||||||||||||
</script>
</head>
<body>
<table class="table" width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150"><img src="images/logo.gif" alt="" height="48" width="61" align="right" border="0" /></td>
<td valign="top" width="500"><img src="images/spacer.gif" alt="" height="26" width="8" border="0" /><img src="images/name.gif" alt="" height="24" width="229" border="0" /></td>
<td></td>
</tr>
<tr height="112">
<td width="150" height="112"></td>
<td colspan="2" valign="top" height="112">
<div id="nav">
<a href="#">PUNKT1</a>
</div>
<div id="nav">
<a href="#">PUNKT2</a>
</div>
<div id="nav">
<a onmouseover="Menu.show('subnav');" onmouseout="Menu.hide();" onfocus="blur();" href="#">KOMPETENZEN</a>
<div id="subnav" onmouseover="Menu.doHide(); Menu.show(this.id);" onmouseout="Menu.hide();">
<layer onmouseover="if(document.layers)Menu.show('subnav');" onmouseout="if(document.layers)Menu.hide();">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr><td><a href="#">sub1</a></td></tr>
<tr><td><a href="#">sub2</a></td></tr>
<tr><td><a href="#">sub3</a></td></tr>
<tr><td><a href="#">sub4</a></td></tr>
</table>
</layer>
</div>
</div>
<div id="nav1">
<a onmouseover="Menu.doHide(); Menu.show('subnav2');" onmouseout="Menu.hide();" onfocus="blur();" href="#">PARTNER</a>
<div id="subnav2" onmouseover="Menu.show(this.id);" onmouseout="Menu.hide();">
<layer onmouseover="if(document.layers)Menu.show('subnav2');" onmouseout="if(document.layers)Menu.hide();">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="white">
<tr><td><a href="#">sub5</a></td></tr>
<tr><td><a href="#">sub6</a></td></tr>
<tr><td><a href="#">sub7</a></td></tr>
<tr><td><a href="#">sub8</a></td></tr>
<tr><td><a href="#">sub9</a></td></tr>
</table>
</layer>
</div>
</div>
|
Ich hätts nun gern, dass "hide" nicht per timer nach X Sekunden passiert, sondern dass die dropdown-links erst verschwinden, wenn man über einen anderen link fährt.
Also quasi ein "on mouseover hide all other subnavs" ....  oder so.
Wäre klasse, wenn mir jemand weiterhelfen könnte.
Gruß,
Njelo
|
|
Willkommen auf dem Portal für Mediengestalter
