CSS学习笔记----一个简单的menu（javascript）

最新推荐文章于 2023-07-24 10:50:41 发布

庄公梦蝶

最新推荐文章于 2023-07-24 10:50:41 发布

阅读量603

点赞数 2

分类专栏： css 文章标签： css javascript

本文链接：https://blog.csdn.net/u014548034/article/details/40891279

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css11menu</title>
	<meta name="author" content="Administrator" />
	<!-- Date: 2014-10-29 -->

<style type="text/css">
	*{
		padding:0px;
		margin:0px;
		font-size:12px;
	}
	#menu_bar{
		position:absolute;
		top:50px;
		left:50px;
		width:500px;
		height:500px; 
	}
	dl.menu{
		width:100px;
		float:left;
	}
	dl.menu dt,dl.menu dd{
		height: 30px;
		background: #339;
		text-align:center;
		color:#fff;
		font-size:14px;
		font-weight:bold;
		border-right:1px solid #fff;
	}
	dl.menu dt span{
		position: relative;
		top:8px;
	}
	dl.menu dd{
		background:#a33;
		border-bottom:1px #ffffff solid;
		display:none;
	}
	dl.menu dd a{
		position: relative;
		top:8px;
	}
	a.menu_href:link,a.menu_href:visited{
		text-decoration: none;
		color:#fff;
	}
	a.menu_href:hover{
		text-decoration: underline;
		color:#ff0;
		cursor:pointer;
	}
	dl.menu dd:hover{
		background:#393;
		
	}
</style>
<script type="text/javascript">
	window.οnlοad=function(){
		var dis=document.getElementById("menu_bar").getElementsByTagName("dl");
		for(var i=0;i<dis.length;i++){
			dis[i].οnmοuseοver=show;
			dis[i].οnmοuseοut=hidden;
		}
		function show(){
			var dds=this.getElementsByTagName("dd");
			for(var i=0;i<dds.length;i++){
				dds[i].style.display="block";
			}
		}
		function hidden(){
			var dds=this.getElementsByTagName("dd");
			for(var i=0;i<dds.length;i++){
				dds[i].style.display="none";
			}
		}
	}
</script>
</head>
<body>
	<div id="menu_bar">
		<dl class="menu">
			<dt><span>文件操作</span></dt>
			<dd><a href="#" class="menu_href">打开文件</a></dd>
			<dd><a href="#" class="menu_href">删除文件</a></dd>
			<dd><a href="#" class="menu_href">保存文件</a></dd>
			<dd><a href="#" class="menu_href">关闭文件</a></dd>
			<dd><a href="#" class="menu_href">另存为...</a></dd>
			<dd><a href="#" class="menu_href">退出</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>编辑</span></dt>
			<dd><a href="#" class="menu_href">重复</a></dd>
			<dd><a href="#" class="menu_href">撤销</a></dd>
			<dd><a href="#" class="menu_href">拷贝</a></dd>
			<dd><a href="#" class="menu_href">粘贴</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>视图</span></dt>
			<dd><a href="#" class="menu_href">打开视图</a></dd>
			<dd><a href="#" class="menu_href">关闭视图</a></dd>
			<dd><a href="#" class="menu_href">浏览视图</a></dd>
			<dd><a href="#" class="menu_href">开发视图</a></dd>
		</dl>
		<dl class="menu">
			<dt><span>窗口</span></dt>
			<dd><a href="#" class="menu_href">上一个</a></dd>
			<dd><a href="#" class="menu_href">下一个</a></dd>
			<dd><a href="#" class="menu_href">显示</a></dd>
		</dl>
	</div>
</body>
</html>

庄公梦蝶

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记----一个简单的menu（javascript）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> css11menu *{ padding:0px; margin:0px; font-size:12px; } #menu_bar{ position:absolut
复制链接

扫一扫