Bootstrap - 在导航栏上添加滚动箭头添加滑动菜单

时间：2017-11-18 14:22:57

标签： jquery html css twitter-bootstrap

由于我的菜单超过容器宽度，我试图添加带箭头的滑动滚动，但我无法实现它。首先，我无法将这些菜单显示在一行中。单击箭头时，我无法左右滑动菜单。我试过一些css＆amp; jquery代码。这也行不通。请帮我。预先感谢。 注意：请全屏查看小提琴，以便清楚地了解问题。

＆＃13;
＆＃13; 
$(document).ready(function() {
  $(".chevron-right").on("click", function() {
    alert("click");
    $('.nav').animate({
      left: 100
    }, 'slow');
  })
  $(".chevron-left").on("click", function() {
    alert("click");
    $('.nav').animate({
      left: 100
    }, 'slow');
  })
})
＆＃13; 
.navbar-angle {
  position: relative;
}

.chevron-left {
  color: #ccc;
  font-size: 25px;
  position: absolute;
  right: 15px;
  bottom: 50%;
  transform: translate(0, 50%);
  cursor: pointer;
  z-index: 9;
}

.chevron-right {
  color: #ccc;
  font-size: 25px;
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 15px;
  transform: translate(0, -50%);
  cursor: pointer;
}
＆＃13; 
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/pi-header-n-footer.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js"></script>
<div class="navbar-angle">
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar navbar-inverse mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 5 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">bootstrapPage 6</a></li>
        <li><a href="#">bootstrapPage 7</a></li>
        <li><a href="#">bootstrapPage 8</a></li>
        <li><a href="#">bootstrapPage 9</a></li>
        <li><a href="#">bootstrapPage 10</a></li>
        <li><a href="#">bootstrapPage 11</a></li>
        <li><a href="#">bootstrapPage 12</a></li>
        <li><a href="#">bootstrapPage 13</a></li>
        <li><a href="#">bootstrapPage 14</a></li>
      </ul>
    </div>
  </nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

您正在尝试为DOM元素创建自定义水平滚动机制，而不显示滚动条并将滚动条左右绑定到某些元素。我假设您希望它可以在任何设备上工作（理想情况下可以在触摸设备上滑动），我还假设您希望它可以在所有浏览器中运行，或者至少在现代浏览器中运行。

我不知道这对你来说有多么明显，但这是一项非常复杂的任务，特别是如果你想让自定义卷轴感觉自然，原生，自动停在边缘，可能在它的动画中有一点弹性等等......所以我真的不明白你是如何假设的那样，并且获得自定义脚本会产生比现有插件/库更好的插件/库，这些插件/库在开发中投入了更多的时间，大多数都经过严格测试并准备好生产。

说到这，我会选择Malihu的custom scroller plugin来完成这项工作。最初设计用于滚动图像，它功能强大且功能多样，可用于任何类型的内容。但是，将它应用到菜单上超出了我的答案范围。 你 应该这样做，如果遇到任何麻烦，请来这里询问有关该问题的单独问题。

我在最初尝试回答你的问题之后写了上面的内容（请参阅下面的代码段），但是当我实现你所要求的时，才意识到将它从概念证明转化为a所需的努力量生产就绪的跨浏览器/跨设备脚本对于Stack Overflow答案来说太过分了。

$(document).ready(function() {
  let keepScrolling, 
  	scrollBy = 123,
    duration = 123,
    GetWidths = function(selector, i = 0) {
    	$(selector).each(function (index) {
        i += parseInt($(this).width(), 10);
        });
    return i;
    },
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width();

  function navScrollTo(direction = true) {
    let
      menu = $('.navbar-angle nav'),
      scroller = $('li:first-child', menu),
      current = parseInt(scroller.css("margin-left")),
      checked = Math.max(
      	Math.min(
        	isNaN(current) ? -scrollBy : current, 
          -scrollBy
          ), 
        scrollBy - currentMax - 102
        ),
      newVal = direction ? checked - scrollBy : checked + scrollBy;
    scroller.animate({
      'margin-left': newVal + 'px'
    }, duration, "linear");
    setTimeout(function() {
      if (keepScrolling) navScrollTo(direction);
    }, duration);
  }
  $('.navbar-angle > i').mousedown(function(e) {
    keepScrolling = true;
    navScrollTo($(e.target).closest('.fa').hasClass('chevron-left'));
  }).mouseup(function(e) {
    keepScrolling = false;
  });
  // in a production env the function below should be throttled
  // with {trailing:true}
  $(window).on('resize', function() {
    currentMax = GetWidths('.navbar-angle .navbar-nav > li') - $(window).width()
  })
})
.navbar-angle>i {
  display: none;
}
body {
  overflow-x: hidden;
}

@media(min-width: 768px) {
  .navbar-angle {
    position: relative;
    display: flex;
    align-items: center;
  }
  .navbar-angle>i {
    font-size: 40px;
    width: 50px;
    height: 52px;
    cursor: pointer;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid #080808
  }
  .navbar-angle>i.chevron-left {
    border-right-color: rgba(0, 0, 0, .35);
  }
  .navbar-angle>i.chevron-right {
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle nav {
    width: calc(100% - 100px);
    border-radius: 0;
    margin-bottom: 0;
    border-right-color: rgba(0, 0, 0, .35);
    border-left-color: rgba(255, 255, 255, .12);
  }
  .navbar-angle .container-fluid {
    padding: 0;
  }
  .navbar-angle nav .navbar-nav {
    display: flex;
  }
  .navbar-angle nav .navbar-nav li {
    flex: 1 0 auto;
  }
}

@media (max-width: 768px) {
  .navbar-angle nav li:first-child {
    margin-left: 0px!important;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="navbar-angle">
  <i class="fa fa-chevron-left chevron-left" aria-hidden="true"></i>
  <nav class="navbar navbar-inverse mrgn-btm-0">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 4 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 5 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">bootstrapPage 6</a></li>
        <li><a href="#">bootstrapPage 7</a></li>
        <li><a href="#">bootstrapPage 8</a></li>
        <li><a href="#">bootstrapPage 9</a></li>
        <li><a href="#">bootstrapPage 10</a></li>
        <li><a href="#">bootstrapPage 11</a></li>
        <li><a href="#">bootstrapPage 12</a></li>
        <li><a href="#">bootstrapPage 13</a></li>
        <li><a href="#">bootstrapPage 14</a></li>
      </ul>
    </div>
  </nav>
  <i class="fa fa-chevron-right chevron-right" aria-hidden="true"></i>
</div>

这里是the fiddle（我更喜欢它，因为它允许我调整面板的大小 - （它也解析SCSS - 我在这里没有使用过）。

除此之外，您目前正在加载jQuery两次。

相关问题
最新问题