des listes déroulantes de superfish à columer quand il y a beaucoup d'enfants et pas de noeuds "petits-enfants"

Question

J'ai un menu de nav horizontal qui utilise jquery superfish. Dans l'un de mes menus déroulants, il n'y aura plus de listes déroulantes (c'est-à-dire pas de nœuds de petits-enfants) mais il y a plusieurs enfants (45 pour être exact maintenant et il peut monter ou descendre dans le temps). J'essaie de trouver un moyen de faire en sorte que le menu déroulant soit dépassé. 15 œuvres pour moi bien car il y a 45. Ainsi, sans montrer tous les comprend voici la liste html - et pour le bien de code moins je vais utiliser 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> 

donc si je voulais les colonnes pour commencer à 5 J'aurais exactement 3 colonnes. Je n'arrive pas à comprendre comment je peux accomplir cela et ne pas tout casser. J'ai essayé d'utiliser des CSS et je n'ai trouvé aucune solution.

Answer 1

Je vous suggère d'utiliser un script mega dropdown au lieu de superfish si vous avez 45 éléments dans la liste. Mise à jour: Si vous voulez un menu déroulant multi-colonnes qui se dégrade bien, alors pourquoi ne pas opter pour un menu CSS? Découvrez multi-column menu, pro dropdownlist 1, prodropdown list 2, CSS3 multi-slide ou même vertical flyout list.

---

Mise à jour # 3: Ok, puisque mon TOC m'a obligé de comprendre cela, j'ai travaillé pendant un certain temps aujourd'hui LOL. Ce n'est pas joli, mais ça marche. Voici a demo.

Vous devez reformater le code HTML d'un tout petit peu:

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

a ajouté à la norme 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; 
}