superfish的应用

多级下拉菜单：superfish的应用

superfish是一款可以制作多级下拉菜单的jquery插件，支持水平和垂直方向的菜单，下拉的菜单不会被标签select遮挡，支持动态下拉效果，如垂直向下伸展，支持阴影效果（IE6除外），用户可定制样式。

查看演示 下载源码

主要特性：

如何使用？

1、准备Javascript及插件和CSS样式文件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/superfish.js"></script> 
<link rel="stylesheet" type="text/css" href="css/superfish.css" /> 

2、XHTML。

<ul class="sf-menu"> 
     <li><a href="#">首页</a></li> 
     <li><a href="#">新闻</a> 
          <ul> 
             <li><a href="#">国内</a> 
                <ul> 
                   <li><a href="#">menu item1</a></li> 
                   <li><a href="#">menu item2</a> 
                        <ul> 
                             <li><a href="#">Sub menu1</a></li> 
                             <li><a href="#">Sub menu2</a></li> 
                             ... 
                         </ul> 
                    </li> 
                    <li><a href="#">menu item3</a></li> 
                 </ul> 
              </li> 
              <li><a href="#">国际</a></li> 
              <li><a href="#">社会</a></li> 
              ... 
          </ul> 
      </li> 
      <li><a href="#">短信</a> 
             <ul> 
                 <li><a href="#">短信</a></li> 
                 <li><a href="#">彩信</a></li> 
                 <li><a href="#">彩铃</a></li> 
                 <li><a href="#">SP</a></li> 
             </ul> 
      </li> 
      ... 
</ul> 

一定要注意XHTML的结构，上述代码中“...”是限于篇幅，表示相同的代码结构重复n次。

3、应用superfish插件。

$(function(){ 
   $("ul.sf-menu").superfish(); 
}); 

superfish插件常用参数一览表

参数	描述	默认值
hoverClass	鼠标滑向菜单项的样式	'sfHover'
pathClass	设置当前项的样式，页面初始一个当前选中状态的样式	'overideThisToUse'
delay	鼠标离开下拉展开的菜单，等待关闭菜单的时间（毫秒）	800
animation	菜单展示效果	{opacity:'show'}
speed	设置菜单展开速度，可以为'slow','fast','normal'	'normal'
disableHI	设置为true时，则不支持hoverIntent插件	true

superfish插件还可以支持回调函数，支持hoverIntent插件，在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent，将disableHI设置为 "true"。

此外当遇到select标签时，为了不让下拉菜单被select遮挡，需要调用另一个插件：bgiframe，使用方法：

$("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});