Question

有没有人知道如何从右到左在移动幻灯片上进行自举导航，默认是向下滑动，我想做这样的事情，但我真的不确定要开始，因为我应该首先停止默认触发器，但是不知道文件的位置

参考：http://tympanus.net/Development/MultiLevelPushMenu/index2.html

<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>

Answer 1

有一个流行的Bootstrap前叉 - Jasny Bootstrap。它使引导菜单从右向左滑动链接为：http://jasny.github.io/bootstrap/javascript/#offcanvas

Answer 2

看看它可能对你有帮助的小提琴链接。如果它与你一起工作，请告诉我。

http://jsfiddle.net/zzh0ym2m/6/

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

    })

使引导菜单从右向左滑动

2 个答案: