[jQuery] Re: Superfish customization: change display height of submenu

good plugins offer options to hook into events and superfish is one of those

the submenus are all absolutely positioned to their parent . In superfish css look for the li:hover ul, sfHover ul etc that reposition the sub to top=0 when visible. When not visible it has top=-999em

In Superfish API you will find an option "onBeforeShow" that allows you to create a function where "this" is the sub ul about to be displayed. Here a function to change the position of the sub can be created

a simple method to align all the subs where all tops will be at top of overall menu is to first find position of the menu in window

var menuOffset=$('ul.sf-menu').offset().top;
// now you can use the menu container as reference point to align the other elements

$('ul.sf-menu').superfish({
           
                onBeforeShow:  function(){
                // check window offset of the parent li
                    var offset=$(this).parent().offset().top
                // adjust top position of sub by difference of offsets
                    $(this).css("top",(menuOffset-offset))
                   
                }
               
});
good luck!

Jacco wrote:

 Hi All,  I am new to jQuery & Superfish, but it seemd like the most logical way to do a quick prototype for a menusystem. I am trying to create a verertical menu system (using superfish-vertical). However, I'd like to tweak the behaviour of the submenu, and have been unsuccessful so far. Here's what the current solution does (straight out of the box) - assume menu item 3 is hovered over:    menu item 1 >   menu item 2 > [ menu item 3 > ] menu item 3.1   menu item 4 >   menu item 3.2   menu item 5 >   menu item 3.3   menu item 6 >   menu item 3.4                           menu item 3.5                           menu item 3.6  Normal, expected behaviour. But I would like to use this type of menu in a vertically restricted area, and therefore try to place the submenu in such a way that it still fits. I am aware of many restictions that apply when I go about this (submenu can never be more items than the main menu, for instance), but let's assume I can control that.  So, I would like the submenu to take into accoutn the height of the available space. Two examples, for menu item 3 & menu item 6:    menu item 1 >   menu item 3.1   menu item 2 >   menu item 3.2 [ menu item 3 > ] menu item 3.3   menu item 4 >   menu item 3.4   menu item 5 >   menu item 3.5   menu item 6 >   menu item 3.6    menu item 1 >   menu item 2 >   menu item 3 >   menu item 6.1   menu item 4 >   menu item 6.2   menu item 5 >   menu item 6.3 [ menu item 6 > ] menu item 6.4  Is this possible? I cannot find the code that determines the top of the new div that is being displayed (probably due to my newness to jQuery & Superfish). But any pointers would be greatly appreciated!  Thanks in advance,  Jacco