0

我在页面上添加了Superfish Menu jquery 插件。我想做的是让它在鼠标悬停时向上滚动,而不是像大多数菜单那样向下滚动。像 Windows 开始按钮之类的东西。任何的想法?

Superfish 的默认选项:

$.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 示例在这里

4

1 回答 1

0

所以答案是这样的,来自评论中提到的链接:

您创建了一种即插即用的风格,不会干扰核心 js 功能。所以你要做的第一件事是:

您必须创建当前 superfish.css 的新副本

  1. 更改以下内容:

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

    .sf-menu ul ul {
        top: 0;
        left: 100%;
    }
    
  3. 添加这些:

    .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. 让你的 html 菜单看起来像这样。请注意,您正在创建一个 div,这将充当您的第一个菜单项的新占位符,因为在步骤 1-3 中所做的 css 样式更改已将菜单配置为 2 及以后(注意 climer 和 icon_image_sml 类,这将是在第 5 步中用于添加颜色并将外观与菜单的其余部分统一):

    <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. 制作一个新的 css 样式表并添加以下内容(这对第一个菜单项进行样式设置):

    .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. 如果您对 css 样式有更多了解,请随时对上述参数进行任何必要的更改以适应您的菜单外观。

于 2013-10-07T15:11:13.527 回答