使下拉菜单可滚动

Posted 2023-03-06

【中文标题】使下拉菜单可滚动

【英文标题】：Making a drop-down menu scrollable

【发布时间】：2014-03-25 21:11:25

【问题描述】：

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

<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 代码：

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();
        );
    
);

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

我该怎么做？

【问题讨论】：

这个链接可以帮助你css-tricks.com/long-dropdowns-solution

@Sam1604 那篇文章来自 2009 年。它仍然是最先进的吗？

【参考方案1】：

使用css 试试这个，

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

Demo

【讨论】：

自动更好是overflow-y:auto

@RobSedgwick 是auto 更好，如果你设置scroll 那么有always a scroller` 可用，无论你的元素高度是否超过。

【参考方案2】：

为什么不使用纯 CSS 解决方案？

FIDDLE

您可以更改转场属性以获得您喜欢的幻灯片的动画样式，并更改max-height 值以在滚动发生之前限制下拉菜单的大小。

HTML

<ul id='menu'>
    <li>item</li>
    <li>item</li>
    <li>dropdown
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </li>
</ul>

CSS

body, html 
    width:100%;

ul 
    list-style:none;
    margin:0;
    padding:0

#menu > li 
    display:inline-block;
    border:1px solid grey;
    position:relative;

#menu li ul 
    position:absolute;
    border:1px solid grey;
    width:100%;
    max-height:0;
    overflow:hidden;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;

#menu li:hover ul 
    overflow:auto;
    max-height:50px;

【参考方案3】：

有一个css属性max-height可以使用：

#topNav ul ul
   max-height:150px;  // you choice of number in pixels
   overflow-x:hidden; // hides the horizontal scroll
   overflow-y:auto;   // enables the vertical scroll

【参考方案4】：

不可以设置一个高度然后溢出：auto，作为CSS一个属性吗？滚动条会自动出现吗？

【参考方案5】：

使用 CSS 样式：

#topNav
    overflow:scroll;