我有一个使用jquery superfish的水平导航菜单.在我的一个下拉菜单中,其中没有更多的下拉菜单(即没有孙子节点),但是有几个子菜单(确切地说现在有45个子菜单,它可能会随着时间的推移而上升或下降).我正在尝试找到一种方法,使下拉列表中的列超过一定数量. 15个对我来说很好,因为有45个.因此,在不显示所有包含项的情况下,这是html列表-为了减少代码,我将使用15：
<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-1">
<li class="current"> <a href="#a" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a>
<ul style="display: none; visibility: hidden;">
<li> <a href="#aa">menu item</a> </li>
<li> <a href="#ab">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ad">menu item</a> </li>
<li> <a href="#aa">menu item</a> </li>
<li> <a href="#ab">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ad">menu item</a> </li>
<li> <a href="#aa">menu item</a> </li>
<li> <a href="#ab">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ac">menu item</a> </li>
<li> <a href="#ad">menu item</a> </li>
</ul>
</li>
<li> <a href="#">menu item</a> </li>
<li> <a href="#">menu item</a> </li>
<li> <a href="#">menu item</a> </li>
</ul>
因此,如果我希望列从5开始,那么我将有3列.我不知道如何才能做到这一点,而不破坏一切.我尝试使用一些CSS,没有解决方案.
最佳答案
如果列表中有45个项目,我建议您使用mega dropdown脚本而不是superfish.
更新：如果您希望多列下拉菜单的显示效果很好,那么为什么不直接使用CSS菜单呢？检出multi-column menu、pro dropdownlist 1、prodropdown list 2、CSS3 multi-slide甚至是vertical flyout list.
更新#3：好的,因为我的OCD强迫我弄清楚这一点,所以今天我做了一段时间的LOL.它不是那么漂亮,但是可以.这是a demo.
您将需要重新格式化HTML：
<ul class="sf-menu">
<li>
<a href="#a">menu item</a>
<div class="listwrap">
<div class="listblock">
<ul>
<li><a href="#">menu item</a></li>
...
<li><a href="#">menu item</a></li>
</ul>
</div>
<div class="listblock">
<ul>
<li><a href="#">menu item</a></li>
...
<li><a href="#">menu item</a></li>
</ul>
</div>
</div>
</li>
</ul>
将此CSS添加到标准中
.sf-menu .listwrap {
position: absolute;
top: -999em;
max-height: 500px; /* adjust height as desired */
width: 45em; /* adjust width as more columns are added (~10em per column + shadow width */
}
.sf-menu .listblock ul {
position: relative;
display: block;
float: left;
width: 10em;
}
.sf-menu li:hover ul,.sf-menu li:hover .listwrap,/* added two definitions to existing one */
.sf-menu li.sfHover .listwrap,.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
.sf-menu li:hover .listblock ul,.sf-menu li.sfHover .listblock ul {
top: 0;
left: 0;
}
