添加滚动条到动态ul li

Question

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

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

如果你不能够访问它，然后这里是HTML和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; 
} 

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>元素SQL Server与Oracle项目。主页项目将显示弹出窗口的行为如果有少于3个列表项。

为了解释各个改变后位的，第一个，实际上做的伎俩代码：

• 定义max-height到63将会使UL仍能正常运行，如果它停留63px高之下，但如果超过，它会溢出并显示一个滚动条。如果您想显示更多项目，只需将max-height增加到所需的高度。目前每个项目的高度是21px，所以我用它来获得3个项目的63px。
• 由于溢出应该只显示垂直方向的滚动条，因此只有overflow-y:auto;应该在那里，并且overflow-x:hidden可以防止水平方向的滚动条。

，然后其他一般的变化我做：

• 我添加项目之间20px的边距（10px的对元件的任何一边），使列表看起来有点更好地在这里。你可能想要应用自己的风格，但这只是为了演示。
• 我已将您的隐藏技术从'将其推倒到-999em左侧'以通过display:none隐藏它。这样做更好，因为display:none的元素不会在搜索引擎中呈现，所以这将有助于这些情况。一般来说，我认为使用display:none隐藏东西只是比将它从屏幕上推下来还好，但它实际上仍然存在
• 我已经将填充移除到ul的左侧，因为它看起来相当糟糕。如果不使用虚线/编号列表，则不需要默认填充。

这应该也考虑扎卡里·卡特的回答您的意见，因为这不会显示一个巨大的白色框，如果你定义max-height到210px（10个项目）。

Answer 2

的东西夫妇...

首先，你没有指定为您的无序列表的高度。如果您没有为元素定义高度，则永远不会看到滚动条。元素将根据其内容调整其大小。另外，如果要防止UL的内容水平溢出元素，请将overflow-x CSS3属性设置为隐藏。

我想你需要的是这样的：

#mnav li ul { 
    display: block; 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    width: 400px; 
    margin: 0px; 
    border: 1px solid #ddd; 
    overflow-x:hidden; 
    height:50px; 
} 

http://jsfiddle.net/euSWB/9/

希望这有助于！

Answer 3

如果您有可预测的列表项高度，这是相当微不足道的。考虑下面的例子：

<ul class="sub-menu"> 
    <li>This is option one.</li> 
    <li>This is a second option.</li> 
    <li>We'll need three.</li> 
    <li>And now these are out of view.</li> 
    <li>I'm the last option.</li> 
</ul> 

在这里，我们有这五个项目的列表。我将指示各列表项本身有一个font-size和1emline-height，用.25em在顶部和底部填充：

.sub-menu li { 
    font-size: 1em; 
    padding: .25em 1em; 
    line-height: 1em; 
} 

所以，现在我们知道，每个项目为1.5em高。因此，我们现在可以设置我们的父元素的max-height，使其只显示一次3个列表项：

.sub-menu { 
    padding: 0; 
    max-height: 4.5em; /* 1.5 x 3 */ 
    overflow-y: auto; 
} 

结果：

在线演示：http://jsfiddle.net/euSWB/16/