Scroll up like Windows start button

Question

I have add Superfish Menu jquery plugin on a page. What I want to do, is to make it scroll up on mouse over and not scroll down as most menus do. Something like Windows start button. Any idea?

Superfish’s default options:

$.fn.superfish.defaults = {
  popUpSelector: 'ul,.sf-mega',      // selector within menu context to define the submenu element to be revealed
  hoverClass:    'sfHover',          // the class applied to hovered list items
  pathClass:     'overideThisToUse', // the class you have applied to list items that lead to the current page
  pathLevels:    1,                  // the number of levels of submenus that remain open or are restored using pathClass
  delay:         800,                // the delay in milliseconds that the mouse can remain outside a submenu without it closing
  animation:     {opacity:'show'},   // an object equivalent to first parameter of jQuery’s .animate() method. Used to animate the submenu open
  animationOut:  {opacity:'hide'},   // an object equivalent to first parameter of jQuery’s .animate() method Used to animate the submenu closed
  speed:         'normal',           // speed of the opening animation. Equivalent to second parameter of jQuery’s .animate() method
  speedOut:      'fast',             // speed of the closing animation. Equivalent to second parameter of jQuery’s .animate() method
  cssArrows:     true,               // set to false if you want to remove the CSS-based arrow triangles
  disableHI:     false,              // set to true to disable hoverIntent detection
  onInit:        $.noop,             // callback function fires once Superfish is initialised – 'this' is the containing ul
  onBeforeShow:  $.noop,             // callback function fires just before reveal animation begins – 'this' is the ul about to open
  onShow:        $.noop,             // callback function fires once reveal animation completed – 'this' is the opened ul
  onBeforeHide:  $.noop,             // callback function fires just before closing animation – 'this' is the ul about to close
  onHide:        $.noop,             // callback function fires after a submenu has closed – 'this' is the ul that just closed
  onIdle:        $.noop,             // callback function fires when the 'current' submenu is restored (if using pathClass functionality)
  onDestroy:     $.noop              // callback function fires after the 'destroy' method is called on the menu container
};

JSFiddlle example here.

Answer 1

So the answer goes like this, from the link mentioned in the comment:

You create a plug and play style where you don't interfere with the core js functionality. So the first thing you have to do is:

You have to create a new copy of the current superfish.css

1. change the following:

   .sf-menu ul {
       position: absolute;
       bottom: -999em;
       width: 10em; /* left offset of submenus need to match (see below) */
   }
   

2. remove this:

   .sf-menu ul ul {
       top: 0;
       left: 100%;
   }
   

3. add these:

   .sf-menu li:hover ul,
   .sf-menu li.sfHover ul {
       left: 0;
       bottom: 0.0em; /* match top ul list item height */
       z-index: 99;
   }
   ul.sf-menu li:hover li ul,
   ul.sf-menu li.sfHover li ul {
       bottom: -999em;
   }
   ul.sf-menu li li:hover ul,
   ul.sf-menu li li.sfHover ul {
       bottom:-20%; left:100%;
   }
   ul.sf-menu li li:hover li ul,
   ul.UP li li.sfHover li ul {
       top: -999em;
   }
   ul.sf-menu li li li:hover ul,
   ul.sf-menu li li li.sfHover ul {
       left: 10em; /* match ul width */
       top: 0;
   }
   

4. Make your html menu look like this. Notice you are creating a div, this will act as a new place holder for your first menu item because the css styling changes made in steps 1-3 has configured the menu for 2 and onward (notice the climer and icon_image_sml class, this will be used in step 5 for adding in color and unifying the look with the rest of the menu):

   <ul class="sf-menu" id="example">
       <li style='background:transparent;'>
           <div id="climber"><div class="icon_image_sml"></div></div>
           <a href="followed.html">menu item 1</a>
       <ul>
               <li> 
                      (..<and so forth>..)
               </li>
           </ul>
       </li>
   </ul>
   

5. Make a new css style sheet and add the following (this does styling to first menu item):

   .icon_image_sml {
       display:block;
   }
   
   #climber {
       width:40px;
       border-right:1px solid #777;
       height:28px;
       position:absolute;
       left:0px;
       top:0px;
       background-color:#A3B5E5;
   }
   
   #ie #climber {
       top:-12px;
   }
   

6. If you know more about css styling, feel free to make any necessary changes to the parameters above to fit how your menu looks.