one simple way is use absolute position on panels
dwilhelm wrote:
Hello,
i'm trying to build a page where i have some buttons on the right side
that slide in some panels over my main content div.
At the moment i have something like this:
<script type="text/_javascript_">
$(document).ready(function(){
$("#btn-slide1").click(function(){
$("#panel1").animate({
"width": "toggle", "opacity": 0.8
}, { duration: "slow" });
});
$("#btn-slide2").click(function(){
$("#panel2").animate({
"width": "toggle", "opacity": 0.8
}, { duration: "slow" });
});
});
</script>
<style type="text/css">
.panel {
float:right;
height: 150px;
width:150px;
display: none;
position:relative;
z-index:10;
}
#content {
float:left;
position:absolute;
z-index:1;
width:90%;
height:300px;
background-color: lightgrey;
}
.slide {
float:right;
}
.btn-slide {
display: block;
font: bold 160%/100% Arial, Helvetica, sans-serif;
color: orange;
text-decoration: none;
}
</style>
<div id="content">...</div>
<p class="slide">
<a id="btn-slide1" href="" class="btn-slide">Panel 1</a><br/>
<a id="btn-slide2" href="" class="btn-slide">Panel 2</a>
</p>
<div id="panel1" class="panel" style="background-color: yellow;
">Panel 1</div>
<div id="panel2" class="panel" style="background-color: green; ">Panel
2</div>
Now i'd like to have panel 1 and 2 not to be side by side but on
seperate lines, just like the buttons.
Is this possible, and if yes, how?
Thanks for help in advance,
Dirk
|
