用 UL 制作的纵向导航菜单效果

导航菜单可以说是网站制作中最常见的工作,当然,由于他的重要性(基本上整个网站所有页面都会显示),所以,有不少设计师在上面花费了很多心血。本文介绍的是对纵向导航菜单的最简单的实现,相信明白了实现原理后,你可以制作出属于自己的精彩的导航效果,到时,可别忘了和大家共享哟!

用 UL 制作的纵向导航菜单效果 – 示例

 
<style type="text/css">
#navsite {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	font-weight: bold;
	width: 12em; 
	border-right: 1px solid #666; 
	padding: 0; 
	margin-bottom: 1em; 
	background-color: #9cc; 
	color: #333; 
}
#navsite ul {
	list-style: none; 
	margin: 0; 
	padding: 0; 
}
#navsite ul li {
	margin: 0; 
	border-top: 1px solid #003;
}
#navsite ul li a {
	display: block; 
	padding: 2px 2px 2px 0.5em; 
	border-left: 10px solid #369; 
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369;
	background-color: #036; 
	color: #fff; 
	text-decoration: none; 
	width: 100%; 
}
html>body #navsite ul li a { 
	width: auto; 
}
#navsite ul li a:hover {
	border-left: 10px solid #036;
	border-right: 1px solid #69c;
	border-bottom: 1px solid #369; 
	background-color: #69f; 
	color: #fff; 
}
 
</style>
 
<div id="navsite">
	<ul>
		<li><a href="http://www.codebit.cn">首页</a></li>
		<li><a href="http://www.codebit.cn/pub/article.php">技术文章</a></li> 
		<li><a href="http://www.codebit.cn/pub/contact.php">联系我们</a></li>
		<li><a href="http://www.codebit.cn/pub/submit.php">提交文章</a></li>
		<li><a href="http://feeds.feedburner.com/codebit">RSS 订阅</a></li>
	</ul>
</div>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>