nicht angemeldet
Judn Morgen Leude,
ick hab mal wieder ein problem mit nem Slide-Menu. Das Slide-Menu besteht aus 3 simplen Funktionen: Die Down- bzw Up-Funktionen
und einer If-Abfrage als 3. Funktion in der die beiden Slide-Funktionen je nach Situation zur Anwendung kommen sollen. Es funktioniert
zwar soweit, es slidet runter und wieder rauf wenn man den button drückt, aber halt nur 1-mal! Ist in dem Script doch noch iwo ein
Fehler oder fehlt evtl. noch was, damit das jederzeit funktioniert?
Da mein Wissen über Javascript irgendwo doch noch recht beschränkt ist, hoffe ich das ihr mir hoffentlich weiterhelfen könnt.
gruß KeYara
Hier, das Beispiel zum folgendem Quelltext: Slide-Beispiel
Vom halbwegs gleichen Aufbau her hab ich vor ein paar Monaten schonmal ein Slide-Menu gebastelt was auch eigtl funktioniert.
Wunsch-Slide-Menu
Allerdings enthält dieses sehr viele Fehler, worauf ich mich entschlossen habe nochmal neu anfzufangen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="KeYara" />
<meta name="editor" content="html-editor phase 5" />
<title>Slide - Test</title>
<script language="JavaScript" type="text/javascript">
// Variablen - deren Wert verändert werden kann bzw. darf
var PosA = 0; // Start-Position
var PosB = 120; // Ziel-Position
var speed = 5; // Speed-Wert gleich Anzahl an Pixeln um die PosA erhöht wird, bis das Menu PosB erreicht hat.
// Funktion fürs Down-Sliden
function slideDown(identifier){
var sliden = document.getElementById(identifier);
PosA += speed;
if(PosA <= 120) {
sliden.style.top = PosA + "px";
setTimeout("slideDown('"+identifier+"')", 1);
}
}
// Funktion fürs Up-Sliden
function slideUp(identifier){
var sliden = document.getElementById(identifier);
PosB -= speed;
if(PosB >= 0) {
sliden.style.top = PosB + "px";
setTimeout ("slideUp('"+identifier+"')", 1);
}
}
// Funktion um beide Funktionen je nach Situation zum Einsatz kommen zu lassen.
var abc = 1;
function slide(identifier) {
if(abc==1) {
slideDown(identifier);
abc = 2;
} else {
slideUp(identifier);
abc = 1;
}
}
~~~~~~html
</script>
<style type="text/css">
#menu {
position:relative;
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:relative;
top:120px;
padding:0;margin:0 auto;
}
#slide {
width:100px;
position:absolute;
left:220px;
top:120px;
cursor:pointer;
}
</style>
</head>
<body style="padding:0; margin:0;">
<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>
<p id="slide" onclick="slide('menu');"><u>up and down</u></p>
</body>
</html>