- 首页
- 其他开发
- Bootstrap 3 Off-Canvas 侧边栏菜单，如 Facebook 的
Bootstrap 3 Off-Canvas 侧边栏菜单，如 Facebook 的
[英] Bootstrap 3 Off-Canvas Sidebar Menu Like Facebook's
本文介绍了Bootstrap 3 Off-Canvas 侧边栏菜单，如 Facebook 的的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap 3 的一些示例作为移动设备时的画布侧边栏菜单，可以在此处看到:http://jsfiddle.net/AllenDB/9aAjJ/
我将如何调整画布外菜单，使其像 Facebook 的搜索/好友在线画布外菜单一样始终从菜单顶部开始，而您只能在其中滚动?与我的示例一样，导航栏是固定的，因此可以切换侧边栏菜单.但是当您向下滚动实际页面并切换菜单时，您必须向上滚动才能看到链接.我想看看如何将其调整为菜单从顶部开始的位置并将内容和固定导航栏推到一边，同时能够在菜单内滚动而不是内容?
CSS:
html,身体{溢出-x:隐藏；}身体 { padding-top: 70px;}.navbar { 颜色:#FFF;}页脚 { 填充:30px 0;}/** 关闭画布* -------------------------------------------------——*/@media 屏幕和(最大宽度:767px){.row-offcanvas { 位置:相对；-webkit-transition:所有 0.25 秒缓出；-moz-transition:所有 0.25 秒缓出；过渡:所有 0.25 秒缓出；}.row-offcanvas-right.sidebar-offcanvas { 右:-50%;/* 6 列 */}.row-offcanvas-left.sidebar-offcanvas { 左:-50%;/* 6 列 */}.row-offcanvas-right.active { 右:50%；/* 6 列 */}.row-offcanvas-left.active { 左:50%；/* 6 列 */}.sidebar-offcanvas { 位置:绝对；顶部:0；宽度:50%；/* 6 列 */}}
HTML:
<p class="pull-left visible-xs"><button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">切换导航</button></p><div class="col-xs-2 col-lg-3"><p>LOGO</p>
<div class="col-xs-6 col-lg-5"><p>搜索栏</p>
<div class="col-xs-4 col-lg-4"><p>两个链接</p>
<div class="row row-offcanvas row-offcanvas-left"><div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"><div class="list-group"><a href="#" class="list-group-item active">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a><a href="#" class="list-group-item">链接</a>
</div><!--/span--><div class="col-xs-12 col-sm-9"><div class="jumbotron"><h1>你好，世界！</h1><p>这是一个示例，展示了 Bootstrap 中 offcanvas 布局模式的潜力.尝试一些响应范围的视口大小以查看其实际效果.</p>
<div class="row"><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--><div class="col-6 col-sm-6 col-lg-4"><h2>标题</h2><p>Donec id elit non mi porta gravida at eget metus.Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、utfermentum massa justo sat amet risus.Etiam porta semmalesuada magna mollis euismod.Donec sed odio dui.</p><p><a class="btn btn-default" href="#" role="button">查看详情»</a></p></div><!--/span--></div><!--/row-->
</div><!--/row/row-offcanvas-left--><小时><页脚><p>©公司 2013</p></页脚>
解决方案
如果我理解这个问题，我认为您希望侧边栏独立于主要内容滚动.
看看这个 Bootply 示例是否有效..
http://bootply.com/101543
Facebook 样式模板:http://www.bootstrapzero.com/bootstrap-template/facebook
I'm using some examples of Bootstrap 3 for an off-canvas sidebar menu when it gets to mobile which can be seen here: http://jsfiddle.net/AllenDB/9aAjJ/
How would I go about getting the off-canvas menu adjusted to act like Facebook's search/friends online off-canvas menu to where it always starts at the top of the menu and you can only scroll within? As with my example the navbar is fixed so one may toggle the sidebar menu. But when you have scrolled down the actual page and toggle the menu you have to scroll back up to see the links. I would like to see how can I get this adjusted to where the menu starts at the top and pushes the content and fixed navbar to the side while being able to scroll within the menu and not the content?
The CSS:
html,
body { overflow-x: hidden; }
body { padding-top: 70px;}
.navbar { color: #FFF; }
footer { padding: 30px 0; }
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas { position: relative; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; transition: all 0.25s ease-out; }
.row-offcanvas-right
.sidebar-offcanvas { right: -50%; /* 6 columns */ }
.row-offcanvas-left
.sidebar-offcanvas { left: -50%; /* 6 columns */ }
.row-offcanvas-right.active { right: 50%; /* 6 columns */ }
.row-offcanvas-left.active { left: 50%; /* 6 columns */ }
.sidebar-offcanvas { position: absolute; top: 0; width: 50%; /* 6 columns */ }
}
The HTML:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<p class="pull-left visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="col-xs-2 col-lg-3">
<p>LOGO</p>
</div>
<div class="col-xs-6 col-lg-5">
<p>SEARCH BAR</p>
</div>
<div class="col-xs-4 col-lg-4">
<p>TWO LINKS</p>
</div>
</div>
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="list-group">
<a href="#" class="list-group-item active">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
<a href="#" class="list-group-item">Link</a>
</div>
</div><!--/span-->
<div class="col-xs-12 col-sm-9">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
<div class="col-6 col-sm-6 col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
</div>
</div><!--/row /row-offcanvas-left-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
解决方案
If I understand the question, I think you're looking to have the sidebar scroll independently of the main content.
See if this Bootply example works..
http://bootply.com/101543
Facebook style template:
http://www.bootstrapzero.com/bootstrap-template/facebook
这篇关于Bootstrap 3 Off-Canvas 侧边栏菜单，如 Facebook 的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
