<!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>
CSS学习笔记----一个简单的menu(javascript)
最新推荐文章于 2021-06-08 19:11:01 发布