javascript - 给动态ul li添加滚动条

Question

我搜索了很多帖子和论坛，因为我认为这可能是一个基本的东西，但没有找到它所以在这里问，我想做的就是在高度超过一定限制的情况下添加滚动条让我们说如果菜单项超过 3 个。

我创建了一个 jsfiddle http://jsfiddle.net/euSWB/

如果您无法访问它，那么这里是 HTML 和 CSSHTML

<ul id="mnav">

<li><a><b>Home</b></a>
</li>
<li><a><b>SQL Server vs Oracle</b></a>
 <ul>

<li><a>Basic SQL : Declare variables and assign values</a></li>

<li><a>Basic SQL : Inner Join, Outer Join and Cross Join</a></li>

<li><a>Basic SQL : Padding and Trimming</a></li>

<li><a>Basic SQL : Union,Except/Minus,Intersect</a></li>

<li><a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;">Update from Select</a></li>

</ul>
</li>

<li><a href="#"><b>SSIS</b></a>
 <ul>
<li><a>Coalesce in SSIS</a></li>
<li><a >Universal CSV Generator</a></li>
<li><a >Parsing a row into multiple in CSV</a></li>


<li><a style="border-bottom-color: currentColor; border-bottom-width: 0px; border-bottom-style: none;" >XML Task in SSIS</a></li>
</ul>
 </li></ul>

CSS

#mnav {
margin-left: -30px;
margin-right: -30px;
}
#mnav li {
float: left;
list-style: none;
}
#mnav li a, #mnav li a:link, #mnav li a:visited {
text-decoration: none;
}
#mnav li a:hover, #mnav li a:active {
text-decoration: none;
}
#mnav li:hover, #mnav li.sfhover {
position: static;
}
#mnav li ul {
display: block;
z-index: 9999;
position: absolute;
left: -999em;
width: 400px;
margin: 0px;
border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
left: auto;
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
display: block;
margin: 0;
text-decoration: none;
z-index: 9999;
border-bottom: 1px dotted #ccc;
width: 500px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
display: block;
margin: 0;
text-decoration: none;
}

Answer 1

我对您的原始样式表做了一些调整，现在它将显示滚动条，但只有当它超过 3 个列表项的高度(在本例中为 63 像素)时才会显示。这是最终的 CSS 代码:

#mnav {
    margin-left: -30px;
    margin-right: -30px;
}
#mnav li {
    float: left;
    list-style: none;
    margin:0 10px;/*Keeping 10px space between each nav element*/
}
#mnav li a,/*These can all be merged into a single style*/
#mnav li a:link,
#mnav li a:visited,
#mnav li a:hover,
#mnav li a:active {
    text-decoration: none;
}
#mnav li ul {
    display: none;/*This is the default state.*/
    z-index: 9999;
    position: absolute;
    width: 400px;
    max-height:63px;/*The important part*/
    overflow-y:auto;/*Also...*/
    overflow-x:hidden;/*And the end of the important part*/
    margin: 0px;
    padding-left:5px;/*Removing the large whitespace to the left of list items*/
    border: 1px solid #ddd;
}
#mnav li:hover ul, #mnav li.sfhover ul {
    display:block;/*This is the hovered state*/
}
#mnav li ul li a, #mnav li ul li a:link, #mnav li ul li a:visited {
    display: block;
    margin: 0;
    text-decoration: none;
    z-index: 9999;
    border-bottom: 1px dotted #ccc;
    width:400px;
}
#mnav li ul li a:hover, #mnav li ul li a:active {
    display: block;
    margin: 0;
    text-decoration: none;
}

Here's the demo of it 。为了演示目的，我还插入了 2 个额外的 <li> Home 和 SQL Server vs Oracle 项的元素。如果列表项少于 3 个，Home 项将显示弹出窗口的行为方式。

为了解释每个更改的位，首先是实际执行此操作的代码:

• 定义max-height如果 ul 保持在 63px 高度以下，到 63 将使 ul 正常运行，但如果超过该高度，它将溢出并显示滚动条。如果要显示更多元素，只需增加 max-height到想要的高度。目前每个元素的高度是 21px，所以我用它来获得 3 个元素的 63px。
• 由于溢出应该只显示垂直方向的滚动条，所以只有 overflow-y:auto;应该在那里，overflow-x:hidden防止水平方向的滚动条。

然后是我所做的其他常规更改:

• 我在元素之间添加了 20 像素的边距(元素的两边各 10 像素)，以使列表在这里看起来更好一些。不过，您可能想要应用自己的样式，这仅用于此演示。
• 我已经将你的隐藏技巧从'推开它改为-999em向左'通过display:none隐藏它.这更好用，因为元素是 display:none不会在搜索引擎中呈现，因此这在这些情况下会有所帮助。一般来说，我认为用 display:none 隐藏东西只是比将它推离屏幕要好，而它实际上仍然存在
• 我删除了 ul 左侧的填充因为它看起来很糟糕。如果您不将默认填充用于点分/编号列表，则不需要默认填充。

考虑到您对 Zachary Carter 的回答的评论，这也应该有效，因为如果您定义 max-height，这将不会显示一个巨大的白框。到 210 像素(10 项)。