nicht angemeldet
Vertikales, klappbares jQuery-Div-Menü
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
-
Hallo!
Du möchtest also, dass sich der Content-Container in seinen CSS-Eigenschaften verändert, wenn das Menü weggeklappt wird?
http://de.selfhtml.org/javascript/objekte/style.htm#set_attribute
http://de.selfhtml.org/javascript/objekte/style.htm#remove_attributeSchöner wäre aber folgendes:
http://de.selfhtml.org/javascript/objekte/all.htm#class_name-
Hallo!
Du möchtest also, dass sich der Content-Container in seinen CSS-Eigenschaften verändert, wenn das Menü weggeklappt wird?
http://de.selfhtml.org/javascript/objekte/style.htm#set_attribute
http://de.selfhtml.org/javascript/objekte/style.htm#remove_attributeSchöner wäre aber folgendes:
http://de.selfhtml.org/javascript/objekte/all.htm#class_nameHi,
erst einmal Danke für deine Antwort. :)
Eher möchte ich aber, dass sich der Content-Container an den Menü-Container ohne statische Positionierung anschließt, das würde alle Probleme lösen.
Das Problem: Wenn der Menü-Container per jQuery ausgeblendet wird bleibt der Content-Container statisch stehen (statische Positionierung), ich möchte aber, dass der neu gewonnene Platz durch das ausblenden des Menüs vom Content-Container genutzt wird.
Wenn ich nun aber relative Positionierung nutze (ich dachte der Content-Container verhält sich dann RELATIV zum vorher definierten Menü-Container), dann liegt der Text vom Content-Container mitten im Menü-Container.
Ist mir die Beschreibung nun besser gelungen?
Gruß
tikra
-
Hi,
Eher möchte ich aber, dass sich der Content-Container an den Menü-Container ohne statische Positionierung anschließt, das würde alle Probleme lösen.
Statisches Positionierung ist der Default (sofern du darunter das gleiche verstehst, was position:static bedeutet.)
Das Problem: Wenn der Menü-Container per jQuery ausgeblendet wird bleibt der Content-Container statisch stehen (statische Positionierung), ich möchte aber, dass der neu gewonnene Platz durch das ausblenden des Menüs vom Content-Container genutzt wird.
Dann könntest du alle Elemente im normalen Fluss belassen - wenn du dann das Menü per display:none ausblendest, rutschen nachfolgende Inhalte nach.
Wenn ich nun aber relative Positionierung nutze (ich dachte der Content-Container verhält sich dann RELATIV zum vorher definierten Menü-Container),
Relative Positionierung bezieht sich auf die Position, die das Element im normalen Fluss hätte.
MfG ChrisB
--
The most exciting phrase to hear in science, the one that heralds new discoveries, is not “Eureka!” but “That's funny...” [Isaac Asimov]
-
-