nicht angemeldet
Hallo,
ich trete schon sein einigen Tagen bei einem so simplen Problem auf der Stelle, ich hoffe ihr könnt mir weiterhelfen.
Ich möchte eine Art "wegklappbares" Menü haben, hierzu möchte ich aber auf keinen Fall auf Frames zurückgreifen.
Für die Klappanimation verwende ich jQuery und jQuery UI.
Das wegklappen des Menüs funktioniert, allerdings bleibt der Content-Div-Container unverändert stehen (eigentlich klar, da absolute Positionierung). Mir fällt aber hierzu keine Alternative ein, sodass der Content-Container direkt am Menü-Container hängt.
Habt ihr eine Idee?
Der "Code":
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>An XHTML 1.0 Strict Template</title>
<style type="text/css">
#menu
{
padding:5px;
border-right:1px solid #858fcc;
width:200px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
#menu2
{
display:none;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
#menuToggle
{
position:absolute;
top:0px;
left:210px;
z-index:99
}
#content
{
padding-left:20px;
position:relative;
left:210px;
}
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.slide.only.min.js"></script>
<script type="text/javascript">
function toggleMenu()
{
//$('#menu').slideUp('slow');
//$('#menu').hide("slide", { direction: "left" }, 1000);
//document.getElementById("menu").style.visibility = "visible";
//document.getElementById("menu").style.display = "none";
if (document.getElementById("menu").style.display == "none")
{
$('#menu').show("slide", { direction: "left" }, 1000);
document.getElementById("menuToggle").src = "collapse2.png";
$('#menu2').hide("slide", { direction: "left" }, 1000);
}
else
{
$('#menu').hide("slide", { direction: "left" }, 1000);
document.getElementById("menuToggle").src = "expand2.png";
$('#menu2').show("slide", { direction: "left" }, 1000);
}
}
</script>
</head>
<body>
<div id="menu">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<img src="collapse2.png" id="menuToggle" onclick="toggleMenu()" style="cursor:pointer" />
</div>
<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<input type="button" value="toggleMenu()" onclick="toggleMenu()" style="cursor:pointer" />
</div>
<div id="menu2">
<img src="expand2.png" id="menuToggle2" onclick="toggleMenu()" style="cursor:pointer" />
</div>
</body>
</html>
Vielen Dank
tikra