TAB式简洁导航菜单代码,Java代码库,德仔网

代码语言
代码分类
【Java】 TAB式简洁导航菜单
作者:Dezai.CN / 发布于2013/9/25/ 660

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<meta name="Copyright" content="懒人图库 http://www.lanrentuku.com/" />
	<meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" />
	<meta content="懒人图库" name="keywords" />
	<title>懒人图库</title>
	</head>

	<body>
	<div id="navcontainer">
	<ul id="navlist">
	<li id="active"><a href="#" id="current">Item one</a></li>
	<li><a href="#">Item two</a></li>
	<li><a href="#">Item three</a></li>
	<li><a href="#">Item four</a></li>
	<li><a href="#">Item five</a></li>
	</ul>
	</div>

	<style>
	#navlist
	{
	border-bottom: 1px solid #ccc;
	margin: 0;
	padding-bottom: 19px;
	padding-left: 10px;
	}

	#navlist ul, #navlist li
	{
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	#navlist a:link, #navlist a:visited
	{
	background: #E8EBF0;
	border: 1px solid #ccc;
	color: #666;
	float: left;
	font-size: small;
	font-weight: normal;
	line-height: 14px;
	margin-right: 8px;
	padding: 2px 10px 2px 10px;
	text-decoration: none;
	}

	#navlist a:link#current, #navlist a:visited#current
	{
	background: #fff;
	border-bottom: 1px solid #fff;
	color: #000;
	}

	#navlist a:hover { color: #f00; }

	body.section-1 #navlist li#nav-1 a,
	body.section-2 #navlist li#nav-2 a,
	body.section-3 #navlist li#nav-3 a,
	body.section-4 #navlist li#nav-4 a
	{
	background: #fff;
	border-bottom: 1px solid #fff;
	color: #000;
	}

	#navlist #subnav-1,
	#navlist #subnav-2,
	#navlist #subnav-3,
	#navlist #subnav-4
	{
	display: none;
	width: 90%;
	}

	body.section-1 #navlist ul#subnav-1,
	body.section-2 #navlist ul#subnav-2,
	body.section-3 #navlist ul#subnav-3,
	body.section-4 #navlist ul#subnav-4
	{
	display: inline;
	left: 10px;
	position: absolute;
	top: 95px;
	}

	body.section-1 #navlist ul#subnav-1 a,
	body.section-2 #navlist ul#subnav-2 a,
	body.section-3 #navlist ul#subnav-3 a,
	body.section-4 #navlist ul#subnav-4 a
	{
	background: #fff;
	border: none;
	border-left: 1px solid #ccc;
	color: #999;
	font-size: smaller;
	font-weight: bold;
	line-height: 10px;
	margin-right: 4px;
	padding: 2px 10px 2px 10px;
	text-decoration: none;
	}

	#navlist ul a:hover { color: #f00 !important; }

	#contents
	{
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	clear: both;
	margin: 0px;
	padding: 15px;
	}
	</style>
	
	</body>
	</html>
试试其它关键字
　TAB菜单　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)