您现在的位置: 365建站网 > 365文章 > jQuery多级菜单插件superfish使用指南

jQuery多级菜单插件superfish使用指南

文章来源:365jz.com     点击数:286    更新时间:2017-08-09 16:10   参与评论

Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍。你可能用Superfish实现多种菜单效果。

下载地址:http://plugins.jquery.com/project/Superfish

文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Superfish的一些特点及效果:

使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
支持淡入淡出动画
支持键盘响应
对含有子菜单的母菜单自动加入提示箭头
支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
可选回调js函数

使用说明

1、首先,在页面中引入Jquery和Superfish文件

</>code

  1. <script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
  2. <script src="superfish.js" type="text/javascript"><!--mce:1--></script>

2、其次,用ul li做菜单内容

</>code

  1. <ul class="sf-menu">
  2. <li><a href="#aa">menu item that is quite long</a></li>
  3. <li class="current">
  4. <a href="#ab">menu item →</a>
  5. <ul>
  6. <li class="current"><a href="#">menu item</a></li>
  7. <li><a href="#aba">menu item</a></li>
  8. <li><a href="#abb">menu item</a></li>
  9. </ul>
  10. </li>
  11. </ul>

3、最后,创建初始化菜单并设置效果

</>code

  1. $(document).ready(function(){
  2. $("ul.sf-menu").superfish({
  3. hoverClass: 'sfHover', //当鼠标掠过时的class
  4. pathClass: 'overideThisToUse', // 激活的菜单项的class
  5. pathLevels: 1, // 菜单级数
  6. delay: 800, // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
  7. animation: {opacity:'show'}, // 动画效果,参考Jquery的动画jQuery's .animate()
  8. speed: 'normal', // 动画速度, 参考Jquery的动画jQuery's .animate()
  9. dropShadows: true, // 阴影效果,关闭用‘false'
  10. onInit: function(){}, // 初始化的回调函数
  11. onBeforeShow: function(){}, // 子菜单显示前回调函数
  12. onShow: function(){}, // 子菜单显示时回调函数
  13. onHide: function(){} // 子菜单隐藏时回调函数
  14. });
  15. });

以上所述就是本文的全部内容了,希望大家能够喜欢。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (286人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号