Klappmenü beim ersten Laden aufgeklappt

[Kristin]

Hallo zusammen,

ich habe ein Klappmenü mit CSS und HTML erstellt, wie es auch in selfHTML nachzulesen ist. Mit <li> und <ul> Listen und den Zeilen:

/* Erweiterung zur dynamischen Ein-/Ausblendung */
                    ul#menu li>ul {
                     display: none; top: 1.6em;
                    }

ul#menu li:hover>ul, ul#menu li>a#aktuell+ul {
                    display: block;}

in der CSS-Datei. Das funktioniert auch klasse in Mozilla und Co.
Aber wer spielt wieder die Extra-Wurst? Der IE.
Für den Internet Explorer habe ich also ein Javascript eingebunden.

Dies sieht so aus:

<!--[if IE]>
<script type="text/javascript">

var menu = document.getElementById("menu").getElementsByTagName("ul");
  for (i=0;i<menu.length;i++) {
    menu[i].setAttribute("id","menu"+i)
    if (menu[i].parentNode.nodeName == "LI") {
      menu[i].parentNode.onmouseover = function () {
        this.lastChild.style.display = "block";
      }
      menu[i].parentNode.onmouseout = function () {
        this.lastChild.style.display = "none";
      }
    }
  }
</script>
<![endif]-->

Lädt man nun die HTML-Seite neu (z.B. klickt im Menü die Rubriken durch), so ist das Klappmenü jedes Mal komplett aufgeklappt.
Erst wenn man mit der Maus drüber fährt und alle Rubriken wieder zu sind, kann man die Rubriken einzeln, wie gewünscht öffnen.

Das Problem taucht jeweils nur beim Neuladen der Seite auf.
Das sieht jedoch unschön aus. Es soll sich erst aufklappen, wenn ich mit der Maus über meine gewünschte Rubrik fahre.

Ich würde mich sehr freuen, wenn jemand mir einen Rat geben könnte oder sogar auf anhieb den Fehler erkennt.

Liebe Grüße
Kristin

[wahsaga]

hi,

menu[i].parentNode.onmouseout = function () {
        this.lastChild.style.display = "none";
      }

An dieser Stelle werden die Menüpunkte mit den Eventhandlern zum Zuklappen versehen.

Wenn du sofort danach einfach diese Funktion (je) einmal aufrufst, sollten die Menüpunkte zugeklappt werden:

menu[i].parentNode.onmouseout = function () {
       this.lastChild.style.display = "none";
     }
     menu[i].parentNode.onmouseout;

gruß,
wahsaga

[Kristin]

Erstmal vielen dank für Deinen Tipp, jedoch "klappts" noch nicht ganz.

Das Java Script sieht nach deinen Veränderungen also dann so aus?

<!--[if IE]>
<script type="text/javascript">

var menu = document.getElementById("menu").getElementsByTagName("ul");
  for (i=0;i<menu.length;i++) {
    menu[i].setAttribute("id","menu"+i)
    if (menu[i].parentNode.nodeName == "LI") {
      menu[i].parentNode.onmouseover = function () {
        this.lastChild.style.display = "block";
      }
      menu[i].parentNode.onmouseout = function () {
        this.lastChild.style.display = "none";
        menu[i].parentNode.onmouseout = function () {
       this.lastChild.style.display = "none";
     }
     menu[i].parentNode.onmouseout;
      }
    }
  }
</script>
<![endif]-->

Aber irgendwas kann da nicht stimmen, weil es nicht den gewünschten Effekt hat & mein Problem nicht löst.

Grüße Kristin

[wahsaga]

hi,

Das Java Script sieht nach deinen Veränderungen also dann so aus?

Nein, so:

<!--[if IE]>
<script type="text/javascript">

var menu = document.getElementById("menu").getElementsByTagName("ul");
  for (i=0;i<menu.length;i++) {
    menu[i].setAttribute("id","menu"+i)
    if (menu[i].parentNode.nodeName == "LI") {
      menu[i].parentNode.onmouseover = function () {
        this.lastChild.style.display = "block";
      }
      menu[i].parentNode.onmouseout = function () {
        this.lastChild.style.display = "none";
      }
      menu[i].parentNode.onmouseout;
    }
  }
</script>
<![endif]-->

Aber irgendwas kann da nicht stimmen, weil es nicht den gewünschten Effekt hat & mein Problem nicht löst.

Tja, dann wäre wohl ein wenig Debugging angesagt - kommen Fehlermeldungen, wenn ja welche, etc.

Ggf. auch man die Conditional Comments entfernen, und mit dem Firefox testen - und dort in die JS-Konsole schauen.

gruß,
wahsaga

[Ingo Turski]

Hi,

Du hast eigentlich den falschen Themenbereich gewählt - ich ändere ihn daher mal.

ul#menu li>ul {
                     display: none; top: 1.6em;
                    }

hier werden die Untermenüs in "normalen" Browsern ausgeblendet. Wenn auch der IE das machen soll, dann mache ihm das einfach einfacher:

ul#menu li ul { display: none; top: 1.6em; }

Warum erst kurz anzeigen lassen und dann umständlich über Javascript wieder ausblenden?
Im SELFHTML-Beispiel wird es genauso gemacht - warum weichst Du davon überhaupt ab und wunderst Dich dann?

freundliche Grüße
Ingo

[Kristin]

Danke für Deine Mühe wahsaga, doch so gehts auch nicht.
In der JavaConsole finden sich diesbezüglich auch keine Fehler.

Vielen Dank auch dir Ingo für deinen Hinweis, versteh auch warum ich eig. im flaschen Thmenbereich bin.

Die Zeile die Du mir gegeben hast funktioniert.
Das ist klasse, doch versteh ich nicht warum das für den IE einfacher ist. So schwer kann ein ">"-Zeichen doch nicht sein ;)

Liebe Grüße
Kristin