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的IE和火狐的兼容性注意事项
Mar 17 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
JS比较两个数值的大小实例
Nov 25 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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版国家代码、缩写查询函数代码
2011/08/14 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
javascript回调函数详解
2018/02/06 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现程序的单一实例用法分析
2015/06/03 Python
Python修改MP3文件的方法
2015/06/15 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
python使用matplotlib绘制热图
2018/11/07 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
实习生个人找工作的自我评价
2013/10/30 职场文书
迎新生欢迎词
2015/01/23 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers