jquery导航菜单

今天在网上去查了一下导航菜单的制作。终于看见用jQuery实现导航菜单的代码,于是转载过来。首先给出二级导航菜单的实现

menu-jquery.html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0073)http://www.neoease.com/tutorials/wordpress-menubar/wordpress-menubar-6.1/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<META http-equiv=Content-Type content="text/html; charset=gb2312"></meta>
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="menu.js" type="text/javascript"></script>
		<link type="text/css" href="style.css" type="text/css" rel="stylesheet"></link>
	</head>
	
	<body>
		<div id="container">
		<div id="menubar">
			<ul class="menus" id="menus">
				<LI class="current-cat"><A title=Home href="http://www.neoease.com/tutorials/wordpress-menubar/">All demos</A> </LI>
				<li><a href="javascript:void(0);">Java</a>
					<ul class="children">
						<li><a>Java视频</a></li>
						<LI ><A title="View all posts filed under C#" 
						href="javascript:void(0);">Java教材</A> </LI>
					</ul>
				</li>
			</ul>
		</div>
		</div>
	</body>
</html>


style.css文件代码
/*****让UL下面的LI全部以一字型向左浮动*****/
#menubar UL.menus LI {
	FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none
}

#menubar UL.menus LI A {
	PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #67ace5; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}

#menubar UL.menus UL {
	POSITION: absolute
}

#menubar UL.menus LI.current-cat A {
	BACKGROUND: #5495cd
}

#menubar UL.menus LI A:hover {
	BACKGROUND: #4281b7
}

#menubar UL.children {
	PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

#menubar UL.children LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}

#container {
	MARGIN: 150px auto 0px; WIDTH: 400px; TEXT-ALIGN: left
}

#menubar UL.children LI A {
	WIDTH: 100px
}


后面调用的jQuery.js和menu.js都以附件上传供下载

你可能感兴趣的:(html,jquery,css,wordpress)