将滚动条添加到动态ul li [英] Adding scroll bar to dynamic ul li

问题描述

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

I searched through many posts and forum as i thought this might be a basic stuff but didnot find it so asking here,All i am trying to do is add scroll bar if the height is more than certain limit lets say if menu items are more than 3.

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

I have created a jsfiddle http://jsfiddle.net/euSWB/

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

If you are not able to access it then here is the HTML and CSS HTML

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

推荐答案

我做了一对调整原始样式表，现在它将显示滚动条，但仅当它超过3个列表项的高度时（在这种情况下为63像素）。这是最终的CSS代码：

I've made a couple of adjustments to your original stylesheet, and now it will show the scroll bar, but only when it exceeds the height of 3 list items (63 pixels in this case). Here's the final CSS code:

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

以下是它的演示 。出于演示目的，我还要在主页和 SQL Server与Oracle 中插入2个额外的< li> 元素强>物品。如果列表项少于3个， Home 项将显示弹出窗口的行为。

Here's the demo of it. I've also, for demonstration purposes, inserted 2 extra <li> elements to the Home and SQL Server vs Oracle items. The Home item will show how the popup behaves if there are fewer than 3 list items there.

要解释每个更改的位，首先实际上诀窍的代码：

To explain each of the changed bits, first the code that actually does the trick:

• 将 max-height 定义为63如果它保持低于63px高，将使ul表现正常，但如果超过该值，它将溢出并显示滚动条。如果您想显示更多项目，只需将 max-height 增加到所需的高度。目前每个项目的高度为21px，所以我用它来获得3个项目的63px。


• 由于溢出应该只显示垂直方向的滚动条，只有 overflow-y：auto; 应该在那里，并且 overflow-x：hidden 以防止水平方向滚动条。

• defining the max-height to 63 will make the ul behave normally if it stays under 63px high, but if it exceeds that, it will overflow and show a scroll bar. If you want to show more items, just increase the max-height to the desired height. Currently the height of each item is 21px, so I used that to get the 63px for 3 items.
• Since the overflow should only show a scroll bar for the vertical direction, only overflow-y:auto; should be there, and overflow-x:hidden to prevent a scrollbar in the horizontal direction.

然后我做的其他一般性更改：

And then the other general changes I made:

• 我在项目之间添加了20px的边距（元素两边各10px），使列表在这里看起来更好一些。你可能想要应用自己的风格，这只适用于这个演示。


• 我已经将你的隐藏技术改为推迟到 -999em 向左通过隐藏它：display 。这样做更好，因为 display：none 的元素不会在搜索引擎中呈现，所以这将有助于这些情况。一般来说，我认为隐藏 display：none 的东西比把它推出屏幕更好，而它实际上仍然存在


• I已经删除了 ul 左边的填充，因为它看起来很糟糕。如果您没有将它用于虚线/编号列表，则无需使用默认填充。

• I've added 20px margin between items (10px on either side of the element) to make the list look a bit better here. You may want to apply your own style though, this is just for this demo.
• I've changed your hiding technique from 'shoving it off to -999em to the left' to hiding it via display:none. This is better to work with, since elements that are display:none will not render in search engines, so this will help in those situations. In general I think hiding things with display:none is just better than shoving it off the screen, while it's still actually there
• I've removed the padding to the left of the ul since it just looked quite bad. No need for the default padding if you're not using it for a dotted/numbered list.

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

This should also work considering your comment to Zachary Carter's answer, since this won't show a huge white box if you define the max-height to 210px (10 items).

这篇关于将滚动条添加到动态ul li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！