nicht angemeldet
Javascript - Slide-Menu - Problem
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ü
-
Hi,
ich würde einfach den Teil in Zeile 7, also
sliden.style.top = PosA + "px";
mit in die erste if-Abfrage reinschreiben und diese dann noch zu '<=' umändern anstelle von '<'.
Also so:if(PosA <= PosB) { sliden.style.top = PosA + "px"; setTimeout ("slide('"+identifier+"')", 1); }1»» ~~~javascript var PosA = 0; // Start-Position
2»» var PosB = 120; // Ziel-Position
3»» function slide(identifier){
4»» var sliden = document.getElementById(identifier);
5»» var stop = document.getElementById('menu');
6»» PosA += 2; // Speed-Wert
7»» sliden.style.top = PosA + "px";
8»» if(PosA < PosB) {
9»» setTimeout ("slide('"+identifier+"')", 1);
10»» }if(stop.offsetTop==0) {
11»» alert(stop.offsetTop);
12»» }
13»» }Das sollte es eigentlich tun. mfg \_Philipp\_-
Hi,
ich würde einfach den Teil in Zeile 7, also
sliden.style.top = PosA + "px";
mit in die erste if-Abfrage reinschreiben und diese dann noch zu '<=' umändern anstelle von '<'.
Also so:if(PosA <= PosB) {
sliden.style.top = PosA + "px";
setTimeout ("slide('"+identifier+"')", 1);
}Hi \_Philipp\_, einen großen DANK für den Hinweis. Manchmal sieht man echt die Bäume vor lauter Wald net mehr. Nun funktionierts endlich so wie es sein soll und is trotzdem noch einfach gehalten. Gruß KeYara
-
-
In der Funktion slide änderst du die Position bevor du sie überprüfst. Das ist wahrscheinlich der ganze Witz an der Sache.