网站开发常用jQuery插件总结(十)菜单插件superfish

网站对于菜单的依赖其实并不是很大，我们完全可以不使用菜单来设计网站，显示网站内容。但是如果网站的分类太多，“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容。superfish插件就是用于实现菜单的功能。但是在使用superfish时，与自身网站整合、superfish样式设置是不可避免的。因为官方只给出了怎么使用插件，并且提供了一个简单的样式。如下图：




在我以前的使用中，superfish不符合我的需求，所以我对superfish的样式进行了修改。在本文中，我会提到怎样修改superfish的样式，只是简单的举个例子，不注重颜色的搭配。

一.superfish插件功能

实现下拉式菜单功能。主要用于水平菜单、垂直菜单。

二.superfish官方地址

http://users.tpg.com.au/j_birch/plugins/superfish/examples/vertical/
官方地址中有superfish插件的用例，用例很简单。但是在修改样式时确实有些问题，下文会提到样式的修改。

三.superfish使用方法

1.文件引用

如果是水平菜单，只需要引用下面四个文件。jquery文件，菜单的css样式文件与菜单的js功能文件。

<link rel="stylesheet" media="screen" href="../dist/css/superfish.css">
<script src="jquery.js"></script>
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

如果是垂直菜单，还需要引用垂直菜单的样式文件。

<link rel="stylesheet" media="screen" href="superfish-vertical.css">

2.自定义样式。如果我们需要修改superfish样式，主要是修改superfish.css，我们也可以在当前页面覆盖superfish.css中存在的样式。在本例自定义样式中，修改了官方的颜色，去掉了阴影。如下：

body {
max-width: 40em;
font-family:微软雅黑;
}
#example{
margin-bottom:220px;
}
/**以下是自定义的菜单的样式**/
.sf-menu ul{
box-shadow:none;
}
.sf-menu li {
background: #dbeef7;
white-space: nowrap;
-webkit-transition: background .2s;
transition: background .2s;
font-size:14px;
}
.sf-menu a {
border:none;
padding: .75em 1em;
text-decoration: none;
zoom: 1;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-top:6px;
padding-right:6px;
}
.sf-menu li:hover,.sf-menu li.sfhover{
background:#e6f1f6;
}
/**二级菜单**/
.sf-menu ul li {
background: #dbeef7;
}
/**三级菜单**/
.sf-menu ul ul li {
background: #dbeef7;
}

3.js代码。初始化菜单使用的js代码非常简单。只需要几句话就可以实现菜单功能。

function initsuperfish(){
//animation动画效果，delay:菜单显示的延迟时间。
//也可以简单的一句话实现 $('#example').superfish();
$('#example').superfish({
animation: {height:'show'},
delay:       1200
});
}
$(function(){
$('#horizontal').click(function(){;$('#example').removeClass('sf-vertical'); });
$('#vertical').click(function(){  $('#example').addClass('sf-vertical'); });
initsuperfish();
});

4.使用的html。superfish主要使用html源码ul来实现菜单的关联功能。html代码有点多，就不贴出来了。有兴趣的可以看下面的“菜单测试”。

修改后的样式为：

在线演示：菜单插件superfish