javascript - 在导航菜单下拉列表中添加阅读更多箭头

Question

我有一个悬停时打开的导航菜单。其中一个导航元素会相当长，我不希望它覆盖大部分页面，所以我一直在寻找可以在下拉菜单中充当辅助导航的东西。

这是我想象的粗略模拟:

我的代码现在是这样的:

//----------------------------------------------
//script that lets you hover over drop down menus, but only on desktop.
//----------------------------------------------


initializeHover();

$(window).resize(initializeHover);

function initializeHover() {
    $('ul.nav > li.dropdown').unbind('mouseenter mouseleave');
    $('ul.nav > li.dropdown > .dropdown-menu').css('display', '');

    if ($(window).width() >= 992) {
        $('ul.nav > li.dropdown').hover(function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(90).slideDown(200);
        }, function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(90).slideUp(200);
        });
    }
}

.navbar.navbar-ot {
  background-color: #2db2e9;
  padding: 5px 50px;
  position: fixed;
}
.navbar.navbar-ot .navbar-brand {
  padding-top: 20px;
}
.navbar.navbar-ot ul li a {
  padding: 30px 10px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.navbar.navbar-ot ul li a:hover {
  background-color: inherit;
}
.navbar.navbar-ot .dropdown-menu {
  top: 107%;
  border: none;
}
.navbar.navbar-ot .dropdown-menu li a {
  padding: 15px 40px;
  color: #2db2e9;
}
.navbar.navbar-ot .dropdown-menu li a:hover {
  color: #1698cd;
  background-color: #eee;
}
.navbar.navbar-ot .navbar-right {
  padding-top: 20px;
  text-transform: uppercase;
}
.navbar.navbar-ot .navbar-right .btn {
  font-weight: 600 !important;
}
.navbar.navbar-ot .navbar-right .btn.btn-outline {
  border: 2px solid #fff !important;
  color: #fff !important;
}
.navbar.navbar-ot .navbar-right .btn.btn-white {
  color: #2db2e9;
}
.navbar.navbar-ot.navbar-ot-white {
  background-color: #fff;
}
.navbar.navbar-ot.navbar-ot-white ul li.active > a {
  font-weight: 800;
  color: #1387b6;
}
.navbar.navbar-ot.navbar-ot-white ul li a {
  color: #2db2e9;
}
.navbar.navbar-ot.navbar-ot-white ul li a:hover {
  background-color: #f5f5f5;
}
.navbar.navbar-ot.navbar-ot-white .navbar-right .btn.btn-outline {
  border: 2px solid #2db2e9 !important;
  color: #2db2e9 !important;
  -webkit-transition: background-color ease 0.3s;
  -o-transition: background-color ease 0.3s;
  transition: background-color ease 0.3s;
}
.navbar.navbar-ot.navbar-ot-white .navbar-right .btn.btn-outline:hover {
  color: #fff !important;
  background-color: #2db2e9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<header>
  <nav class="nav navbar-nav navbar navbar-ot navbar-ot-white navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ot-nav">
                        <i class="fa fa-navicon text-white"></i>
                    </button>
        <a class="navbar-brand" href="#"></a>
      </div>
      <div class="collapse navbar-collapse" id="ot-nav">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Feature</a></li>
              <li><a href="#">Feature</a></li>
              <li><a href="#">Feature</a></li>
              <li><a href="#">Feature</a></li>
            </ul>
          </li>
        </ul>
        <div class="nav navbar-nav navbar-right">
          <a href="#" class="btn btn-primary btn-alt" data-no-scroll="">Book a Demo</a> &nbsp; &nbsp;
          <a href="#" class="btn btn-primary btn-outline btn-alt">Log In</a>
        </div>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</header>

我知道如何使用“阅读更多”类型的按钮，但我希​​望它不只是展开下拉菜单，而是滚动内容以显示更多内容并在顶部添加另一个箭头以导航回列表。因此，只有在任何给定时间在下拉列表中显示 5 个元素。有谁知道如何实现这一目标？如果是这样，它也可以在移动设备上使用吗？我是 JavaScript 的新手，我假设它需要一些脚本。

Answer 1

您可以创建自定义 CSS 类，例如 scroll-menu :

.scroll-menu {
    height: auto;
    max-height: 150px;
    overflow-x: hidden;
}

之后，您只需将该类添加到 <ul> Bootstrap 导航栏中的子菜单:

    <ul class="dropdown-menu scroll-menu">
          <li><a href="#">Feature</a></li>
          <li><a href="#">Feature</a></li>
          <li><a href="#">Feature</a></li>
          <li><a href="#">Feature</a></li>
        </ul>
      </li>
    </ul>

这是一个simple codepen使用你自己的例子。当然，这会为菜单创建一个非常基本的滚动。对于向上/向下箭头样式的滚动，您需要使用 CSS 动画/过渡。