nicht angemeldet
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