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>  

[Beat]

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.

womöglich berechtigt der display-typ nicht zu einer height Eigenschaft.

mfg Beat

[wh!te]

womöglich berechtigt der display-typ nicht zu einer height Eigenschaft.

Ok, ich bin relativer JS Neuling und habe mir das ganze wie gesagt fast komplett selbst ausgedacht. Ich weiß ehrlich gesagt nicht genau, was das jetzt bedeutet mit dem display-typ. Was müsste ich da einstellen?

Ich habe auch noch eine andere Version der Seite, wo der Effekt der erwünscht ist besser zu sehen ist. Da ist allerdings das Problem, dass die Elemente nicht hinter dem Content "veschwinden" sondern über ihm sind, was nicht schön aussieht :P Hab schon danach gesucht, aber nur z-index gefunden, was keinen Effekt hat.

Wäre nett, wenn mir noch jemand helfen könnte :)

[Beat]

Ich habe auch noch eine andere Version der Seite, wo der Effekt der erwünscht ist besser zu sehen ist. Da ist allerdings das Problem, dass die Elemente nicht hinter dem Content "veschwinden" sondern über ihm sind, was nicht schön aussieht :P Hab schon danach gesucht, aber nur z-index gefunden, was keinen Effekt hat.

z-index hat nur bei nicht statisch positionierten Elementen einen Effekt.

Vergiss das mit dem display-typ... ist für mich jetzt nicht mehr nachvollziehbar ;)

mfg Beat

[wh!te]

z-index hat nur bei nicht statisch positionierten Elementen einen Effekt.

Vergiss das mit dem display-typ... ist für mich jetzt nicht mehr nachvollziehbar ;)

mfg Beat

Dass es nicht funktioniert musste ich ja auch leider schon festetellen, hab auch die navielement mit "absolute" als position positioniert, aber auch kein Effekt. Könnte mir bitte jemand einen Tipp geben, was ich TUN muss? Was nicht funktioniert weiß ich ja schon :P Wäre echt nett :)

[wh!te]

Also ich hab grad zufällig ein Beispiel dafür gefunden wie das aussehen sollte:
Telekom

Auf der Seite einfach bei irgendeinem Paket auf "bestellen" klicken. Auf der dann kommenden Seite in dem schwarzen Kasten oben auf der Seite auf "Zubuchoptionen" (im Kasten unten links) klicken. Dann fährt sich ein weiterer Bereich aus. So sollte das bei mir auch aussehen ;)

Wäre nett, wenn mir jemand mal irgendwas dazu sagen könnte :(