[JS] Problem mit Aufklappmenü

Fabsch

Erfahrenes Mitglied
Hallo,

ich habe mal wieder ein Problem, und zwar:
Ich habe schon vor längerer Zeit ein simples "Aufklappmenü" für meine Seite gemacht. Das ging alles ohne Probleme.
Heute wollte ich einen Roll Effekt hinzufügen, aber ich weiß nicht genau wie ich das jetzt weiter machen soll..
So weit bin ich bis jetzt:
HTML:
<script type="text/javascript">
<!--
/**********Variablen**********/
//Variable für die Zeit nach der der nächste Schritt gemacht werden soll
var interval = (1/20);

//Variable für die Zeit, die der Effekt dauern soll
var duration =  500;

//Variable für das aktuelle Element
var element = "";
var next_height = 0;
var end_height = 0;
var start_height = 0;
/**********Variablen**********/


function enlarge()
{
	//Funktion zum Vergrößern des Elements nach unten
	
	//Prüfen, ob nicht schon zu Ende gerollt
	if ( start_height <= end_height )
	{
		document.getElementById(element).style.height = start_height+"px";
		
                        //hier kommt eine viel zu hohe Zahl raus, ich weiß nicht, wie man das rechnen soll ?!
		var next_height = start_height + (duration/interval);
		if ( next_height > end_height )
		{
			next_height = end_height;
		}
		document.getElementById(element).style.height = next_height+"px";
		
		if ( next_height != end_height )
		{
			start_height = next_height;
			next_height = 0;
			setTimeout("enlarge()", interval);
		}
	}
	
}


function show(divid)
{
	d = document;
	if ( d.getElementById(divid).style.display == "none" )
	{
		element = divid;
		start_height = 1;
		end_height = d.getElementById(divid).style.height;
		//einblenden

		d.getElementById(divid).style.display="none";
		d.getElementById(divid).style.display="inline";
		enlarge();
		//alert(d.getElementById(divid).style.height);
	}
	else
	{
		//ausblenden
		d.getElementById(divid).style.display="none";
	}
}
//-->
</script>
<center>
<table border="0" cellpadding="1" cellspacing="1" id="menutop" align="center">
    <tr>
        <td align="center" >
            <!--Home-->
            <table>
                <tr>
                    <td align="center">
                        <a href="http://www.domain.de/index.php" target="_parent">Home</a></td>
                </tr>
                <tr>
                    <td>
                        <table id="menuhome" style="background-color: Black; display:none; z-index:2; position: absolute;">
                            <tr>
                                <td>
                                    &nbsp;</td>
                            </tr>
                        </table>
                        &nbsp;</td>
                </tr>
            </table>
            <!--/Home--></td>
        <td align="center" >
            <!--News-->
            <table onMouseOver="show('menunews');" onMouseOut="show('menunews');">
                <tr>
                    <td align="center">
                        <a href="http://www.domain.de/News/News.php" target="_parent">News</a></td>
                </tr>
                <tr>
                    <td>
                        <table id="menunews" style="height: 50px; height:50px; background-color: Black; display:none; z-index:2; position: absolute;">
                            <tr>
                                <td align="center">
                                    <a href="http://www.domain.de/News/News.php">News</a></td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <a href="http://www.domain.de/News/NewsArchiv.php">Newsarchiv</a></td>
                            </tr>
                        </table>
                        &nbsp;</td>
                </tr>
            </table>
            <!--/News--></td></tr></table></center>
(das geht zwar noch weiter, aber es wäre zu lang gewesen, es würde wieder das gleiche mit anderen Menüpunkten kommen)

Die Höhe, um die bei jedem Mal erhöht wird, weiß ich auch nicht, wie man die ausrechnen soll.

Ich hoffe, ihr seht, was mein Problem ist und dass ihr mir helfen könnt/wollt ;)

MfG
Fabsch
 
Zuletzt bearbeitet:
Hallo,

aber diese werden doch vor der Benutzung mit anderen Werten gefüllt:
Hier:
//hier kommt eine viel zu hohe Zahl raus, ich weiß nicht, wie man das rechnen soll ?!
var next_height = start_height + (duration/interval);
// ^ hier wird diese Variable vor Benutzung mit einem anderen Wert gefüllt, bei dem ich nicht weiß, wie man diesen ausrechnen soll
Hier:
//hier wird dann den Variablen noch einmal für den nächsten Aufruf der Funktion der neue Wert zugewiesen
start_height = next_height;
next_height = 0;
setTimeout("enlarge()", interval);
Und hier:
// und hier dann die Variablen, die beim ersten Funktionsaufruf benötigt werden, bei der Benutzung der Variablen ist diese also nicht null
start_height = 1;
end_height = d.getElementById(divid).style.height;
ich habe nicht nochmal alles geschrieben, weil das zu lange gewesen wäre und mit HTML hätte ich keine rote Schrift nehmen können

Und ich habe es trotzdem einfach mal probiert: es geht nicht :(

Aber trotzdem danke für deine Antwort :)

MfG
Fabsch
 
Zurück