- 首页
- 前端开发
- 创建响应式导航栏侧边栏“抽屉"在引导程序中?
创建响应式导航栏侧边栏“抽屉"在引导程序中?
[英] Create a responsive navbar sidebar "drawer" in Bootstrap?
本文介绍了创建响应式导航栏侧边栏“抽屉"在引导程序中?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
试图实现这样的目标:https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html
我在网上看到了一些使用其他版本的bootstrap的例子，但都对css改动太大，导致bootstrap更难学.
我想知道在 Bootstrap 4 中是否可以使用折叠、堆叠药丸、flexbox 等工具来完成?
这是我可以实现的:https://jsfiddle.net/kL9u6esw/20/
我的 Jsfiddle 缺少什么:
- 响应不正确
- 导航栏无法使用粘性类正确滚动
- 即使我设置了类，菜单按钮也不粘.
- 背景调光器虽然不是必需的，但会很棒
在我的示例中，我不知道如何插入导航栏，不确定它是否需要正确响应.
也不确定将其作为列是否是正确的做法，难道不应该在画布外吗?
HTML 代码:
<div class="row h-100"><div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample"><ul class="nav flex-column navbar-dark sticky-top"><li class="nav-item"><a class="nav-link active" href="#">Active</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a>
<div class="col"><div class="row"><div class="col-12"><button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">菜单
<div class="col-12">洛伦...
解决方案
Bootstrap 5 Beta 3(2021 年更新)
现在有一个官方的 Bootstrap 5 Offcanvas 组件 使创建侧边栏更容易.当然，它仍然可以在不使用 Offcanvas 组件的情况下完成，例如 Bootstrap 5
引导程序 4(原始答案)
侧边栏导航可能非常复杂.这可能就是 Bootstrap 没有开箱即用"的原因.成分.侧边栏有很多注意事项:
- 响应式 - 基于屏幕宽度的不同宽度、可见性或方向?
- 多级 - 导航项目有子级吗?这将如何影响高度?
- 可切换 - 侧边栏可以通过按钮或汉堡包"切换吗?
- 推送与覆盖 - 页面内容是隐藏在侧边栏后面还是旁边?
- 向左还是向右 - 侧边栏是在页面内容的左侧还是右侧?
- 固定或粘性 - 侧边栏如何在页面滚动上定位?
- 动画风格 - 向左/向右/向上/向下滑动?折叠?
<小时>在这个侧边栏"中案例...而不是在右列使用 col-auto，使用 col.这样它会在菜单折叠时填充宽度:https://jsfiddle.net/0rhyzu7o/
<div class="row h-100"><div class="col-5 col-md-3 折叠宽度 m-0 p-0 h-100 bg-dark";id="collapseExample">..
<div class="col"><div class="row"><div class="col-12"><button class="btn sticky-top";数据切换=折叠"href="#collapseExample";角色=按钮">菜单
<div class="col-12">..
为了让动画更流畅，你必须覆盖 Bootstrap 的折叠过渡，它通常适用于高度
根据赏金请求，我用另外 2 个示例更新了侧边栏.这些更接近于 example，并且主要使用 Bootstrap 类.
最小版本
此版本更接近示例，并且具有相同的左右滑动抽屉"；动画.
body {高度:100vh；溢出-x:隐藏；填充顶部:56px；}.vh-100 {最小高度:100vh；}.sidebar.collapse.show,.sidebar.collapse.show + .col {过渡:0.18s 缓和；变换:翻译(0,0,0)；左:0；}.sidebar.collapse,.sidebar.collapsing,.sidebar.collapsing + .col {过渡:0.18s 缓和；变换:翻译(-25%,0,0)；z-索引:1050；左:-25%；}
演示最小版本:https://codeply.com/go/w1AMD1EY3c
<小时>完整版(非常接近示例):
这个侧边栏的特点:
- 固定宽度
- 在小屏幕上自动关闭，在大屏幕上打开
- 可以在任何宽度切换打开/关闭
- 响应式 - 成为较小宽度上的固定叠加
这个完整版本确实需要更多的 CSS，但其中一些是可选的...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="样式表"/><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><风格>身体 {高度:100vh；溢出-x:隐藏；填充顶部:55px；}/* 设置侧边栏宽度 */.w-侧边栏{宽度:200px；最大宽度:200px；}.row.collapse {左边距:-200px；左:0；过渡:margin-left .15s 线性；}.row.collapse.show {margin-left: 0 !important;}.row.collapsing {左边距:-200px；左:-0.05%；过渡:所有 .15s 线性；}/* 可选的 */.vh-100 {最小高度:100vh；}/* 可选用于在小屏幕上覆盖侧边栏 */@media(最大宽度:768px){.row.collapse,.row.collapsing {margin-left: 0 !important;左:0！重要；溢出:可见；}.row >.sidebar.collapse {显示:弹性！重要；左边距:-100%！重要；过渡:所有 .3s 线性；位置:固定；z-索引:1050；最大宽度:0；最小宽度:0；弹性基础:自动；}.row >.sidebar.collapse.show {margin-left: 0 !important;宽度:100%；最大宽度:100%；最小宽度:初始；}.row >.sidebar.collapsing {显示:弹性！重要；左边距:-10%！重要；过渡:所有 .2s 线性！重要；位置:固定；z-索引:1050；最小宽度:初始；}}</风格><div class="container-fluid fixed-top bg-dark py-3"><div class="row collapse show no-gutters d-flex h-100 position-relative"><div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex"><!-- 间隔列-->
<div class="col px-2 px-md-0"><!-- 切换器--><a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1"><i class="fa fa-bars fa-lg"></i></a>
<div class="container-fluid px-0 h-100"><div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative"><div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar"><!-- 固定侧边栏--><div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2"><ul class="nav flex-column"><li class="nav-item"><a class="nav-link active" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a>
<div class="col p-3"><h3>内容..</h3><p class="lead">尝试以全页视图查看更大屏幕上的动画！</p><p>Sriracha 生物柴油动物标本剥制有机后讽刺，Intelligentsia 鼠尾草胡子 90 年代的代码编辑早午餐.Butcher 宝丽来 VHS 艺术派对，标签 Brooklyn deep v PBR 独角鲸可持续混音带赃物狼鱿鱼手提包.手提袋cronut 符号，原始牛仔布深v 动物标本剥制信使包.Tofu YOLO Etsy，直接贸易道德古怪的未来牛仔短裤.草料 Shoreditch 凌乱的审美讽刺，街头艺术有机布什维克工匠陈词滥调符号学 ugh 合成 chillwave 冥想.破旧别致的 lomo 格子乙烯基青年布 Vice.副可持续开衫，威廉斯堡大师清洗 hella DIY 90 年代的博客.Ethical Kickstarter PBR 不对称低保真.Dreamcatcher 街头艺术 Carles，Stumptown 无麸质 Kickstarter 工匠 Wes Anderson 狼哈巴狗.Godard 可持续，你可能没听说过它们，从农场到餐桌的素食！</p>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
演示完整版:https://codeply.com/go/XJE8LOdX8k
<小时>minimal 和 robust 示例更接近 原始示例.更改颜色和调整样式很容易.这是另一种变体，侧边栏覆盖切换栏 在顶部.
另见:Bootstrap Navbar Collapse to Overlay Sidebar
Trying to achieve something like this : https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html
I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder to learn bootstrap.
I was wondering if in Bootstrap 4 this can be done using tools like collapse, stacked pills, flexbox?
This is what I could achieve : https://jsfiddle.net/kL9u6esw/20/
What is missing from my Jsfiddle :
- Not correctly responsive
- The navbar isn't scrolling properly with the sticky class
- The menu button isn't sticky even though I set the class.
- A background dimmer, although not necessary for the answer, would be great
In my example I couldn't figure out how to insert a navbar, not sure if its necessary for it to be properly responsive.
Also not sure if having it as a columns is the correct way to do it, shouldn't it be off-canvas?
Html code :
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample">
<ul class="nav flex-column navbar-dark sticky-top">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
Lorem...
</div>
</div>
</div>
</div>
</div>
解决方案
Bootstrap 5 Beta 3 (update 2021)
There is now an offical Bootstrap 5 Offcanvas Component that makes creating sidebars much easier.
Of course it can still be done without using the Offcanvas component like this sidebar example for Bootstrap 5
Bootstrap 4 (original answer)
Sidebar navs can be very complex. This may be why Bootstrap doesn't have an "out-of- the-box" component. There are many considerations for Sidebars:
- Responsive - different width, visibility or orientation based on screen width?
- Multi-level - do the nav items have sub levels? How will this impact height?
- Toggleable - can the sidebar be toggled by a button or "hamburger"?
- Push vs. Overlay - is page content hidden behind or next to the sidebar?
- Left or right - is the sidebar to the left or right of page content?
- Fixed or sticky - how is the sidebar positioned on page scroll?
- Animation style - slide left/right/up/down?, collapse?
In this "sidebar" case... instead of using col-auto on the right column, use col. That way it will fill the width when the menu is collapsed: https://jsfiddle.net/0rhyzu7o/
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-5 col-md-3 collapse width m-0 p-0 h-100 bg-dark" id="collapseExample">
..
</div>
<div class="col">
<div class="row">
<div class="col-12">
<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
Menu
</button>
</div>
<div class="col-12">
..
</div>
</div>
</div>
</div>
</div>
To make the animation a little smoother, you must override Bootstrap's collapsing transition which normally works on height
EDIT:
Based on the bounty request, I updated the sidebar with 2 more examples. These are closer to the example, and mostly use Bootstrap classes.
Minimal version
This version is closer to the example, and has the same slide left/right "drawer" animation.
body {
height: 100vh;
overflow-x: hidden;
padding-top: 56px;
}
.vh-100 {
min-height: 100vh;
}
.sidebar.collapse.show,
.sidebar.collapse.show + .col {
transition: .18s ease;
transform: translate(0,0,0);
left: 0;
}
.sidebar.collapse,
.sidebar.collapsing,
.sidebar.collapsing + .col {
transition: .18s ease;
transform: translate(-25%,0,0);
z-index: 1050;
left: -25%;
}
Demo minimal version: https://codeply.com/go/w1AMD1EY3c
Full version (very close to the example):
This sidebar features:
- fixed-width
- automatically closes on smaller screens, opens on wider screens
- can be toggled open/closed at any width
- responsive - becomes a fixed overlay on smaller widths
This full version does require a little more CSS, but some of it is optional...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
body {
height: 100vh;
overflow-x: hidden;
padding-top: 55px;
}
/* set the sidebar width */
.w-sidebar {
width: 200px;
max-width: 200px;
}
.row.collapse {
margin-left: -200px;
left: 0;
transition: margin-left .15s linear;
}
.row.collapse.show {
margin-left: 0 !important;
}
.row.collapsing {
margin-left: -200px;
left: -0.05%;
transition: all .15s linear;
}
/* optional */
.vh-100 {
min-height: 100vh;
}
/* optional for overlay sidebar on small screens */
@media (max-width:768px) {
.row.collapse,
.row.collapsing {
margin-left: 0 !important;
left: 0 !important;
overflow: visible;
}
.row > .sidebar.collapse {
display: flex !important;
margin-left: -100% !important;
transition: all .3s linear;
position: fixed;
z-index: 1050;
max-width: 0;
min-width: 0;
flex-basis: auto;
}
.row > .sidebar.collapse.show {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
min-width: initial;
}
.row > .sidebar.collapsing {
display: flex !important;
margin-left: -10% !important;
transition: all .2s linear !important;
position: fixed;
z-index: 1050;
min-width: initial;
}
}
</style>
<div class="container-fluid fixed-top bg-dark py-3">
<div class="row collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 px-0 w-sidebar navbar-collapse collapse d-none d-md-flex">
<!-- spacer col -->
</div>
<div class="col px-2 px-md-0">
<!-- toggler -->
<a data-toggle="collapse" href="#" data-target=".collapse" role="button" class="p-1">
<i class="fa fa-bars fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="container-fluid px-0 h-100">
<div class="row vh-100 collapse show no-gutters d-flex h-100 position-relative">
<div class="col-3 p-0 vh-100 h-100 w-sidebar navbar-collapse collapse d-none d-md-flex sidebar">
<!-- fixed sidebar -->
<div class="position-fixed bg-dark text-white h-100 w-sidebar pl-2">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="col p-3">
<h3>Content..</h3>
<p class="lead">Try this is full-page view to see the animation on larger screens!</p>
<p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics, raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation. Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog. Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table!</p>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
Demo full version: https://codeply.com/go/XJE8LOdX8k
Both the minimal and robust examples are much closer to the original example. It's easy to change color and tweak the styles. Here's another variation with the sidebar overlaying the toggle bar at the top.
Also see: Bootstrap Navbar Collapse to Overlay Sidebar
这篇关于创建响应式导航栏侧边栏“抽屉"在引导程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
