サイドバーのアコーディオンを作りました。
しかし、このままアコーディオンを表示するとbody内のテーブル(列1列2と書いてあるやつ)がそのまま右にズレてしまいます。
右にスライドして全部ズレるのではなく、列1列2などと書いてあるテーブルの上に乗っかるように(上書きするように)表示したいです。
どのようにすればいいでしょうか?
追記です。
すいません、乗っからせたいのですが、下の「列1列2」が見えてほしくないので、乗っかった部分はアコーディオンの領域でまるごと塗りつぶしたいということです。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HorrizontalAccordion</title>
<script src="jquery.js"></script>
<script>
function acodion(){
$('#acodion').animate({
width: 'toggle'
}, 'normal');
}
</script>
<style>
.sidemenu {
float: left;
cursor: pointer;
}
.vertical {
writing-mode: tb-rl;
direction: ltr;
float: left;
cursor: pointer;
background-color:#00ff00;
}
.HiddenItem
{
display: none;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col col-md-12 col-md-offset-0">
<br />
</div>
</div>
</div>
<form>
<span id='acodion' class="HiddenItem">
メニュー 1-1<br/>
メニュー 1-2<br/>
メニュー 1-3<br/>
</span>
<span id='sidemenu' onclick="acodion()">
<span class='vertical'>アコーディオンメニュー</span>
</span>
<div class="container">
<div class="row">
<div class="col col-md-11 col-md-offset-0">
<table>
<tr>
<td>列1</td><td>列2</td><td>列3</td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>