twitter-bootstrap 使引导菜单从右向左滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31579807/
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
Make bootstrap menu slide from right to left
提问by DSF
does anyone know how to make the bootstrap navigation on mobile slide from right to left, the default was slide down, i want to make something like this, but really not sure to start as i should stop first the default trigger, but don't know where the file located
有谁知道如何在移动幻灯片上从右到左进行引导导航，默认是向下滑动，我想做这样的事情，但真的不确定要开始，因为我应该先停止默认触发器，但不要知道文件所在的位置
reference : http://tympanus.net/Development/MultiLevelPushMenu/index2.html
参考：http: //tympanus.net/Development/MultiLevelPushMenu/index2.html
My fiddle : https://jsfiddle.net/os848rv1/1/
我的小提琴：https: //jsfiddle.net/os848rv1/1/
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<script>
$('#navbar').click(function(){
if ($('#navbar').is(':hidden')) {
$('#navbar').show('slide',{direction:'right'},1000);
} else {
$('#navbar').hide('slide',{direction:'right'},1000);
}
});
</script>
回答by Anubhav pun
There is a popular Bootstrap fork - Jasny Bootstrap. It makes bootstrap menu slide from right to left The link is: https://www.jasny.net/bootstrap/components/#navmenu
有一个流行的 Bootstrap 叉 - Jasny Bootstrap。它使引导菜单从右向左滑动链接是：https: //www.jasny.net/bootstrap/components/#navmenu
回答by Steevan
Have a look at fiddle link it might help you. Let me know if its working fine with you.
看看小提琴链接它可能对你有帮助。让我知道它是否适合你。
http://jsfiddle.net/zzh0ym2m/6/
http://jsfiddle.net/zzh0ym2m/6/
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginRight.width() : 0
})
