Drop Down Menü

[lisa74]

Hallo Forum,

ich experimentier gerade mit js und css, bin also noch kein Profi.
ich möchte für meine Seite ein Drop Down Menü erstellen und habe auch schon was vorbreitet.

Im Fire Fox klappt alles super, nur der Internet Explorer will nicht so wie ich will.

Ich komme mit dem js für den Internet Explorer nicht klar und hänge nun seit zwei Tagen fest.

Im Internet Explorer wir nur die subnavigation des Menüs "Über Lisa"
an gezeigt, die zweite subnavigation unter "link top" erscheint erst gar nicht.

Wie komme ich dort weiter, wer kann mir helfen.

Danke und Grüße lisa

navtop = function() {

if (document.all && document.getElementById) {
 navRoot = document.getElementById("wrapNav");

for (i = 0; i < navRoot.childNodes.length; i++) {
  node = navRoot.childNodes[i];

if (node.nodeName == "LI") {
   node.onmouseover = function() {

this.className+= "over";
     }
      node.onmouseout = function() {
      this.className = this.className.replace("over", "");
    }
   }
  }
 }
}
window.onload = navtop;

<div id="wrap">
<div id="navTop">

<!--1. navigation top-->
  <div id="posDiv">
    <ul id="wrapNav">
      <li><a href="#">Über Lisa</a>
        <ul>
          <li><a href="#">Vita</a></li>
          <li><a href="#">Zeugnisse</a></li>
          <li><a href="#">Praktika</a></li>
        </ul>
      </li>
    </ul>
  </div>

<!--2. navigation top-->
  <div id="posDiv">
    <ul id="wrapNav">
      <li><a href="#">link top</a>
        <ul>
          <li><a href="#">link sub</a></li>
          <li><a href="#">link sub</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

[Jörg Peschke]

Hallo,
Du hast die ID "posDiv" und "wrapNav" zweimal vergeben - das ist nicht zulässig, eine ID muss immer im ganzen Dokument eindeutig sein.
Dem Firefox ist es offenbar trotzdem egal, der IE stört sich aber daran .

Viele Grüße,
Jörg

[Struppi]

navtop = function() {

if (document.all && document.getElementById) {

hier ist der Test auf document.all überflüssig.

navRoot = document.getElementById("wrapNav");

for (i = 0; i < navRoot.childNodes.length; i++) {

globale Schleifenvariabeln, das schlimmste was du machen kannst.
Überhaupt solltest du die Variabeln immer mit var lokal machen, dann können sie sich nicht in die Quere kommen.

node = navRoot.childNodes[i];

if (node.nodeName == "LI") {

Hier würde ich mal testen ob LI überhaupt Grossgeschrieben wird oder zur Sicherheit gleich:
if (node.nodeName.toUpperCase() == "LI") {

Wobei, warum benutzt du nicht getElementsByTagName()?

node.onmouseover = function() {

this.className+= "over";
     }

Mehrere Klassen müssen mit einem Leerzeichen getrennt werden.

<div id="wrap">
<div id="navTop">

<!--1. navigation top-->
  <div id="posDiv">

Divitis?
(aber tpisch für vermutlich Wordpress Themes)

Struppi.

[lisa74]

Hallo Struppi,

navRoot = document.getElementById("wrapNav");

for (i = 0; i < navRoot.childNodes.length; i++) {

globale Schleifenvariabeln, das schlimmste was du machen kannst.

Warum, verstehe ich nicht ganz?

Überhaupt solltest du die Variabeln immer mit var lokal machen, dann können sie sich nicht in die Quere kommen.

Wie kann ich die var navRoot = "wrapNav"; oben einbauen?

Hier würde ich mal testen ob LI überhaupt Grossgeschrieben wird oder zur Sicherheit gleich:
if (node.nodeName.toUpperCase() == "LI") {

Wenn ich  LI klein schreibe geht nichts mehr!

Wobei, warum benutzt du nicht getElementsByTagName()?

ich glaube ich bin jetzt völlig verwirrt.

kannst du mit nicht bitte mal ein beispiel in bezug auf mein script posten?

das währe echt nett.

habe es soweit verändert wie ich es verstanden habe.
var navRoot = "wrapNav";

navtop = function() {

if (document.getElementById) {
 navRoot = document.getElementById("wrapNav");

for (i = 0; i < navRoot.childNodes.length; i++) {
  node = navRoot.childNodes[i];

if (node.nodeName.toUpperCase() == "LI") {
   node.onmouseover = function() {

this.className+= " over";
     }
      node.onmouseout = function() {
      this.className = this.className.replace(" over", "");
    }
   }
  }
 }
}
window.onload = navtop;

[Struppi]

navRoot = document.getElementById("wrapNav");

for (i = 0; i < navRoot.childNodes.length; i++) {

globale Schleifenvariabeln, das schlimmste was du machen kannst.

Warum, verstehe ich nicht ganz?

Was passiert, wenn du z.b. inerhablb der schleife eine funktion aufrufst, die ebenfalls eine Scheleife enthält?

Überhaupt solltest du die Variabeln immer mit var lokal machen, dann können sie sich nicht in die Quere kommen.

Wie kann ich die var navRoot = "wrapNav"; oben einbauen?

gar nicht. Du sollst lediglich da wo du die Variabeln deklarierst var davor schreiben

Hier würde ich mal testen ob LI überhaupt Grossgeschrieben wird oder zur Sicherheit gleich:
if (node.nodeName.toUpperCase() == "LI") {
Wenn ich  LI klein schreibe geht nichts mehr!

du sollst nicht LI klein schreiben, sondern testen ob das wirklich in jedem Browser Grossgeschrieben wird (ohne toUpperCase()).

Wobei, warum benutzt du nicht getElementsByTagName()?

ich glaube ich bin jetzt völlig verwirrt.

http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

kannst du mit nicht bitte mal ein beispiel in bezug auf mein script posten?

würd ich gern, aber ich weiß nicht was das Skript machen soll, da es bei mir weder im FF noch im IE funktioniert und schon gar nicht das Verhalten zeigt, dass du beschreibst (meine Kommentare gestern hatte ich gemacht ohne das Skript zu testen)

Struppi.

[Felix Riesterer]

Liebe lisa74,

Im Fire Fox klappt alles super, nur der Internet Explorer will nicht so wie ich will.

in solchen Fällen pfeife ich auf den IE. Um ihn nicht gänzlich auszuschließen, verwende ich ein Javascript von Dean Edwards, das sich IE7 nennt. Es bügelt so einige Fehler des IE aus, und die, die es nicht ausbügelt, sind mir nun wirklich egal. Soll doch der User, der sich daran stört auf einen richtigen Browser umsteigen!

Dropdown-Menüs, die rein über CSS erstellt wurden, werden durch dieses Script übrigens in allen IEs ab 5.0 aufwärts wunderbar benutzbar!

Liebe Grüße aus Ellwangen,

Felix Riesterer.