当前访客身份:游客 [ 登录 | 加入 OSCHINA ]

代码分享

当前位置:
代码分享 » HTML  » 网页设计与交互
分享到: 
收藏 +0
1

标签: <无>

代码片段(2) [全屏查看所有代码]

1. [图片] Menu.png    

2. [代码][CSS]代码     跳至 [2] [全屏预览]

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>横向二级导航</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<style type="text/css">
	html *{
		padding:0;
		margin:0;
		font-family: Arial, Verdana, Helvetica, sans-serif;
	}
	.top-menu *{
		text-decoration:none;
		font-size:9pt;
	}
	.top-menu * a:hover{
		background-color:#801818;/* 鼠标经过时的红色背景,可自定义 */
	}
	.top-menu{
		list-style:none;
		height:40px;
		width:100%;
		background-color:#333;
	}
	.top-menu li{
		float:left;
		border-left:1px solid #4a4a4a;
		border-right:1px solid #242424;
		border-top:1px solid #4a4a4a;
		border-bottom:1px solid #242424;
		position:relative;
	}
	.top-menu li a{
		color:#fff;
		height:38px;
		line-height:38px;
		padding:0 20px;
		blr:expression(this.onFocus=this.close());
		blr:expression(this.onFocus=this.blur());
		display:inline-block;
	}
	.top-menu li a:focus{ 
		-moz-outline-style: none; 
	}
	.top-menu li .sub-menu{
		position:absolute;
		top:39px;
		left:-1px;
		list-style:none;
		background-color:#333;
		display:none;
	}
	.top-menu li .sub-menu li{
		text-align:center;
		clear:left;
		width:140px;
		height:35px;
		line-height:35px;
		position:relative;
	}
	.top-menu li .sub-menu li a{
		height:34px;
		line-height:34px;
		width:138px;
		padding:0;
		display:inline-block;
	}
</style>

<script>
	$(function(){
		$(".top-menu>li").hover(function(){
			$(this).children('ul').stop(true,true).show(500);
		},function(){
			$(this).children('ul').stop(true,true).hide(500);
		})
	})
</script>
<body>
<ul class="top-menu">
	<li><a href="#">站点首页</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
	<li><a href="#">精彩日志</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
	<li><a href="#">图说天下</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
	<li><a href="#">空间申请</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
	<li><a href="#">新闻热点</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
	<li><a href="#">编不出来啦!</a>
		<ul class="sub-menu">
			<li><a href="#">站点首页</a></li>
			<li><a href="#">精彩日志</a></li>
			<li><a href="#">图说天下</a></li>
			<li><a href="#">空间申请</a></li>
			<li><a href="#">新闻热点</a></li>
			<li><a href="#">编不出来啦!</a></li>
		</ul>
	</li>
</ul>
</html>


开源中国-程序员在线工具:Git代码托管 API文档大全(120+) JS在线编辑演示 二维码 更多»

发表评论 回到顶部 网友评论(4)

开源从代码分享开始 分享代码
只会百度的程序员的其它代码 全部(7)...