效果图:
说明:竖向点击主菜单会显示子菜单
横向鼠标移至主菜单会显示子菜单
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<title>JQuery[菜单效果]</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--CSS样式 -->
UL,LI {
list-style: none;
}
/* 竖向菜单的子菜单缩进
* 横向菜单的子菜单不缩进
*/
UL #item {
padding: 15;
/*但IE浏览器不能缩进*/
margin: 0;
}
UL {
padding: 0;
/*但IE浏览器不能缩进*/
margin: 0;
}
.mainMenu,.crossMenu {
font-size: 18px;
width: 170px;
}
/*子菜单样式*/
LI {
background-color: lightgreen;
}
A { /*取消链接的下划线*/
text-decoration: none;
/*子菜单缩进*/
padding-left: 15px;
display: block;
display: inline;
width: 70px;
/*在所有的链接加3个像素的上边距和下边距*/
padding-top: 3px;
padding-bottom: 3px;
}
.mainMenu A,.crossMenu A { /*主菜单链接为白色*/
color: hotpink;
}
.mainMenu LI A,.crossMenu LI A {
color: indigo;
}
/*主菜单下的UL全部隐藏*/
.mainMenu UL,.crossMenu UL {
display: none;
}
/*横向菜单*/
.crossMenu {
float: left;
font-size: 18px;
}
</style>
<!--JS代码 -->
$(function() {
$('.mainMenu > a').click(function() {
//找到主菜单项的子菜单项
var childMenu = $(this).next('ul');
childMenu.slideToggle();
});
$('.crossMenu').hover(
//卷帘效果
function() {
$(this).children('ul').slideToggle();
});
});
</script>
</head>
<!--JSP页面 -->
<body>
<!-- 竖向 -->
<ul>
<li class="mainMenu">
<a href="#">机构管理</a>
<ul id="item" class="item">
<li>
<a href="email.jsp">添加机构</a>
</li>
<li>
<a href="#">修改机构</a>
</li>
<li>
<a href="#">查询机构</a>
</li>
</ul>
</li>
<li class="mainMenu">
<a href="#">部门管理</a>
<ul id="item">
<li>
<a href="#">添加部门</a>
</li>
<li>
<a href="#">修改部门</a>
</li>
<li>
<a href="#">查询部门</a>
</li>
</ul>
</li>
<li class="mainMenu">
<a href="#">员工管理</a>
<ul id="item">
<li>
<a href="#">添加员工</a>
</li>
<li>
<a href="#">修改员工</a>
</li>
<li>
<a href="#">查询员工</a>
</li>
</ul>
</li>
</ul>
<br />
<hr />
<br />
<!-- 横向 -->
<ul>
<li class="crossMenu">
<a href="#">机构管理</a>
<ul>
<li>
<a href="#">添加机构</a>
</li>
<li>
<a href="#">修改机构</a>
</li>
<li>
<a href="#">查询机构</a>
</li>
</ul>
</li>
<li class="crossMenu">
<a href="#">部门管理</a>
<ul>
<li>
<a href="#">添加部门</a>
</li>
<li>
<a href="#">修改部门</a>
</li>
<li>
<a href="#">查询部门</a>
</li>
</ul>
</li>
<li class="crossMenu">
<a href="#">员工管理</a>
<ul>
<li>
<a href="#">添加员工</a>
</li>
<li>
<a href="#">修改员工</a>
</li>
<li>
<a href="#">查询员工</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
说明:
- show(),hide()方法可以用于显示或隐藏元素,没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值,或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。
- ⑥ toggle方法更为强大,可以省去判断元素是否显示、隐藏,直接让显示的元素隐藏起来,隐藏的元素显示出来。参数使用方法和show()和hide()相同;
- ⑦ slideDown、slideUp可以实现向下或向上卷动的效果,实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show(),hide()不同;
- ⑧ slideToggle和toggle达到类似的效果;