Einfärben bei Javascript-Navigation

DWE

DWE

Grünschnabel
Hallo miteinander,
Ich arbeite noch nicht sehr lange vertieft mit Javascript, aber hoffe mit Hilfe mehr von diesem Thema zu verstehen. Viele Dokumentationen zu dem Thema schienen mich nicht zum gewünschten Ergebnis zu bringen, also glaube ich das ich irgendwo einen Verständnisfehler mache.

Ich möchte ein einfaches Dropdown-Menü erstellen, und habe mit dem folgenden Script gearbeitet: http://javascript-array.com/scripts/simple_drop_down_menu/
Das "Sample" zeigt, wie es am Ende aussieht. Selbst versuche ich, die "Hauptnavigation" über der aktivierten Subnavigation zu verfärben:
Also wenn ich die Maus auf der geöffneten Ebene/Subnavigation bewege, soll der jeweilige Überpunkt weiterhin den Hover-effekt (Verfärbung) beibehalten anstatt seine Originalfarbe wieder anzunehmen.

Hier ist mein HTML Code: (Habe meine eigenen PHP-Ergänzungen rausgenommen)
HTML: 
<ul id="menu">
    <li id="test1"><a href="home/" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="home/news1/">News1</a>
            <a href="home/news2/">News2</a>
            <a href="home/news3/">News3</a>
        </div>
    </li>
    <li id="test2"><a href="lorem-ipsum/subnav1/" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Lorem Ipsum</a>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="lorem-ipsum/subnav1/">Subnav1</a>
            <a href="lorem-ipsum/subnav2/">Subnav2</a>
        </div>
    </li>
    <li id="test3"><a class="test3" href="auditore/subnav1/" 
        onmouseover="mopen('m3')" 
        onmouseout="mclosetime()">Auditore</a>
        <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="auditore/subnav1/">Subnav1</a>
            <a href="auditore/subnav2/">Subnav2</a>
            <a href="auditore/subnav3/">Subnav3</a>
        </div>
    </li>
    <li id="test4"><a class="test4" href="kontakt/formular/" 
        onmouseover="mopen('m4')" 
        onmouseout="mclosetime()">Kontakt</a>
        <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
            <a href="kontakt/formular/">Formular</a>
            <a href="kontakt/adresse/">Adresse</a>
        </div>
    </li>
</ul>
<div style="clear:both"></div>

und hier das Javascript: (mit NEUNEU kommentierten Zeilen sind von mir selbst eingefügt worden)
HTML: 
// Copyright 2006-2007 javascript-array.com

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;
var test1 = document.getElementById("test1"); <!-- NEUNEU

// Versteckte Ebene anzeigen
function mopen(id)
{	
	// Timer zum Schliessen der Ebene abbrechen
	mcancelclosetime();

	// alte Ebene schliessen
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// neue Ebene anzeigen
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
	
	test1.style.setAttribute("backgroundColor", "red", false); <!-- NEUNEU
}
// Angezeigte Ebene schliessen
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// Timer zum Schliessen starten
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// Timer zum Schliessen der Ebene abbrechen
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// Ebene beim "Rausklicken" abbrechen
document.onclick = mclose;

Als Test versuche ich, den ersten Menüpunkt rot (dessen Hintergrundfarbe) anzuzeigen, sobald seine Subnavigation aufgeklappt wird (in meinem Fall "Home", für den Anfang).
Die Fehlerkonsole von Firebug (das Code-Analyse Plugin für Firefox) meint, wenn ich mit der Maus auf "Home" bin:
HTML: 
test1 is null
- test1.style.setAttribute("backgroundColor", "red", false); <!-- NEUNEU

Aber test1 ist doch eigentlich vorhanden? Habe ich irgendwo etwas falsch gemacht, sodass das Script die ID (bzw. dessen Inhalt) nicht als solchen erkennt?

Vielen Dank im Voraus für jegliche Hilfe! :)
 
Anstatt dir jetzt bei deinem konkreten JavaScript Problem zu helfen, will ich dir was anderes dazu sagen.

-Ein solches Menü geht auch ohne JavaScript
-Das verwendete Markup ist weder valide noch semantisch korrekt

http://www.cssplay.co.uk/menus/basic-dropdown.html






Dein Problem könnte daran liegen, dass du den JavaScript Code vor dem Menü eingebunden hast. Zum Zeitpunkt, wo das Skript ausgeführt wird, existiert "test1" noch nicht.
 
  • Gefällt mir
Reaktionen: DWE
Vielen Dank für die Antwort!

Ja, dieses Menü ist wirklich besser im CSS zu lösen, und das werde ich jetzt auch tun (danke nochmal deswegen) allerdings würde ich trotzdem gerne wissen, wieso die Variable so nicht funktioniert um es im Zukunft zu vermeiden.
Meinst du das Markup des Vorlage-Skriptes oder mein eigenes?

Das Skript wird wirklich vor dem Menü aufgerufen, allerdings funktionierte es als Menü. Wenn ich es dennoch danach einbinde, bekomme ich folgende Meldung bei Aktivierung des Hauptmenüpunktes:
HTML: 
test1.style.setAttribute is not a function
- test1.style.setAttribute("backgroundColor", "red", false); <!-- NEUNEU
 
"style" hat keine Methode "setAttribute", weil style selbst ist doch das Attribut!

Javascript: 
test1.style.backgroundColor = 'red';


//oder (NICHT sinnvoll!)

test1.setAttribute('style', 'background-color:red;');
 
  • Gefällt mir
Reaktionen: DWE
Habe ich wohl eine veraltete/falsche Dokumentation gelesen... Grosses Dankeschön für den Hinweis!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück