[JS] Problem mit Aufklappmenü

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [JS] Problem mit Aufklappmenü

    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:
    PHP-Code:
    <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)
    {
        
    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 geändert von Fabsch; 29.11.2007, 16:38.

  • #2
    1. bitte code umbrechen, keiner scrollt gerne horizontal
    2. schau dir ggf. mal das tutorial an und dann ggf. das
    allerdings sollest du vorher deine layout-tabellen in die tonne kloppen, da der roll effekt damit nicht funktionieren wird.

    gruß
    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      1. code umgebrochen (stimmt, nervt wirklich)
      2. Ok, danke, werde dann mal mein Menü anpassen und dann posten, falls es jemanden irgendwann einmal interessiert.

      MfG
      Fabsch

      Kommentar

      Lädt...
      X