jquery - Bootstrap 3.0 中的水平导航菜单 - 如果我有很多主菜单，如何在其顶部添加上一个-下一个箭头？

Question

我正在使用Bootstrap 3.0并实现了导航菜单。我的桌面到移动 View 的媒体查询断点是 800 像素。基本上，我想在 800 像素的屏幕上显示桌面 View 。在像桌面这样更宽的屏幕上，我可以在一行中显示所有 12 个左右的主菜单。但如果我使用 iPad，那么我只能得到 980 像素。在这个较小的屏幕上，我的菜单分为两行。我无法减少主菜单数量。

如何在 Bootstrap 导航顶部制作上一个 - 下一个箭头，以便菜单始终位于一行中，并且我可以在桌面模式下遍历所有可用菜单？

我需要实现这样的东西。

我创建了一个简单的 Bootstrap 导航 jsFiddle，有 12 个主菜单。请将结果部分展开得足够宽，以在桌面模式下显示导航，如下所示:

fiddle 链接:link fiddle 图像

http://jsfiddle.net/vijayP/k63t7tqo

Answer 1

这个应该可以工作:

$('.direction-right').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    console.log(margin);
    console.log('-' + ($('.navbar-nav').height() - 50) + 'px');
    $('.navbar-nav').css('margin-top', margin == '-' + ($('.navbar-nav').height() - 50) + 'px' ? margin : '-=50px');
});

$('.direction-left').click(function() {
    var margin = $('.navbar-nav').css('margin-top');
    $('.navbar-nav').css('margin-top', margin == '0px' ? '0px' : '+=50px');
});

$(window).resize(function() {
    if ($(window).width() < 768) {
     	$('.navbar-nav').css('margin-top', 0);  
    }
});

@media (max-width: 768px) {
    .direction-right, .direction-left {
        display: none;
    }    
}
@media (min-width: 768px) {
    .navbar {
        height: 51px;
        overflow: hidden;
    }
    .navbar-nav {
        overflow: hidden;
        width: calc(100% - 52px);
    }
    
    .direction-right, .direction-left {
        display: block;
    }
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          
        <div class="navbar-header pull-left">     
        </div>
        <div class="navbar-header pull-right">
           <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
          
        <div class="navbar-collapse collapse">
            <a href="#" class="direction-left pull-left navbar-brand"><</a>
            <ul class="nav navbar-nav">
            <li><a href="1.html">Menu 1</a></li>
            <li><a href="2.html">Menu 2</a></li>
            <li><a href="3.html">Menu 3</a></li>
            <li><a href="4.html">Menu 4</a></li>
            <li><a href="5.html">Menu 5</a></li>
            <li><a href="6.html">Menu 6</a></li>
            <li><a href="7.html">Menu 7</a></li>
            <li><a href="8.html">Menu 8</a></li>
            <li><a href="9.html">Menu 9</a></li>
            <li><a href="10.html">Menu 10</a></li>
            <li><a href="11.html">Menu 11</a></li>
            <li><a href="12.html">Menu 12</a></li>
          </ul>
            <a href="#" class="direction-right pull-left navbar-brand">></a>
        </div>
    </div>
  </div>

http://jsfiddle.net/k63t7tqo/3/

或者尝试使用 slider 效果:

http://jsfiddle.net/k63t7tqo/7/