Animierte Navigation

[wh!te]

Hallo,

ich habe mir überlegt, für eine Neue Seite eine animierte Animation zu machen, das soll im endeffekt so aussehen, dass man wenn man über einen Button der Navigation fährt, dieser dann nach oben fährt und noch ein kurzer Text zu sehen ist. Der Ansatz funktioniert schonmal:

Erster Ansatz

Das mit dem "hochfahren" funktioniert auch. Jetzt habe ich, wie man im Quelltext sehen kann, den Wert für "top" immer um eins reduziert und den Wert für "height" um eins erhöht. Die Änderung von "height" wird aber laut Firefox Konsole nicht durchgeführt.

Eine weitere Frage ist, wie ich jetzt die Klasse des Elements in der Funktioon ändern kann. Ich hab es mit className versucht aber da passierte dann garnichts mehr (keine Bewegung).Soll wie bei einem Hover-Effekt eine andere Hintergrundgrafik bekommen und der kurze Text soll sichtbar werden.

Dadurch, dass ich mir das alles selbst aus verschiedensten Quellen zusammengesucht und mehr oder weniger selbst geshcrieben habe, kann es natürlich auch sein, dass das alles vollkommener Unsinn ist, was ich da geshcrieben habe :(

Wäre nett, wenn sich jemand darauf melden könnte :)

Wer sich den JS-code angucken möchte, hier die wichtigen auszüge:

  
<script type="text/javascript" language="javascript">  
	//höhe des Navi-Elements  
        var height = 20;  
  
        //css-wert für "top"  
	var position = 47;  
  
        //ist es bereits ausgeklappt?  
	var ausgeklappt = 0;  
  
	var aktion = "vermietung";  
	var aktioni = "vermietung";  
	var warte;  
	var repeat;  
  
        //wird ein anderer Button grade "hochgefahren"?  
	var lade = 0;  
	  
	  
	function navi_ausklappen(navielement) {  
                //wenn bereits ein element ausgeklappt ist, das ausgeklappte einklappen und danach das neue aufmachen  
		if(ausgeklappt == 1) {  
			navi_einklappen(aktion);  
			aktioni = navielement;  
			setTimeout("navi_ausklappen(aktioni)", 10)  
		}  
  
                //wenn sich gerade ein anderes Öffnet den Vorgang abbrechen und danach neues öffnen  
		else if(navielement != aktion || navielement != aktioni) {  
			navi_einklappen(aktion);  
			aktioni = navielement;  
			setTimeout("navi_ausklappen(aktioni)", 10)  
		}  
  
                /wenn nichts anderes hochgefahren ist, das gewählte hochfahren  
		else {  
		lade = 1;  
		clearTimeout(warte);  
		height += 1;  
		position -= 1;  
		aktion = navielement;  
  
                //das wird ignoriert  
		document.getElementById(navielement).style.height = height + "px";  
		document.getElementById(navielement).style.top = position + "px";  
		if(height == 70) {  
			clearTimeout(warte);  
			ausgeklappt = 1;  
			lade = 0;  
		}  
		else {  
		warte = setTimeout("navi_ausklappen(aktion)", 10);  
		}  
	}  
	}  
	  
	function navi_einklappen(navielement) {  
		clearTimeout(warte);  
		if(height != 20) {  
		height -= 1;  
		position += 1;  
		aktion = navielement;  
		document.getElementById(navielement).style.height = height + "px";  
		document.getElementById(navielement).style.top = position + "px";  
		aktion = navielement;  
		}  
		if(height == 26) {  
			clearTimeout(warte);  
			ausgeklappt = 0;  
			aktion = aktioni;  
		}  
		else {  
		warte = setTimeout("navi_einklappen(aktion)", 10);  
		}  
	}  
</script>