两个导航菜单练习

刚进公司不久,新人的任务也不是很多.今天用空闲的时间写了两个不同样式的导航菜单,一个竖的,一个横的,话不多说直接给出代码,如果css或jquery有用的不到位之处,请看贴的园友们指出,共同进步.

竖向导航菜单:

CSS如下navigation.css

#navigation {
	200px;
}
#navigation ul {
	list-style:none;
	margin:0;
	padding:0;
}
#navigation li {
	border-bottom:1px solid #ed9f9f;
}
#navigation li a:link, #navigation li a:visited {
	font-size:90%;
	display:block;
	padding:0.4em 0 0.4em 0.5em;
	border-left:12px solid #711515;
	border-right:1px solid #711515;
	background-color:#b51032;
	color:#ffffff;
	text-decoration:none;
}

#navigation li a:hover {
	background-color:#711515;
	color:#ffffff;
}
#navigation ul ul {
	margin-left:12px;
}
#navigation ul ul li {
	border-bottom:1px solid #711515;
	margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
	background-color:#ed9f9f;
	color:#711515;
}
#navigation ul ul a:hover {
	background-color:#711515;
	color:#fff;
}

HTML如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/navigation.css" />
		<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
	    <script type="text/javascript">
	    	$(function() {
				var $submenus = $('.submenu');
				$submenus.hide();
				$submenus.prev().click(function() {
					$submenus.slideUp('fast');
				    $mymenu = $(this).next();
					if($mymenu.is(':hidden')) {
						$mymenu.slideDown('fast');
					} else {
						$mymenu.slideUp('fast');
					}
				});
			});
	    </script>
	</head>
	<body>
		<div id="navigation">
			<ul>
				<li><a href="#">Recipes</a>
					<ul class="submenu">
						<li><a href="#">Starters</a></li>
						<li><a href="#">Main Courses</a></li>
						<li><a href="#">Desserts</a></li>
					</ul>
				</li>
				<li><a href="#">Contact Us</a>
					<ul class="submenu">
						<li><a href="#">Andrew</a></li>
						<li><a href="#">Bruce</a></li>
						<li><a href="#">Simpzon</a></li>
					</ul>
				</li>
				<li><a href="#">Articles</a></li>
				<li><a href="#">Buy Online</a></li>
			</ul>
		</div>
	</body>
</html>

效果还算可以,这个例子的样式来自sitepoint,css精粹(第三版)中的一个例子,我再此基础上加了些jquery用于子菜单的下拉收起效果

//-------------------------------------------------------------------

横向导航菜单

CSS如下horizontalNav.css

body {
	padding:1em;
	font-family:"Times New Roman", Times, serif;
}
#navigation {
	font-size:90%;
}
#navigation ul {
	list-style:none;
	margin:0;
	padding:0;
	padding-top:1em;
}
#navigation li {
	float:left;
}
#navigation .submenu {
	border-top:1px solid #ffffff;
	padding-top:0;
}
#navigation .submenu li {
	float:none;
	border-bottom:1px solid #fff;
	border-right:0px;
}
#navigation a {
	display:block;
	padding:0.4em 1em 0.4em 1em;
	font-weight:bold;
	text-decoration:none;
	color:#ffffff;
	7em;
	border-right:2px solid #dafce0;
}
#navigation .submenu a {
	border-left:10px solid #d3de4e;; 
	6em;
}

#navigation a:link, #navigation a:visited {
	background-color:#388d29;;
}

#navigation a:hover {
	color:#388d29;
	background-color:#c0e296;
	text-decoration:underline;
}

HTML如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	    <link rel="stylesheet" type="text/css" href="css/horizontalNav.css" />
		<script type="text/javascript" src="js/jquery-1.4.1.min.js" ></script>
		<script type="text/javascript">
			$(function() {
				$('.submenu').hide();
			    $('.submenu').prev().mouseenter(function() {
					var $submenu = $(this).next();
					$submenu.slideDown('normal').mouseleave(function(){
							$(this).slideUp('normal');
					});
				});
			});
		</script>
	</head>
	<body>
		<div id="navigation">
			<ul>
				<li><a href="#">Recipes</a>
					<ul class='submenu'>
						<li><a href="#">China Style</a></li>
						<li><a href="#">US Style</a></li>
						<li><a href="#">Japan Style</a></li>
					</ul>
				</li>
				<li><a href="#">Contact</a></li>
				<li><a href="#">Articles</a></li>
				<li><a href="#">Buy Online</a>
					<ul class='submenu'>
					  <li><a href="#">Amazon</a></li>
					  <li><a href="#">SitePoint</a></li>
					  <li><a href="#">Apress</a></li>
					  <li><a href="#">O'relly</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

这里有个问题,关于导航菜单子菜单的展开和收缩,鼠标移到顶级菜单,展开其子菜单,如果鼠标再进入子菜单然后离开的话,子菜单能正常的收缩.但是如果只是划过顶级菜单,其子菜单展开后就不缩回了,我想了半天,没想出个好点的解决方案,所以如果有朋友知道怎么做,不妨回复教我一下,也让大家学习学习.

点我下载导航菜单代码