jQuery菜单插件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、1.首先,在页面中引入Jquery和Superfish文件
<scriptsrc="Jquery.js"type="text/javascript"><!--mce:0--></script> <scriptsrc="superfish.js"type="text/javascript"><!--mce:1--></script>
2、2.其次,用ulli做菜单内容
<ulclass="sf-menu"> <li><ahref="#aa">menuitemthatisquitelong</a></li> <liclass="current"> <ahref="#ab">menuitem→</a> <ul> <liclass="current"><ahref="#">menuitem</a></li> <li><ahref="#aba">menuitem</a></li> <li><ahref="#abb">menuitem</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(){}//子菜单隐藏时回调函数
});
});
以上所述就是本文的全部内容了,希望大家能够喜欢。