javascript - コンテンツを移動する代わりに、キャンバス ナビゲーション オーバーラップ コンテンツからブートストラップを作成する方法

Question

ブートストラップ 3 のオフ キャンバス機能が気に入っています: http://getbootstrap.com/examples/offcanvas/。ただし、私のプロジェクトの 1 つでは、コンテンツを横に移動するのではなく、コンテンツをオーバーラップさせたいと考えています。これは可能ですか？もしそうなら、どのように？

オーバーラップの意味は次のとおりです。

Answer 1

更新（コメントと新しいスケッチに基づく）

参照: http://bootply.com/78559

html :

<div class="container">

<div class="row">
    <div class="col-sm-9" style="background-color:lightgreen;height:500px;">
        Content

        <button id="navigator">Show Nav</button>
    </div>
    <div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>
</div>


  <hr>

  <footer>
    <p>&copy; Company 2013</p>
  </footer>

</div><!--/.container-->

css :

@media (max-width: 767px) 
{ 

    .sidenav
    {
        position: absolute;
        top: 50px;
        height: 0px;
        width: 0px;
        overflow: hidden;
        left:100%; 
        padding:0;
    }

    .sidenav.on
    {    

        width:50%;
        left:50%;
        -webkit-transition: all 2s ease 0s;
        -moz-transition: all 2s ease 0s;
        -o-transition: all 2s ease 0s;
        transition: all 2s ease 0s;

    }   

}

JavaScript:

 $('#navigator').click(function(){$('div.sidenav').toggleClass('on');});

--

はい、参照してください: http://bootply.com/77207

オフ キャンバス機能は、ブートストラップのデフォルト機能ではありません。このデモでは、Bootstrap、css、mediaqueries、javascript (jQuery) で何ができるかを示します。

1) 画面幅が 768px 未満の場合、メディア クエリはサイドバーを非表示にします (css は負の右位置) 2) ボタンをクリックすると、クラス .active がコンテンツ (サイドバーを含む) に追加されます 3) css はクラスでコンテンツの位置を設定します.active to the left with ... % (正の右位置) コンテンツが非表示 (ビューポートの外側) になり、ナビゲーション バーが表示されます。4) 表示/非表示の効果は、CSS3 トランジションで行われます http://www.w3schools.com/css3/css3_transitions.asp

元の例ではコンテンツが 50% に変更されました。これを 100% (またはそれ以上) に変更すると、オーバーラップの効果が得られます。

こちらも参照してください: Twitter Bootstrap 2.x を使用してモバイル デバイスのサイドバーを切り替える(TB3 に簡単に移行できます)