您现在的位置是：网站首页 > 心得笔记
superfish多级下拉菜单插件的应用
简介superfish是一款可以制作多级下拉菜单的jquery插件，支持水平和垂直方向的菜单，下拉的菜单不会被标签select遮挡，支持动态下拉效果，如垂直向下伸展，支持阴影效果（IE6除外），用户可定制样式。
运行效果
1、引入js和css
<link rel="stylesheet" type="text/css" href="/js/superfish-master/css/superfish.css" /> <link rel="stylesheet" type="text/css" href="/js/superfish-master/css/superfish-vertical.css" /> <link rel="stylesheet" type="text/css" href="/js/superfish-master/css/superfish-navbar.css" /> <script type="text/javascript" src="/js/superfish-master/js/jquery.js"></script> <script type="text/javascript" src="/js/superfish-master/js/hoverIntent.js"></script> <script type="text/javascript" src="/js/superfish-master/js/superfish.js"></script>
2、html代码
<div id="main"> <div class="demo"> <h3>Demo1：横向菜单</h3> <ul class="sf-menu"> <li><a href="#">首页</a></li> <li><a href="#">心得笔记</a> <ul> <li><a href="#">技术</a> <ul> <li><a href="#">前端</a></li> <li><a href="#">后端</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Java</a></li> </ul> </li> <li><a href="#">服务器</a></li> </ul> </li> <li><a href="#">畅谈一番</a></li> <li><a href="#">留言</a></li> <li><a href="#">娱乐</a> <ul> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <li><a href="#">综艺节目</a></li> </ul> </li> <li><a href="#">财经</a></li> </ul> </li> <li><a href="#">新闻</a> <ul> <li><a href="#">娱乐新闻</a></li> <li><a href="#">体育新闻</a></li> <li><a href="#">财经新闻</a></li> <li><a href="#">国际新闻</a></li> </ul> </li> <li><a href="#">生活</a> <ul> <li><a href="#">明星</a></li> <li><a href="#">电影</a> <ul> <li><a href="#">动作</a></li> <li><a href="#">科幻</a></li> <li><a href="#">恐怖</a></li> </ul> </li> <li><a href="#">电视</a></li> <li><a href="#">视频</a></li> <li><a href="#">大片</a></li> <li><a href="#">综艺</a></li> </ul> </li> <li><a href="#">心情</a></li> </ul> </div> <div class="clear"></div> <br/><br/><br/> <div class="demo"> <h3>Demo2：纵向菜单</h3> <ul class="sf-menu sf-vertical"> <li><a href="#">首页</a></li> <li><a href="#">心得笔记</a> <ul> <li><a href="#">技术</a> <ul> <li><a href="#">前端</a></li> <li><a href="#">后端</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Java</a></li> </ul> </li> <li><a href="#">服务器</a></li> </ul> </li> <li><a href="#">畅谈一番</a></li> <li><a href="#">留言</a></li> <li><a href="#">娱乐</a> <ul> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <li><a href="#">综艺节目</a></li> </ul> </li> <li><a href="#">财经</a></li> </ul> </li> <li><a href="#">新闻</a> <ul> <li><a href="#">娱乐新闻</a></li> <li><a href="#">体育新闻</a></li> <li><a href="#">财经新闻</a></li> <li><a href="#">国际新闻</a></li> </ul> </li> <li><a href="#">生活</a> <ul> <li><a href="#">明星</a></li> <li><a href="#">电影</a> <ul> <li><a href="#">动作</a></li> <li><a href="#">科幻</a></li> <li><a href="#">恐怖</a></li> </ul> </li> <li><a href="#">电视</a></li> <li><a href="#">视频</a></li> <li><a href="#">大片</a></li> <li><a href="#">综艺</a></li> </ul> </li> <li><a href="#">心情</a></li> </ul> </div> <div class="clear"></div> <div class="demo"> <h3>Demo3：横向菜单-条状子菜单</h3> <ul class="sf-menu sf-navbar"> <li><a href="#">首页</a></li> <li><a href="#">心得笔记</a> <ul> <li><a href="#">技术</a> <ul> <li><a href="#">前端</a></li> <li><a href="#">后端</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Java</a></li> </ul> </li> <li><a href="#">服务器</a></li> </ul> </li> <li><a href="#">畅谈一番</a></li> <li><a href="#">留言</a></li> <li><a href="#">娱乐</a> <ul> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <li><a href="#">综艺节目</a></li> </ul> </li> <li><a href="#">财经</a></li> </ul> </li> <li><a href="#">新闻</a> <ul> <li><a href="#">娱乐新闻</a></li> <li><a href="#">体育新闻</a></li> <li><a href="#">财经新闻</a></li> <li><a href="#">国际新闻</a></li> </ul> </li> <li><a href="#">生活</a> <ul> <li><a href="#">明星</a></li> <li><a href="#">电影</a> <ul> <li><a href="#">动作</a></li> <li><a href="#">科幻</a></li> <li><a href="#">恐怖</a></li> </ul> </li> <li><a href="#">电视</a></li> <li><a href="#">视频</a></li> <li><a href="#">大片</a></li> <li><a href="#">综艺</a></li> </ul> </li> <li><a href="#">心情</a></li> </ul> </div> <br/> <br/> <br/> </div>
3、css
<style type="text/css">
.demo{padding:40px 80px; margin:30px auto}
.demo h3{line-height:30px; font-size:14px}
.clear{clear:left}
</style>4、js调用插件
<script type="text/javascript">
$(function(){//应用superfish插件。
$("ul.sf-menu,ul.sf-navbar").superfish();
$("ul.sf-vertical").superfish({
hoverClass: 'sfHover', //当鼠标移动到菜单上的样式 .sfHover是插件定义好的
pathClass: 'overideThisToUse', //the class you have applied to list items that lead to the current page
pathLevels: 1, // the number of levels of submenus that remain open or are restored using pathClass
delay: 300, //当鼠标移出子菜单后能继续显示的毫秒数
animation: {opacity:'show'}, // 相当于jQuery的$ .animate()方法
speed: 'normal', // 动画速度. 相当于 jQuery的$ .animate() 方法的第二个参数
autoArrows: true, // if true, arrow mark-up generated automatically = cleaner source code at expense of initialisation performance
dropShadows: true, // 菜单是否有阴影效果，默认 ture 有阴影
disableHI: false, // set to true to disable hoverIntent detection
onInit: function(){}, // Superfish 初始化完成后的回调函数 'this' 代表包含的ul标签
onBeforeShow: function(){}, // 开始展开动画之前的回调函数 'this' 代表将要开始被展开的 ul 标签
onShow: function(){}, // 一旦展开动画完成时的回调函数 'this' 代表被展开的 ul 标签
onHide: function(){} // 当子菜单关闭时的回调函数 'this' 代表刚刚被关闭的ul标签
});
});
</script>
5、插件包下载地址
superfish官网：http://users.tpg.com.au/j_birch/plugins/superfish/