如果有很多孩子而没有“孙子"，则将“超级鱼"下拉列表列结点 [英] superfish dropdowns to be columned when there are many children and no "grandchildren" nodes

问题描述

我有一个使用jquery superfish的水平导航菜单.在我的一个下拉菜单中，其中没有更多的下拉菜单(即没有孙子节点)，但是有几个子菜单(确切地说现在有45个子菜单，它可能会随着时间的推移而上升或下降).我正在尝试找到一种方法，使下拉列表中的列超过一定数量. 15个对我来说很好，因为有45个.因此，在不显示所有包含项的情况下，这是html列表-为了减少代码的使用，我将使用15:

I have a horizontal nav menu that's using jquery superfish. In one of my dropdown menus there'll be no more dropdowns within it (i.e. no grandchildren nodes) but there are several children (45 to be exact right now and it may go up or down in time). I'm trying to find a way to have the dropdown be columned past a certain count. 15 works for me nicely since there are 45. So without showing all the includes here's the html list - and for the sake of less code I'll use 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，没有解决方案.

so if I wanted the columns to start at 5 I'd have exactly 3 columns. I can't figure out how I can accomplish this and not break everything. I've tried using some css and came up with no solutions.

推荐答案

我建议您使用

I would suggest that you use a mega dropdown script instead of superfish if you have 45 items in the list.

更新:如果您希望多列下拉菜单的显示效果很好，那么为什么不直接使用CSS菜单呢?查看多列菜单， CSS3多幻灯片甚至是

Update: If you want a multi-column dropdown menu that degrades nicely, then why not just go for a CSS menu? Check out multi-column menu, pro dropdownlist 1, prodropdown list 2, CSS3 multi-slide or even a vertical flyout list.

更新#3:好的，因为我的OCD强迫我弄清楚这一点，所以今天我做了一段时间的LOL.它不是那么漂亮，但是可以.这是演示.

Update #3: Ok, since my OCD compelled me to figure this out, I worked on this for a while today LOL. It's not that pretty, but it works. Here is a demo.

您将不得不重新格式化HTML:

You'll have to reformat the HTML a tiny bit:

<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添加到标准中

Added this CSS to the standard

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

这篇关于如果有很多孩子而没有“孙子"，则将“超级鱼"下拉列表列结点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！