使下拉菜单可滚动 [英] Making a drop-down menu scrollable

问题描述

我正在尝试使用 CSS 和 jquery 在 HTML 页面中实现下拉菜单.这是 HTML 和 javascript 代码的示例.

I am trying to implement a drop down menu in a HTML page using CSS and jquery. Here is a sample of the HTML and javascript code.

<nav id="topNav">
  <ul>
    <li><a href="#" title="Nav Link 1">Menu 1</a></li>
    <li>
      <a href="#" title="Nav Link 2">Menu 2</a>
      <ul>
        <li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
        <li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
        <li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
        <li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
        <li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
      </ul>
    </li>
    <li>
        <a href="#" title="Nav Link 3">Menu 3</a>
    </li>
  </ul>
</nav>

这是Javascript代码:

Here is the Javascript code:

var nav = $("#topNav");

//add indicators and hovers to submenu parents
nav.find("li").each(function() {
    if ($(this).find("ul").length > 0) {

        $("<span>").text("^").appendTo($(this).children(":first"));

        //show subnav on hover
        $(this).click(function() {
            $(this).find("ul").stop(true, true).slideToggle();
        });
    }
});

我将以编程方式向菜单添加内容，并且当下拉菜单的内容变得太大时，我希望下拉菜单可以滚动.

I will be adding content to menu programmatically, and I want the dropdown menus to be scrollable when the content of the dropdown menu gets too large.

我该怎么做?

推荐答案

尝试使用 css like,

Try this using css like,

#topNav ul li ul{
   max-height:250px;/* you can change as you need it */
   overflow:auto;/* to get scroll */
}

演示

这篇关于使下拉菜单可滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！