Dropdown-Navigation - onmouseout

[Jonathan Schlegel]

Hallo zusammen

Ich weiss, es gibt bereits dutzende funktionierende Dropdown-Navigationen. Jede einzelne ist bestimmt toller als meine - doch ich wollte es selbst versuchen, und eine von Grund auf selbst implementieren ;)

Also, Ihr findet das Ding unter http://www.opeth.ch/nav/
Bei mouseover über ein Menu soll das Submenu aufpoppen, und beim mouseout wieder verschwinden.

Erklärung:
Beim mouseover auf navmain1 wird navsub1 sichtbar gemacht (display: block), bei mouseout wieder unsichtbar (display: none). Auf dem Screenshot versuche ich das ganze grafisch zu erklären.

Es funktioniert soweit wie es soll - jedenfalls mit Firefox, IE, Opera.

Mit Mozilla/Camino/Netscape verschwindet jedoch das Menu immer bereits, wenn die Maus etwa zur Hälfte aus dem obersten Menu bewegt wird.

Könnt Ihr euch das Verhalten von Mozilla erklären? Vielleicht ist es ja auch berechtigt, und ich liege falsch..

Danke für eure Tipps
Gruss
Jonathan

[Felix Riesterer]

Lieber Jonathan,

Mit Mozilla/Camino/Netscape verschwindet jedoch das Menu immer bereits, wenn die Maus etwa zur Hälfte aus dem obersten Menu bewegt wird.

das könnte daran liegen, dass Du Dich auf Javascript verlässt, was in diesen Browsern wohl in seiner Implementierung leicht anders ist, als in den "funktionierenden" Browsern.

Warum löst Du das Ganze nicht mit reinem CSS? Da der IE das Hovern nicht bei jedem Element kann, würdest Du am besten nur hier mit Javascript hantieren...

In einem Posting von Jeena wurde ich auf eine JScript-Bibliothek namens IE7 aufmerksam, die beim IE ab Version 5 aufwärts sehr bequem diese Fähigkeiten "nachrüstet" (auch wenn bei mir die Background-Image-PNGs noch nicht wie beabsichtigt angezeigt werden).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jonathan Schlegel]

Hallo Felix

Danke für deine Antwort.

Warum löst Du das Ganze nicht mit reinem CSS?

Tja ganz einfach, ich wusste nicht wie :)
Ich hatte aber nun die Idee, dass ich ja einfach bei hover auf div.navmain dessen Unterelement div.navsub sichtbar machen kann.
    div.navmain:hover div.navsub { display: block; }
Keine Ahnung, wieso ich da vorhin nicht darauf gekommen bin. Somit bräuchte ich diese Nummern auch nicht mehr.
Aber ich vermute mal, das geht nun eben mit IE nicht (Ich habe gerade keinen hier).

Ich werd mir das morgen nochmals anschauen, danke auch für den Link (auf sowas möchte ich aber eher verzichten, wenn möglich).

Neues Beispiel übrigens unter http://www.opeth.ch/nav2

[Felix Riesterer]

Lieber Jonathan,

danke auch für den Link (auf sowas möchte ich aber eher verzichten, wenn möglich).

ich denke, ein solcher Würgaround ist für den IE sinnvoller, als diese CSS-Hacks, bzw. viele verscheidene Javascripts, die ineinandergreifen sollen. Wer den IE verwendet handelt entweder grob fahrlässig, oder hat keine andere Wahl. In beiden Fällen müssen sich die Besucher meiner Seite dann eben diese Lösung gefallen lassen. Und wer mit einem nicht-IE-Browser daherkommt, merkt von alledem nichts.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jonathan Schlegel]

Hallo Felix

Wer den IE verwendet handelt entweder grob fahrlässig, oder hat keine andere Wahl. In beiden Fällen müssen sich die Besucher meiner Seite dann eben diese Lösung gefallen lassen. Und wer mit einem nicht-IE-Browser daherkommt, merkt von alledem nichts.

