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

问题描述

我喜欢 bootstrap 3 的画布外功能:

html:

<div class="row"><div class="col-sm-9" style="background-color:lightgreen;height:500px;">内容<button id="navigator">显示导航</button>
<div class="sidenav col-sm-3" style="background-color:red;height:100px;">Nav</div>

<小时><页脚><p>&copy;公司 2013</p></页脚></div><!--/.container-->

css:

@media (最大宽度:767px){.sidenav{位置:绝对；顶部:50px；高度:0px；宽度:0px；溢出:隐藏；左:100%；填充:0;}.sidenav.on{宽度:50%；左:50%；-webkit-transition:所有 2s 都缓解 0s；-moz-transition:所有 2s 缓和 0s；-o-transition:所有 2s 缓和 0s；过渡:所有 2s 缓和 0s；}}

javascript:

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

--

是的，请参阅:http://bootply.com/77207

画布外功能不是引导程序的默认功能.此演示展示了您可以使用 Bootstrap、css、媒体查询和 javascript (jQuery) 执行的操作.

1) 当屏幕宽度低于 768px 时，媒体查询隐藏侧边栏(css 一个负的右位置)2) 单击按钮将类 .active 添加到内容中(包括侧边栏)3) css 将类 .active 的内容的位置设置为左侧 ... % (正右侧位置)内容隐藏(在视口外)并且导航栏变得可见.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屋！