基于jQuery的菜单

平民王子

浏览: 287013 次
性别:
来自: 深圳

最近访客更多访客>>

sunchi1997

q123q

rainman_zjd

anitaihua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery CSS JavaScript HTML JSP

JSP代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>JQuery实战-菜单效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
	</head>
	<body>
		<ul>
			<li class="main">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="main">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
		<br />
		<br />
		<br />
		<ul>
			<li class="hmain">
					<a href="#">菜单项1</a>
				<ul>
					<li>
						<a href="#">子菜单项11</a>
					</li>
					<li>
						<a href="#">子菜单项12</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项2</a>
				<ul>
					<li>
						<a href="#">子菜单项21</a>
					</li>
					<li>
						<a href="#">子菜单项22</a>
					</li>
				</ul>
			</li>
			<li class="hmain">
				<a href="#">菜单项3</a>
				<ul>
					<li>
						<a href="#">子菜单项31</a>
					</li>
					<li>
						<a href="#">子菜单项32</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

JS代码

$(document).ready(function(){
	$(".main>a").click(function(){
		//找到子菜单项对应的子菜单,即下一个兄弟节点
		var ulNode = $(this).next("ul");
		/* 第一种显示隐藏*/
		/*if(ulNode.css("display") == "none"){
			ulNode.css("display" , "block");
		}else {
			ulNode.css("display","none");
		}*/
		
		
		/* 第二种显示和隐藏 */
		/*if(ulNode.css("display") == "none"){
			ulNode.show("200");
		}else {
			ulNode.hide("slow");
		}*/
		
		/* 第三种显示和隐藏 */
		//ulNode.toggle("200");
		
		/* 第四种显示和隐藏 */
		if(ulNode.css("display") == "none"){
			ulNode.slideDown("200");
		}else {
			ulNode.slideUp("200");
		}
		
		/* 第五种显示和隐藏 */
		//ulNode.slideToggle("500");
		
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});
/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

CSS代码

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {
	background-image: url(../images/title.gif);
	background-repeat: repeat-x;
	width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}

效果图片