如何使引导关闭画布导航重叠内容，而不是移动它 [英] how to make bootstrap off canvas nav overlap content instead of move it

问题描述

我喜欢bootstrap 3具有的off canvas功能：

html ：

 < div class =container> 
 
< div class =row> 
< div class =col-sm-9style =background-color：lightgreen; height：500px;> 
 Content 
 
< button id =navigator>显示导航< / button> 
< / div> 
< div class =sidenav col-sm-3style =background-color：red; height：100px;> Nav< / div> 
< / div> 
 
 
< hr> 
 
< footer> 
< p>& copy;公司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; 
 
} 
 
} 
  

  $（'＃navigator'）。click（function（）{$（'div.sidenav'）。toggleClass '）;}）; 
  

-

http://bootply.com/77207

画布外功能不是bootstrap的默认功能。
此演示显示了您可以使用Bootstrap，css，mediaqueries和javascript（jQuery）做什么。

1）媒体查询隐藏边栏下面的768px（css一个负的右位置）
2）单击按钮添加类.active到内容（包括侧边栏）
3）css设置内容的类。左边带有...％（正右边位置）内容隐藏（视口外），导航栏变为可见。
4）显示/隐藏的效果是通过CSS3转换完成的 http://www.w3schools.com/css3 /css3_transitions.asp

在原始示例中，内容swift 50％，将其更改为100％（或更多）将给出重叠效果

也可以参阅：
使用Twitter Bootstrap 2.x在移动设备上切换边栏（易于迁移到TB3）

I like the off canvas feature that bootstrap 3 has: http://getbootstrap.com/examples/offcanvas/. However, for one of my projects i'd like it to overlap the content rather than move the content to the side. Is this possible? If so how?

Here's what i mean by overlapping:

解决方案

update (based on your comment and new sketch)

See: 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');});

--

Yes, see: http://bootply.com/77207

The off canvas feature is not a default feature of bootstrap. This demo shows what you can do with Bootstrap, css, mediaqueries and javascript (jQuery).

1) media queries hide the sidebar when the screen width is below 768px (css a negative right position) 2) clicking the button adds the class .active to the content (including the sidebar) 3) css sets the position of the content with class .active to the left with ... % (positive right position) the content hide (outside the viewport) and the navbar become visible. 4) the effect of show / hide is done with CSS3 transitions http://www.w3schools.com/css3/css3_transitions.asp

In the original example the content swift 50%, change this to 100% (or a little more) will give the effect of overlap.

Maybe also see: Toggle sidebar on mobile device with Twitter Bootstrap 2.x (easy to migrate to TB3)

这篇关于如何使引导关闭画布导航重叠内容，而不是移动它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！