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对象的property和prototype是这样一种关系
Mar 24 Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
百度地图api如何使用
2015/08/03 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python生成大写32位uuid代码
2020/03/03 Python
pycharm的python_stubs问题
2020/04/08 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
婚礼新郎父母答谢词
2014/01/16 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
微电影大赛策划方案
2014/06/05 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
golang实现浏览器导出excel文件功能
2022/03/25 Golang