Stimmt auch wieder. Und IE-Benutzer, die JavaScript deaktiviert haben, wird man wohl auch nicht viele finden. (Wer klug genug ist, JS zu deaktivieren, benutzt keinen IE :D)
Ich werde mir also diese Library mal genauer anschauen.

Gruss
Jonathan

[Jonathan Schlegel]

Ich habe nun dieses IE7 ausprobiert und in die Seite eingefügt. So funktioniert die Navigation (http://www.opeth.ch/nav2) sogar mit IE.

[Felix Riesterer]

Liebe(r) Jonathan,

So funktioniert die Navigation (http://www.opeth.ch/nav2) sogar mit IE.

mein IE 5.0 streikt mit einer Fehlermeldung...

In Deinem Quelltext sehe ich folgendes:

  
        <!-- compliance patch for microsoft browsers -->  
        <!-- http://dean.edwards.name/IE7 -->  
        <!--[if lt IE 7]><script type="text/javascript" src="ie7-core.js"></script><![endif]-->  
        <!--[if lt IE 7]><script type="text/javascript" src="ie7-css2-selectors.js"></script><![endif]-->

Warum referenzierst Du nicht die Datei "ie7/ie7-standard-p.js", so wie in der Anleitung beschrieben?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jonathan Schlegel]

Hallo Felix

(Ich bin übrigens männlich)

Warum referenzierst Du nicht die Datei "ie7/ie7-standard-p.js", so wie in der Anleitung beschrieben?

Naja, in der Anleitung steht auch, man könne nur diese Files benutzen, die man braucht. Oder habe ich das falsch verstanden...

Gruss
Jonathan

[Felix Riesterer]

Lieber Jonathan,

(Ich bin übrigens männlich)

*LOL* sorry, habe vergessen die Klammern zu entfernen (default-Einstellung)

Naja, in der Anleitung steht auch, man könne nur diese Files benutzen, die man braucht. Oder habe ich das falsch verstanden...

Schon klar, aber warum auf den Rest verzichten? Da wird gleich noch der PNG-Transparenz-Fix und andere IE-typische Mängel in Angriff genommen (auch wenn bei mir Background-PNGs noch immer falsch dargestellt werden).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Jonathan Schlegel]

Hallo Felix

Schon klar, aber warum auf den Rest verzichten? Da wird gleich noch der PNG-Transparenz-Fix und andere IE-typische Mängel in Angriff genommen (auch wenn bei mir Background-PNGs noch immer falsch dargestellt werden).

Naja, wozu diese Files laden, wenn ich diese Dinge auf der Seite gar nicht benutze...

Gruss
Jonathan

[peter]

Hi Jonathan,

Ich weiss, es gibt bereits dutzende funktionierende Dropdown-Navigationen. Jede einzelne ist bestimmt toller als meine - doch ich wollte es selbst versuchen, und eine von Grund auf selbst implementieren ;)

Dann gehts dir wohl darum, etwas über Javascript zu lernen und die gutgemeinten CSS-Ratschläge helfen dir auch nicht wirklich weiter !

Erklärung:
Beim mouseover auf navmain1 wird navsub1 sichtbar gemacht (display: block), bei mouseout wieder unsichtbar (display: none). Auf dem Screenshot versuche ich das ganze grafisch zu erklären.

Es funktioniert soweit wie es soll - jedenfalls mit Firefox, IE, Opera.

... oder auch nicht ! Jedenfalls funktionierts nicht so wie du denkst und wie es deiner Meinung nach funktionieren soll.
Die toggle-Funktion wird nämlich wesentlich häufiger aufgerufen als gedacht und gewünscht.

Liegt am sogenannten Event-Bubbling.
Events, die auf einem Objekt ausgelöst werden, werden auch an das Objekt weitergegeben, das sich in der Hierarchie oberhalb befindet.
An dem div, auf dem du deine Eventhandler notiert hast, kommen also laufend Events an, die auf den Objekten ausgelöst werden, die sich innerhalb dieses divs befinden.

