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

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> 子菜单：

    <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 动画/过渡。