Das erste ist dein CSS-Code, den brauchst du gar nicht zu ändern.
Und dann zu dem was zu ändern ist:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">
</head>
<!-- Menü links -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
[COLOR=#ff0000]<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration :500});
}, function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
});
});
</script>
[/COLOR] </head>
<body>
<div id="leiste"></div>
<!-- Text im linken Menü -->
[COLOR=#008000]<div style="position:absolute; top:30px; left:6px; width:35px; padding:10px; margin-right:left; margin-bottom:left">
[/COLOR] <b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K<br><br>< br></font></b></div>
[COLOR=#0000ff]<!-- Impressum -->
<div style="position:absolute; top:430px; left:6px; width:283px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF "> <p>Inhaber: Markus K<br>
Straße 100<br>
00000 Augsburg<br>
<u><br>
</u>Telefon: +49 (0) 15204166092<u><br><br>
</u>E-Mail: Info@WakeStars.de<br>
E-Mail: Markus@WakeStars.de<span style="text-decoration: underline;"></span><br>
</p></font></b></div>
<!-- Impressum ENDE -->
[/COLOR] </body>
</html>
Alles anzeigen
Jetzt ersetzt du den roten Code durch den den ich gepostet habe.
In den <div>-tag den ich grün markiert habe packst du die id="ani_impressum" damit das JavaScript die <div> findet.
Und den blauen Code entfernst du vollständig.
Dann sieht das ganze so aus:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Markus K</title>
<link type="text/css" rel="stylesheet" href="http://wakestars.onpw.de/css/design.css">
<!-- Menü links -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript">
$(function() {
$('#leiste').hover(function(){
$(this).animate({left:'0px'},{queue:false,duration:500});
var text = "[COLOR=#ff0000]Impressum[/COLOR]";
var top = "430px";
},
function(){
$(this).animate({left:'-150px'},{queue:false,duration:500});
var text = "[COLOR=#008000]Markus K[/COLOR]";
var top = "430px";
});
document.getElementById('ani_impressum').innerHTML = text;
document.getElementById('ani_impressum').style.top = top;
});
</script>
</head>
<body>
<div id="leiste"></div>
<div id="ani_impressum" style="position:absolute; top:30px; left:6px; width:35px; padding:10px; margin-right:left; margin-bottom:left">
<b><font size="4" color="#FFFFFF ">M<br>A<br>R<br>K<br>U<br>S<br><br><br>K</font></b>
</div>
</body>
</html>
Alles anzeigen
Und jetzt musst du nur noch das was rot markiert ist durch das was erscheinen soll wenn das Menü "offen" ist ersetzen(inklusive html-Tags nur den <div>-Tag weglassen.
Und das grün markierte durch das was erscheinen soll wenn das Menü zu ist.
MfG