

サイドバーのアコーディオンを作りました。  
しかし、このままアコーディオンを表示するとbody内のテーブル(列1列2と書いてあるやつ)がそのまま右にズレてしまいます。

右にスライドして全部ズレるのではなく、列１列２などと書いてあるテーブルの上に乗っかるように(上書きするように)表示したいです。  
どのようにすればいいでしょうか？

追記です。  
すいません、乗っからせたいのですが、下の「列１列２」が見えてほしくないので、乗っかった部分はアコーディオンの領域でまるごと塗りつぶしたいということです。

[code]

    <!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>
    
[/code]


CC BY-SA 3.0
2016-02-05T06:29:46.450
21738
2016-10-27T16:33:54.633
2016-02-05T11:35:38.657
14288
14287
question
javascript html jquery css
JQueryのアコーディオンメニューをスライドではなく乗っかるように出したい


以下のようにすれば上に乗っかると思います。

[code]

            .HiddenItem
            {
                display: none;
                //float: left;
                position: absolute;
            }
    
[/code]


CC BY-SA 3.0
2016-02-05T06:52:56.410
21740
2016-02-05T06:52:56.410
6040
21738
answer