jQuery-当有许多子代且没有“孙代”节点时,将对superfish下拉列表进行列

我有一个使用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;
}

原文地址：https://www.jb51.cc/css/530777.html