javascript 如何使画布导航重叠内容引导而不是移动它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18422699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make bootstrap off canvas nav overlap content instead of move it
提问by LordZardeck
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?
我喜欢 bootstrap 3 的画布外功能：http: //getbootstrap.com/examples/offcanvas/。但是，对于我的一个项目，我希望它与内容重叠，而不是将内容移到一边。这可能吗？如果是这样怎么办？
Here's what i mean by overlapping:
这就是我所说的重叠的意思：
回答by Bass Jobsen
update(based on your comment and new sketch)
更新（根据您的评论和新草图）
html:
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>© Company 2013</p>
</footer>
</div><!--/.container-->
css:
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:
javascript:
$('#navigator').click(function(){$('div.sidenav').toggleClass('on');});
--
——
Yes, see: http://bootply.com/77207
是的，请参阅：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).
画布外功能不是引导程序的默认功能。这个演示展示了你可以用 Bootstrap、css、mediaqueries 和 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
1) 当屏幕宽度低于 768px 时，媒体查询隐藏侧边栏（css 一个负的右位置） 2）点击按钮将类 .active 添加到内容（包括侧边栏） 3）css 设置内容的位置与类.active 到左边 ... % （正右侧位置）内容隐藏（在视口外）并且导航栏变得可见。4）显示/隐藏的效果是用CSS3过渡完成的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.
在原始示例中，内容 swift 50%，将其更改为 100%（或更多）将产生重叠效果。
Maybe also see: Toggle sidebar on mobile device with Twitter Bootstrap 2.x(easy to migrate to TB3)
也许还可以看到： Toggle sidebar on mobile device with Twitter Bootstrap 2.x(easy to migrate to TB3)
