Dynamische CSS-Navigation für moderne Browser

[Matze]

Hallo,

auf meiner Homepage gibt es zwei Navigationsleisten, die ich mit Hilfe der Seite http://de.selfhtml.org/css/layouts/navigationsleisten.htm erstellt habe ("Drop-Down-Menü"). Der Internet Explorer braucht (zumindest bis zur Version 6.0) mal wieder eine Sonderbehandlung, die unter http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern ganz unten zu finden ist. Dieses Script funktioniert natürlich nur für eine Navigationsleiste. Damit auch die zweite Navigationsleiste funktioniert, habe ich dieses Script ein zweites Mal eingebaut und die Funktionsnamen abgeändert:

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE2() {
    var LI = document.getElementById("Navigation2").firstChild;
    do {
      if (sucheUL2(LI.firstChild)) {
        LI.onmouseover=einblenden2; LI.onmouseout=ausblenden2;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

function sucheUL2(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

function einblenden2() {
    var UL = sucheUL2(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden2() {
    sucheUL(this.firstChild).style.display = "none";
  }

window.onload=hoverIE2;
}
</script>

Das Problem ist nun aber, dass immer nur eines der Scripte funktioniert. D.h., wenn ich obiges Script entferne, funktioniert das andere, unveränderte Script. Wenn ich das unveränderte Script entferne, funktioniert das obige Script mit den abgeänderten Namen. Baue ich beide Scripte ein, so funktioniert trotzdem immer nur eines.
Woran liegt das bzw. was machew ich falsch?
Vielen Dank für alle Hinweise.

Mit freundlichen Grüßen,
Matze

[rfb]

Moin

wie baust du denn die Script ein wenn du beide einsetzt?

Gruß
rfb

[Matze]

Hallo,

ich setze jeweils den Code in den head-Bereich. D.h. dort steht:
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE2() {
    var LI = document.getElementById("Navigation2").firstChild;

...

window.onload=hoverIE2;
}
</script>

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;

...

window.onload=hoverIE;
}
</script>

Mit dem window.onload=hoverIE-Befehl bzw. dem window.onload=hoverIE2-Befehl wird die entsprechende Funktion für den IE geladen.

Viele Grüße,
Matze

[rfb]

Moin

fasse die beiden window.onload zusammen zu

window.onload=function () {
 hoverIE2();
 hoverIE();
}

(und lösche das

</script>
</script ...>

zwischen den Funktionen, das kann alles in einem Script-Bereich stehen.

Gruß
rfb

[Matze]

Vielen Dank für die Hilfe! Jetzt funktioniert alles.

Viele Grüße,
Matze

[Der Martin]

Hallo Matze,

window.onload=hoverIE2;
  ...
  window.onload=hoverIE;

und welche der beiden Zuweisungen gewinnt dann wohl? Du kannst einer Eigenschaft doch nicht gleichzeitig zwei Werte zuweisen.

Wenn schon, dann musst du *eine* Funktion haben, die beide nacheinander aufruft - beispielsweise indem du *einmal* notierst:

window.onload = function()  
 { hoverIE2();  
   hoverIE();  
 };

So long,
 Martin