jQuery 菜单-原创手记-慕课网

一、垂直菜单的实现

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<link href="app.css" rel="stylesheet"/>		<script src="jquery-1.10.1.min.js"></script>		<script src="app.js"></script>	</head>	<body>		<ul>			<li class="main">				<a href="#">菜单1</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="main">				<a href="#">菜单2</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="main">				<a href="#">菜单3</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>		</ul>	</body></html>

ul,li{	list-style: none;}ul{	padding: 0;	margin: 0;}.main{	background-color: #666666;	background-repeat: repeat-x;	width: 100px;}li{	background-color: #eeeeee;}a{	text-decoration: none;	padding-left: 20px;	display: block;	width: 80px;	padding-top: 3px;	padding-bottom: 3px;}.main a{	color: white;}.main li a{	color: black;}.main ul{	display: none;}

$(document).ready(function(){	$(".main>a").click(function(){		var ulNode = $(this).next("ul");		ulNode.toggle("normal");	});});

二、水平菜单的实现

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8">		<title></title>		<link href="app.css" rel="stylesheet"/>		<script src="jquery-1.10.1.min.js"></script>		<script src="app.js"></script>	</head>	<body>		<ul>			<li class="main">				<a href="#">菜单1</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="main">				<a href="#">菜单2</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="main">				<a href="#">菜单3</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>		</ul>		<br />		<br />		<br />		<br />		<br />		<ul>			<li class="hmain">				<a href="#">菜单1</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="hmain">				<a href="#">菜单2</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>			<li class="hmain">				<a href="#">菜单3</a>				<ul>					<li><a href="#">子菜单1</a></li>					<li><a href="#">子菜单2</a></li>				</ul>			</li>		</ul>	</body></html>

ul,li{	list-style: none;}ul{	padding: 0;	margin: 0;}.main,.hmain{	background-color: #666666;	background-repeat: repeat-x;	width: 100px;}li{	background-color: #eeeeee;}a{	text-decoration: none;	padding-left: 20px;	display: block;	width: 80px;	padding-top: 3px;	padding-bottom: 3px;}.main a,.hmain a{	color: white;}.main li a,.hmain li a{	color: black;}.main ul,.hmain ul{	display: none;}.hmain{	float: left;	margin-right: 1px;}.main{	margin-top: 1px;}

$(document).ready(function(){	$(".main>a").click(function(){		var ulNode = $(this).next("ul");		ulNode.toggle("normal");	});		$(".hmain").hover(function(){		$(this).children("ul").slideDown();	},function(){		$(this).children("ul").slideUp();	});});