WEB技术分享

主要特性：

如何使用？

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插件常用参数一览表

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

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

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

更多信息请查看superfish官网：http://users.tpg.com.au/j_birch/plugins/superfish/