Deine Funktion wird also dauernd aufgerufen, daß es in den obengenannten Browsern ohne Ruckeln funktioniert ist also eher verwunderlich.

Anbei mal deine Funktion mit ner kleinen Erweiterung, damit du sehen kannst, wie oft die Funktion aufgerufen wird.
Tausch einfach mal dein Script in der nav.js dagegen aus:

***********************************************************

var i=0;
var zaehler=false;

function toggleNav(pNumber) {

if(!zaehler)
{
var z=document.createTextNode('0'); //erzeugt einen Textknoten mit Wert '0'
zaehler=document.body.appendChild(z); //fügt diesen Textknoten ins Dokument(body) ein
}

i++; //zählt bei jedem Funktionsaufruf i um eins hoch

zaehler.nodeValue=String(i);  //schreibt den neuen Wert von i in den erzeugten Textknoten

var subElement = document.getElementById('navsub'+pNumber);
    subElement.style.display = (subElement.style.display=="block") ? "none" : "block";
}

***********************************************************

Könnt Ihr euch das Verhalten von Mozilla erklären? Vielleicht ist es ja auch berechtigt, und ich liege falsch..

Ja, und ich hoffe ich kann dich auf den richtigen Weg bringen.
Heute isses mir für mehr schon etwas zu spät.
Aber schau dir mal an, wie oft deine Funktion aufgerufen wird, denk mal drüber nach und schreib auch ruhig wieder, dann sehn wir weiter.

gruß
peter

[Jonathan Schlegel]

Hallo Peter

Dann gehts dir wohl darum, etwas über Javascript zu lernen und die gutgemeinten CSS-Ratschläge helfen dir auch nicht wirklich weiter !

Nein, ich wollte eine Dropdown-Navigation erstellen, und für mich kamen hierfür CSS und JavaScript in Frage, was aber nicht optimal sein muss.

... oder auch nicht ! Jedenfalls funktionierts nicht so wie du denkst und wie es deiner Meinung nach funktionieren soll.
Die toggle-Funktion wird nämlich wesentlich häufiger aufgerufen als gedacht und gewünscht.

Okay, dass das mouseover/-out auch auf Unterelemente angewendet wird, wusste ich nicht. Kann ich wohl irgendwie rausfinden, wie das Element heisst, durch das die Funktion ausgeführt wird (also z.B. bei onmouseover auf navmain1 -> navmain1 rausfinden)? Dann könnte ich in der toggleNav Funktion dies überprüfen, und die Funktion nur dann ausführen.

Danke schonmal für deine Hilfe. Aber wieso sich Mozilla so verhält, verstehe ich leider trotzdem nicht..

Gruss
Jonathan

[peter]

Hi,

Kann ich wohl irgendwie rausfinden, wie das Element heisst, durch das die Funktion ausgeführt wird (also z.B. bei onmouseover auf navmain1 -> navmain1 rausfinden)?

Im IE wird das Event in einer globalen Variablen gespeichert und man hat über " window.event " Zugriff drauf.
Das Element, auf dems ausgelöst wurde bekommt man über " window.event.srcElement ".

In den anderen Browsern hat man Zugriff auf das Event, indem mans der Funktion als Übergabeparameter mit übergibt, auf das auslösende Elewment dann per " target ":

onmouseover="F(event);"

function F(e)
{
alert(e.target);
}

Die Funktion für beide Browser:

function F(e)
{
 if(!e)
   {alert(window.event.srcElement);}
 else
   {alert(e.target);}
}

Warum Mozilla das so macht, weiß ich auch nicht.
Der bringt da irgend was ziemlich durcheinander.
Setz mal im CSS div.navsub{display:block;} und schau dir im Mozilla die ganze Sache mal DOM-Inspektor an.
Da sitzen bei mir alle div und a total verschoben.

gruß
peter