Tach.
Ich habe für eine DropDown-Navigation folgende Scripte verwendet.
Quelle:
Traum-Projekt
index.html
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" style="text/css" href="_css/global.css">
<link rel="stylesheet" style="text/css" href="_css/navigation.css">
<script src="_javascript/dropdown_ie.js" type="text/javascript">
</script>
<title>
navigation
</title>
</head>
<body onload="enableDropDownIE( );">
<div id="ctNavigation">
<ul id="NavMain" class="DropDown">
<li>
Home
<ul id="NavSub">
<li>
<a href="#">
Link 1
</a>
</li>
<li>
<a href="#">
Link 2
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html> |
dropdown_ie.js
Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
| function enableDropDownIE( ) {
AryList = document.getElementsByTagName( 'UL' );
for ( i = 0; i < AryList.length; i++ ) {
if ( AryList[ i ].className == 'DropDown' ) {
var AryListItem = AryList[ i ].getElementsByTagName( 'LI' );
for ( j = 0; j < AryListItem.length; j++ ) {
if ( AryListItem[ j ].lastChild.tagName == 'UL' ) {
AryListItem[ j ].onmouseover = function( ) {
this.lastChild.style.display = 'block';
}
<b>AryListItem[ j ].onmouseout = function( ) {
this.lastChild.style.display = 'none';
}
}
}
}
}
} |
Das Ziel ist nun, das SubMenü "NavSub" erst nach einem bestimmten Zeitintervall zuklappen zu lassen. Ich weiß, dass ich mit "setInterval" arbeiten muss - in genau folgendem Block:
Quelltext
1:
2:
3:
| AryListItem[ j ].onmouseout = function( ) {
this.lastChild.style.display = 'none';
} |
Aber ich weiß nicht wie ich das am Besten realisiere. Alle Versuche, die ich unternommen habe (mit Nutzung von SelfHTML), sind gescheitert.
Mich interessiert auch, wieso das Menü nicht im FF mittels dieses JS funktioniert. Ich habe bisher ein CSS "#NavMain li:hover #NavSub { }" verwendet. Wenn ich dieses entferne, wird das Script nicht wie gewünscht vom FF interpretiert. Ich denke, die CSS's werden für eine Lösung des Problems nicht gebraucht. Sie funktionieren wie sie sollen. Falls doch poste ich sie nachträglich.
Vielen Dank für jede gute Anregung.
