KeYara: Javascript - Slide-Menu - Problem

Beitrag lesen

SELF-Forum

Javascript - Slide-Menu - Problem

KeYara
– Informationen zu den Bewertungsregeln

Guten Abend Leute,

ich hab mir vor einiger Zeit mal ein simples Slide-Menu gebastelt, welches soweit auch recht gut funktioniert. Man drückt
halt auf einen Button und das Submenu slided runter. Es is recht einfach gehalten und funktioniert sowohl im FF 3.5 als
auch im IE 8 und IE 5 (Phase 5.6). Mehr Browser habe ich derzeit nicht zum Testen.

Nun gibts da noch ein Problem! Wenn ich also nochmal auf den Button drücke, fährt das Submenu um den Speedwert weiter.
Und das möchte ich unterbinden. Die Funktion soll nach dem Erreichen des Zielpunktes nicht mehr ausgeführt werden.

Ein möglicher Lösungsweg wäre die erneute Positionsbestimmung des Submenus um and dem punkt die Funktion zu beenden.
Die Positionsabfrage funktioniert auch soweit, nur seh ich imo den wald vor lauter Bäumen nicht.

Wie müsste ich jetzt weiter vorgehen, damit das Submenu nicht mehr weiter fährt wenn man nochmal den Button drückt?

Ich hoffe dass ich mich einigermaßen verständlich ausdrücken konnte und würde mich über einen Denkanstoß sehr freuen.

Gruß KeYara

Hier nochmal der Quelltext und ein Link zum Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Slide - Test</title>  
<script language="JavaScript" type="text/javascript">

var PosA = 0; // Start-Position  
var PosB = 120; // Ziel-Position  
function slide(identifier){  
         var sliden = document.getElementById(identifier);  
         var stop = document.getElementById('menu');  
             PosA += 2; // Speed-Wert  
                       sliden.style.top = PosA + "px";  
                                if(PosA < PosB) {  
                                     setTimeout ("slide('"+identifier+"')", 1);  
                                }if(stop.offsetTop==0) {  
                                         alert(stop.offsetTop);  
                                }  
}

</script>  
<style type="text/css">

#menu {  
      position:absolute;  
      margin-left:0px;  
      margin-top:-120px;  
      height:120px;  
      width:100px;  
      background-color:red;  
      z-index:5;  
      list-style:none;  
      float:left;  
      padding:0;  
      }  
#navi {  
      width:100px;  
      height:120px;  
      background-color:green;  
      position:absolute;  
      left:120px;  
      top:120px;  
      padding:0;  
      overflow:hidden;  
      }

</style>  
</head>  
<body>  
<p onclick="slide('menu');">Menu</p>  
<div id="navi">  
<ul id="menu">  
    <li class="links">Link 1</li>  
    <li class="links">Link 2</li>  
    <li class="links">Link 3</li>  
    <li class="links">Link 4</li>  
    <li class="links">Link 5</li>  
    <li class="links">Link 6</li>  
</ul>  
</div>  
</body>  
</html>

Hier mal das Beispiel: Slide-Menü

Beitrag melden
–
Informationen zu den Bewertungsregeln