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的朋友一点学习经验小结
Nov 23 Javascript
js日期时间补零的小例子
Mar 05 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
ECMAScript6块级作用域及新变量声明(let)
Jun 12 Javascript
基于javascript编写简单日历
May 02 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 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高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
JavaScript判断变量是对象还是数组的方法
2014/08/28 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
基于Python的接口测试框架实例
2016/11/04 Python
使用Python生成XML的方法实例
2017/03/21 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python小进度条显示代码
2019/03/05 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
django model object序列化实例
2020/03/13 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
日期和时间问题
2015/01/04 面试题
历史学专业推荐信
2013/11/06 职场文书
项目合作计划书
2014/01/09 职场文书
大学校庆邀请函
2014/01/11 职场文书
低碳环保口号
2014/06/12 职场文书
中国梦读书活动总结
2014/07/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
项目负责人岗位职责
2015/02/15 职场文书