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(){}//子菜单隐藏时回调函数 }); });
以上所述就是本文的全部内容了,希望大家能够喜欢。