jQuery菜单插件superfish使用指南


Posted in Javascript onApril 21, 2015

下载地址: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、1.首先,在页面中引入Jquery和Superfish文件

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

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

<ul class="sf-menu">
 <li><a href="#aa">menu item that is quite long</a></li>
 <li class="current">
    <a href="#ab">menu item →</a>
<ul>
 <li class="current"><a href="#">menu item</a></li>
 <li><a href="#aba">menu item</a></li>
 <li><a href="#abb">menu item</a></li>
</ul>
</li>
</ul>

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

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

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

Javascript 相关文章推荐
javascript 操作文件 实现方法小结
Jul 02 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
vue视频播放暂停代码
Nov 08 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 #Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 #Javascript
jQuery背景插件backstretch使用指南
Apr 21 #Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 #Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 #Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 #Javascript
jQuery验证插件validation使用指南
Apr 21 #Javascript
You might like
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JavaScript判断变量是否为空的自定义函数分享
2015/01/31 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
javascript 的变量、作用域和内存问题
2017/04/19 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python中for循环控制语句用法实例
2015/06/02 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
详解Python3 基本数据类型
2019/04/19 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
自荐信模版
2013/10/24 职场文书
植树节活动总结
2014/04/30 职场文书
个人求职自荐信范文
2014/06/20 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
2014年学生工作总结
2014/11/20 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL