superfish and large number of menu items

superfish and large number of menu items

hello -

i have been using the awesome superfish (v1.5.9) for some time with a rather large number of menu items and sub-menu items.

in other words, i could have 10 menu items, and each item in that menu has 10 more menu items, and each of those has 10 more menu items.

the problem has been that the menu items very quickly start to open below the bottom of the page.

so i put together this jquery script below to start forcing any menu item near the bottom of the page to open upward rather than down.

my question:  is there a better way to handle this situation?  my approach has worked fine, but i fear a new release of superfish might cause my jquery to stop working.

or should i submit this as a new idea to handle this situation?   or has this been handled in a subsequent release?  i would think this is a common situation.


  1. }).superfish({
  2.   delay: 1500,
  3.   onBeforeShow: function() {
  4.   thisHeight = $(this).height();
  5.      if  ( thisHeight > 0 ) {

  6.         thisParent = this.parent();

  7.         parentTop = Math.round(thisParent.offset().top);
  8.         parentHeight = this.parent().height();
  9.         parentBottom = parentHeight + parentTop ;

  10.         mainTop =  document.getElementsByClassName('sf-menu')[0].offsetTop ;
  11.         mainHeight = document.getElementsByClassName('sf-menu')[0].offsetHeight ;
  12.         mainBottom = mainTop + mainHeight ;

  13.                 // are we actually inside the staircase?   if not, skip this block
  14.                 // the very first hover-drop-down-open should not be moved.
  15.         if  ( mainTop !== parentTop ) {
  16.             if  ( mainBottom > ( parentBottom - thisHeight ) ) {
  17.                 $(this).css('top', - (parentTop - mainBottom));    
  18.             } else {
  19.                      // just open upward, make the bottom of the block that just opened parallel with the bottom of the parent element
  20.                 $(this).css('top', - (thisHeight - parentHeight) );
  21.             } // }
  22.         }
  23.     }
  24. }