Moin!
Ich tüftele an einem kleinen Problem herum und muss aber dabei sagen, dass ich in JS noch nicht sehr sattelfest bin bzw. erst bei den ersten Gehversuchen.
Ausgangslage:
Es soll für eine linke Navigationsleiste mit reinem Text (der später auch noch mit css schön gemacht wird) eine Möglichkeit geschaffen werden, Menüeinträge in zwei oder höchstens drei Ebenen zu verwalten, wobei die beim Überrollen des Eintrags der Ebene1 die Untermenüs nur der Ebene1 sichtbar werden. Rollt man dann über den nächsten Eintrag der Ebene1, werden die Untermenüs des ersten Eintrags geschlossen und stattdessen die des zweiten geöffnet.
Also nichts neues, nur das dies sonst überwiegend mit click erledigt wird, was aber das prinzipielle Problem sicherlich nicht berührt.
Problemstellung:
Auf Vorschlag von Manuel habe ich den im folgenden Listing (aufs wesentliche reduziert) genannten Code ausprobiert und auch schon modifiziert, bis ich merkte, dass er nicht im IE6 funktioniert.
Dort treffe ich beim überrollen über einen Menüeintrag auf die Fehlermeldung:
'objs[...].style' ist null oder kein Objekt.
Das betrifft die Zeile:
objs[nr].style.display = "block";
Hat jemand eine Idee (oder gar eine Lösung), welche Alternative man dann für den IE6 verwenden kann (dann würde ich eine Browserweiche einbauen) oder sogar einen Vorschlag, der ohne Browserweiche für NC6 und IE6 funktioniert?
Da die Seiten später nur im Intranet einer geschlossenen Benutzergruppe zur Verfügung stehen, werden nur die beiden Versionen benötigt.
Vielen Dank für Unterstützung.
Gruß, Frank.
___________________________________________
<html>
<head>
<style type="text/css">
ul.Menu { display:none;}
</style>
</head>
<body>
<script type="text/javascript">
function setVisible( nr ){
objs = document.getElementsByName( "Menu" );
// Erst alle unsichtbar machen
for( i = 0; i < objs.length; i++ ){
objs[i].style.display = "none";
}
// Das gewünschte sichtbar machen
objs[nr].style.display = "block";
}
</script>
<ul>
<li class="alle" ><a href="#" onMouseOver="setVisible(0);" onClick="return false;">Auto</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Audi</a></li>
<li><a href="" target="">BMW</a></li>
<li><a href="" target="">Fiat</a></li>
<li><a href="" target="">Mercedes</a></li>
</ul></li>
<li li class="alle"><a href="#" onMouseOver="setVisible(1);">Garten</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Rasen</a></li>
<li><a href="" target="">Blumen</a></li>
<li><a href="" target="">Gemüse</a></li>
<li><a href="" target="">Bäume</a></li>
</ul></li>
<li li class="alle"><a href="#" onMouseOver="setVisible(2);">Urlaub</a>
<ul name="Menu" class="Menu">
<li><a href="" target="">Hintertux</a></li>
<li><a href="" target="">Bretagne</a></li>
<li><a href="" target="">Toskana</a></li>
<li><a href="" target="">Schottland</a></li>
</ul></li>
</ul>
</body>
</html>