概述
Superfish 是一个增强的 Suckerfish-style menu jQuery 插件，他在一个现有的纯 CSS drop-down menu (没有使用javascript，所以用户体验较差)基础上加上了改进，增强了美感：
- Suckerfish-style 鼠标悬浮支持IE6. 默认会在目标标签加上 “sfHover” 的Class，但是这个可以通过选项修改。
- Timed delay on mouseout（鼠标移出延时消失）更宽容的鼠标滑行错误，默认是800毫秒，可以通过选项重新设置。
- 次级菜单Animation显示。默认为“渐入”，可以通过 animate 功能的第一参数修改动画的显示方式，动画显示的速度也是可以定制的，默认为“normal”。
- 键盘操作Keyboard accessibility. 通过 Tab 键可以历遍链接和相关的子菜单，根据需要会显示隐藏。Tab through the links and the relevant sub-menus are revealed and hidden as needed
- 支持 hoverIntent plugin. Superfish 会自动探测到 Brian Cherne 的 hoverIntent plugin 并且可以使用它的高级鼠标经过动作 (mouseout delays 是 Superfish 控制的而不是 hoverIntent). 这只是一个选择，但是一个好选择。 例如在这个页面正在使用的是 hoverIntent. 但是如果因为一些原因你让这个页面里的 hoverIntent 为其他的插件所用而不想 Superfish 去调用它，你可以设置 disableHI 为 true 就可以了。
- Indicates the presence of sub-menus（次级菜单标记） 自动在相关锚点添加一个箭头图片。箭头图片完全通过CSS来调控。你可以通过“autoArrows”选项关闭自动显示箭头标记。
- drop shadows（下拉菜单阴影） 对有这方面支持的浏览器有效，不支持Internet Explorer 6. 可以通过设置关闭 shadows。
- 能 show the path to your current page（显示当前页面） 尽管是闲置的菜单，最简单理解的方法还是去看 nav-bar 示例.
- Optional callback functions. The 'this' keyword within the handlers you attach will refer to the animated ul sub-menu. From version 1.4 there are now three other optional callbacks allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.
快速向导
- 从一个纯的CSS下拉菜单开始，就像你要建立一个 Suckerfish menu - ie。对每一个 li:hover, 增加一个相对的 li.sfHover 选择器.为了使这一步容易，有跨浏览器的CSS多种类型的菜单在本网站下载部分提供的文件。
- 在网页的 head 部分应用 superfish.js 文件。
<script type="text/javascript" src="superfish.js"></script> - 通过控制 ul 的 class
调用 superfish() 。
这儿有太多的客户设置，你可以在选项标签中找到他们。<script type="text/javascript"> $(document).ready(function() { $('ul.sf-menu').superfish(); }); </script>
选项
Superfish的默认设置选择:
$.fn.superfish.defaults = {
hoverClass: 'sfHover', // 添加给 hover list 的类名
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, // 子菜单消失效果的延续时间，单位毫秒。
animation: {opacity:'show'}, // an object equivalent to first parameter of jQuery’s .animate() method
speed: 'normal', // 动画效果的速度. 同jQuery’s .animate() 第二个参数方法。
autoArrows: true, // 如果是 true, 自动产生箭头标记
dropShadows: true, // 设置为 false 可以关闭下来菜单的阴影效果。
disableHI: false, // 设置为 true 会关闭 hoverIntent 插件探测。
onInit: function(){}, // callback function fires once Superfish is initialised – 'this' is the containing ul
onBeforeShow: function(){}, // callback function fires just before reveal animation begins – 'this' is the ul about to open
onShow: function(){}, // callback function fires once reveal animation completed – 'this' is the opened ul
onHide: function(){} // callback function fires after a sub-menu has closed – 'this' is the ul that just closed
};你大可不必理会完全理会这些设置选项，例如:
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// 初始化 Superfish
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish({
delay: 1000, // 鼠标移开后持续1秒效果
animation: {opacity:'show',height:'show'}, // 渐入和滑落效果
speed: 'fast', // 快速效果
autoArrows: false, // 不生成嵌套箭头标识
dropShadows: false // 不显示下来菜单的阴影效果
});
});
</script>示例
效果:
代码:
简单的应用，非常适合初级使用者:
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// initialise Superfish
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>效果:
子菜单会显示在 <select> 元素上面,如果需要的话.
代码:
如果你的布局中有子菜单重叠在 <select> 元素之上，但是由于 IE6 浏览器的 BUG，select 元素会覆盖在子菜单上面，你可以通过 Brandon Aaron’s bgIframe plugin 修复，像这样：
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// initialise Superfish
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});
});
</script>效果:
代码:
创建一个垂直的菜单，To create an all-vertical menu, 在根 UL 除了sf-menu 类以外在加一个 sf-vertical (空格隔开， eg. class="sf-menu sf-vertical"), 初始化设置. 但是在这个例子里我仍然会通过一些设置演示滑落效果和长时间延迟推出！:
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
<link rel="stylesheet" type="text/css" media="screen" href="superfish-vertical.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// initialise Superfish
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish({
animation: {height:'show'}, // slide-down effect without fade-in
delay: 1200 // 1.2 second delay on mouseout
});
});
</script>效果:
Notice that if you disable JavaScript this menu degrades very nicely – as do all the other examples.
The code:
To create a horizontal nav-bar with a horizontal second tier and optional vertical third tier, simply include the superfish-navbar.css file after the main superfish.css file and add the class sf-navbar to the parent ul along with the usual sf-menu class (space-separated, eg. class="sf-menu sf-navbar"), and initialise as normal.
A nice option to add to this types of menu is restoring the relevant sub-menu when the user is not exploring other sub-menus. This can be done by telling Superfish the name of the class you are adding to the relevant <li> elements to indicate the path to the current page. I often have the server add the class name 'current' for this purpose, so I would initialise this menu thusly:
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
<link rel="stylesheet" type="text/css" media="screen" href="superfish-navbar.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// initialise Superfish
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish({
pathClass: 'current'
});
});
</script>The result:
The code:
This menu uses the optional Supersubs plugin (currently beta) to make the sub-menu widths variable. The fixed width set in the CSS is overridden and all menu items within a sub-menu are altered to match the width of their widest sibling. This is most commonly used to make all menu items fit on one line so that they are all of equal height.
Note that Supersubs needs to be called before Superfish in the initialisation chain, as shown below:
//link to the CSS files for this menu type
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link to the JavaScript files (hoverIntent is optional)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
<script type="text/javascript" src="supersubs.js"></script>
// initialise Superfish
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
});
</script>Frequently Asked Questions
- Superfish插件与那个版本的jQuery兼容?
- jQuery v1.2 和更高版本.
- Superfish 插件还依赖其他插件吗？
- 不.
- Superfish 插件与其他插件会有冲突吗？
- 会 – 这儿有几个很有用的插件，也许你可以用都在你的菜单里：
- HoverIntent. The nicest thing you can do for your menu is include Brian Cherne’s hoverIntent plugin in your page and Superfish will automatically use it to make the user interaction more pleasing.
- $.event.special.hover. A new and improved special event implementation Brian Cherne’s "hoverIntent" plugin. $.event.special.hover simply overrides jQuery’s regular hover() function, so just link to this plugin and Superfish will use it automatically.
- Supersubs. If you want the submenu widths to change to suit their contents, you can add the Supersubs plugin as shown in the example of the same name on this site.
- BgIframe. Another plugin you may need is Brandon Aaron’s bgIframe plugin. This will solve the Internet Explorer bug described in the ‘bgIframe’ example on this site. 90% of people will not need this (yes I made up that statistic).
- 我怎样才能让我的菜单更好看？
- 这个只是演示一个基本的设计样式，你可以在这个基础上去设计建议一个适合于你的项目的样式。我强力建议首先在IE6里测试以至于更新的浏览器，这样可以发现IE6的bug然后制定相应的策略。
- 如果出错了怎么办？
- 可能99.9%的情况都是由CSS引起的。关闭javascript让菜单在纯CSS的情况下运行，如果你不是一个 CSS 高手那么我建议你根据先前介绍的方法去做。例如，从演示CSS开始，一点点的修改，在多种浏览器里测试。
- 在IE里，子菜单出现在主DIV 的底部。为什么？怎么解决？
- 猜想这是个很普遍的问题，这是由于 IE 的 Z-index 的 BUG 引起的，而这个问题的本身不在于 Superfish，所有你不需要对superfish 做任何改动，相反的，你需要重新审视你的主网页元素的CSS结构（常常是头部层与主层）。或者阅读下面这篇文章去找到解决方法。 IE z-index bug fix for Superfish.
- What if I still need help?
- If you need help with the jQuery/JavaScript aspect of the plugin, post a message to the General jQuery Google Group with the word “Superfish” somewhere in the subject line and I will try to help you as soon as possible. There are many other Superfish users on the list who may be able to help you also.
- If your issues are related to styling and CSS, then you will need to post your questions to a purely CSS related group instead. CSS for Superfish is mainly just regular Suckerfish-style dropdown menu code so there are plenty of resources out there to learn from.
- Can I count on Superfish being supported into the future?
- Yes, it’s here for the long haul – or at least as long as it’s relevant. I will also be adding further features in the form of modular optional add-on plugins.
Download
A zip archive for Superfish is available here: Superfish-1.4.8.zip.
The zip archive contains the following files:
- example.html
- superfish.css
- superfish-vertical.css
- superfish-navbar.css
- jquery-1.4.x.min.js
- superfish.js
- supersubs.js
- arrows-ffffff.png – alpha transparent 8-bit png arrow image blends with your colour scheme – degrades to solid for IE6
- shadow.png – alpha transparent 32-bit png shadow image
- changelog.txt
Downloads for other plugins that can enhance a Superfish menu are available off-site:
- hoverIntent plugin by Brian Cherne
- bgIframe plugin by Brandon Aaron
Support
Support for the JavaScript component of the Superfish plugin is available through the jQuery Forum. Post a message to it with the word “Superfish” somewhere in the subject line. There are many other Superfish users on the list who may be able to help you. This is a very active mailing list to which many jQuery developers and users subscribe.
Most people’s issues relate to the actual CSS of the menu, which are best discussed elsewhere on a dedicated CSS forum.