Jquery 使引导菜单从右向左滑动

有人知道如何在移动设备上从右向左滑动引导导航吗？默认设置是向下滑动，我想这样做，但确实不确定是否要启动，因为我应该先停止默认触发器，但不知道文件位于何处

参考：

我的小提琴：

切换导航










导航标题










导航栏示例
此示例是一个快速练习，用于说明默认的静态导航栏和固定到顶部的导航栏是如何工作的。它包括响应性CSS和HTML，因此它也适用于您的视口和设备



$（'#导航栏'）。单击（函数（）{
如果（$（'#navbar'）。是（':hidden'））{
$（#navbar'）.show（'slide'，{方向：'right'，1000）；
}否则{
$（#navbar'）.hide（'slide'，{direction:'right'，1000）；
}
});

有一种流行的引导叉-Jasny引导。它使引导菜单从右向左滑动链接是：

看看fiddle链接它可能会帮助您。让我知道它是否适合你

---

您好，谢谢，目前正在考虑，子菜单也能做同样的行为吗@steevan，thx btw

<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 &raquo;</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>

$marginLefty.animate({
        marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginRight.width() : 0

    })