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

Question

我有一个在悬停时打开的导航菜单。导航项之一将相当长，我不希望它覆盖整个页面的大部分内容，因此我一直在下拉菜单中寻找可以用作辅助导航的东西。

这是我所描绘的照片的粗略模拟：

现在我的代码如下：

window.onload = function(){
document.getElementById("aLinkId").addEventListener("click", function(e){
e.preventDefault();
// Here we redirect to the wanted page, with the extra parameter, with the original external URL
location.href = "REDIRECT-PAGE-URL?redirect=" + document.getElementById("aLinkId").href; 
}); };

//----------------------------------------------
//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;
}

我知道如何使用“更多信息”类型的按钮，但我希​​望不仅滚动下拉菜单，还可以滚动内容以显示更多内容，并在顶部添加另一个箭头以向后导航清单。这样一来，在下拉列表中的任何给定时间只能显示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动画/过渡。