Bootstrap 4 移动导航栏从左侧滑动
Posted
技术标签:
【中文标题】Bootstrap 4 移动导航栏从左侧滑动【英文标题】：Bootstrap 4 mobile nav bar slide from left 【发布时间】：2017-10-11 07:42:35 【问题描述】：我正在使用最新版本的引导程序。我自己尝试了各种事情，之后我想我可能会在 *** 上找到一些东西。但是kind没有得到这个东西。我的意思是它是如何工作的？
这是我的代码。我不会在这里添加任何自定义样式，因为它们实际上并没有那么好，而是产生了一些错误。
我还检查了这篇帖子 Bootstrap - How to slide nav bar from left instead from top 我尝试了那里的所有答案，但它对我不起作用。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Roknil Style</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>【问题讨论】：
Bootstrap - How to slide nav bar from left instead from top的可能重复 我之前检查了帖子，并尝试了那里的答案。但结果并没有那么令人满意。 @shaochuancs 这不是重复的，因为另一个问题是针对 bootstrap 3 【参考方案1】：@media(max-width:768px)
.navbar-collapse
position:fixed;
left: 0%;
padding: 15px;
width:100%;
top:0%;
height:100%;
.navbar-collapse.collapsing
height: auto;
-webkit-transition: left 0.3s ease;
-o-transition: left 0.3s ease;
-moz-transition: left 0.3s ease;
transition: left 0.3s ease;
left: -100%;
.navbar-collapse.show
left: 0;
-webkit-transition: left 0.3s ease-in;
-o-transition: left 0.3s ease-in;
-moz-transition: left 0.3s ease-in;
transition: left 0.3s ease-in;
【讨论】：
【参考方案2】：您可以像这样覆盖navbar-collapse 的过渡样式...
Demo
@media (max-width: 992px)
.navbar-collapse
position: fixed;
top: 50px; /* adjust to height of navbar */
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
height: 100%;
.navbar-collapse.collapsing
left: -75%;
transition: height 0s ease;
.navbar-collapse.show
left: 0;
transition: left 300ms ease-in-out;
.navbar-toggler.collapsed ~ .navbar-collapse
transition: left 500ms ease-in-out;
Demo - slide from rightDemo - slide from leftDemo - slide from left (full height)
【讨论】：
实际上我从这段代码中编辑了很多，它可以工作但不太令人满意，所以我会继续尝试，如果可能的话，有人可能会分享一些更好的解决方案。【参考方案3】：上面的 CSS 覆盖确实有效。但是，您必须先等待高度过渡 - 造成一点延迟。下面的代码解决了这个问题。
@media (max-width: 768px)
.navbar-collapse
position: fixed;
top: 0;
left: 0;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
width: 75%;
height: 100%;
.navbar-collapse.collapsing
left: -75%;
transition: height 0s ease;
.navbar-collapse.show
left: 0;
transition: left 500ms ease-in-out;
.navbar-toggler.collapsed ~ .navbar-collapse
transition: left 500ms ease-in-out;
【讨论】：
【参考方案4】：其实你可以使用@Hrvoje Golcic 的solution 来实现从左滑动的效果。
我检查了您的代码并修复了一些问题。请检查以下代码 sn-p。您可能需要定义更多的 CSS 规则来设置导航栏的样式。
$(function()
// mobile menu slide from the left
$('[data-toggle="slide-collapse"]').on('click', function()
$navMenuCont = $($(this).data('target'));
$navMenuCont.animate('width':'toggle', 280);
);
) #navbarCollapse
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 280px; /*example + never use min-width with this solution */
height: 100%;
background: #000;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="slide-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="">Roknil Style</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>【讨论】：
它可以工作，但请在整页中检查它，您将了解问题所在。谢谢。 @ramzan00 这只是一个演示，显示它在移动模式下工作。如果您全页打开它，它将不会再次处于移动模式。 我想我明白了。我会看看我是否可以用这段代码做得更好。顺便说一句，谢谢以上是关于Bootstrap 4 移动导航栏从左侧滑动的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 - 使用切换按钮将链接移动到导航栏的右侧[重复]
通过 Bootstrap 导航栏。如何在移动或平板模式下将 NavBar 的组件放在右侧而不是左侧？