1 svar · 512 visningar · startad av bagera
hur gör jag för att hela tiden skjuta innehållet neråt på sidan
första knapplagret ska ju ligga ovanför andra knapplagret å när man klickar på första knappen ska ju alla lager nedanför hoppa ner så mycket som det behövs för att visa lager 1 osv.
måste jag hela tiden hålla reda på top värdet å öka på det eller finns det ett annat sätt?
<html>
<head>
<script language="JavaScript" type="text/javascript">
function visa(Id) {
if(document.getElementById(Id).style.visibility=='hidden'){
document.getElementById(Id).style.visibility='visible';
} else {
document.getElementById(Id).style.visibility='hidden';
}
}
</script>
</head>
<body>
<div style="position:relative; left:15px; top:135px; width:720px; z-index:1">
<!-- start -->
<div style="position: absolute; visibility: visible; layer-background-color: #ffffff; width: 100%; height: 25px; color: white; z-index:2">
<input type="button" onClick="visa('lager1');" value="klick">
</div>
<div id="lager1" style="position: relative; visibility: hidden; background-color: #cccccc; width: 100%; top:25; z-index:3">
Innehåll
</div
<!-- Slut -->
<!-- start 2 -->
<div style="position: absolute; visibility: visible; layer-background-color: #ffffff; width: 100%; height: 25px; color: white; z-index:4">
<input type="button" onClick="visa('lager2');" value="klick">
</div>
<div id="lager2" style="position: relative; visibility: hidden; background-color: #cccccc; width: 100%; top:25; z-index:5">
Innehåll
<!-- Slut 2-->
</div
</div>
</div>
</body>
</html>
Du bör inte använda position:absolute; eftersom du då skapar ett lager som är obundet till resten av sidan. Plocka bort position:absolute; och ändra visibility:hidden; till display:none; Sedan växlar du på display-värdet mellan "none" (dolt) och "block" (synligt).
Du har ett konkret exempel på det Här (DOM Meny 1).
Tillägg... Vill du ha menyn ligga flytande någonstanns på sidan kan du innefatta hela menyn i en div som du sätter position:absolute på. Det påverkar inte menyn.
