views:

180

answers:

1

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

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

+2  A: 

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

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.


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.

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>

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;
}
fudgey
thanks for the suggestion. looks like i may have to use that. irregardless, i'm curious if anyone knows how you would do something like that with superfish?
ocergynohtna
and after looking at mega dropdown a bit more, it doesn't degrade as well as superfish without js enabled. :(
ocergynohtna
I've updated my answer. :)
fudgey
again i thank you for all of the options and one of them may well be suited, but the purpose of stackoverflow is to get a problem resolved as opposed to finding an alternative. no offense is intended by that. i am grateful for your responses nonetheless. it really just blows my mind that i can't find a way to make it work with superfish. :PEDIT: so...all of those require a donation even... that's cute when people REQUIRE a donation. by definition it is no longer a donation. weak...
ocergynohtna
You've inspired my OCD... my answer has been updated!
fudgey
hahahah, i totally feel you on the ocd! which is why this has been getting to me. i love what you did on jsFiddle. it's almost identical to what i've been trying and now i've found that my main issue is with the supersubs() script - I THINK!? :P i added a managed resource (supersubs.js) and changed only the javascript, which alleviated the shadows issue, which i didn't want anyway. :P any thoughts to getting around the supersubs causing the floats to go away? http://jsfiddle.net/bA3aL/7/
ocergynohtna
If you modify your supersubs.js file by commenting out line 51: `'float':'none',` it should work for you *twitch* darn OCD!
fudgey
hahahah, i wish it were that easy. tried that to no avail. i updated the resources to point to my subs script that has it commented out.... http://jsfiddle.net/bA3aL/8/
ocergynohtna