老掉牙裴帮助关于javascript+css列表菜单的小练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>列表菜单</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div.menuBorder{
margin:0px;
padding:0px;
border:2px solid red;
width:400px;
height:250px;
font-size:13px;
}
#menuBorder ul{
margin:0px;
padding:0px;
list-style:none;
text-align:center;
}
#menuBorder a{
text-decoration:none;
}
#menuBorder a:hover{
color:#FF6633;
text-decoration:underline;
}
li.menu{
clear:none;
float:left;
margin:3px;
padding:3px;
height:auto;
width:80px;
border:1px solid green;
background-color:lightgray;
}
li.menu:hover{
cursor:pointer;
}
.menu ul{
padding-top:3px;
border-top:2px solid green;
text-align:center;
background-color:lightgreen;
}
.menu ul li{
padding-top:2px;
}
.menu ul li:hover{
background-color:#C8C8C8 ;
}
ul.menu{
clear:none;
float:right;
}
</style>
</head>
<script type="text/javascript">
/**
展示下拉菜单
*/
function displayListMenu(_ulId){
var objUL = document.getElementById(_ulId);
var flag = objUL.style.display =="none";
if(flag){
objUL.style.display ="block";
}else{
objUL.style.display ="none";
}
}
/**
当鼠标移开时，隐藏列表菜单
*/
function hideListMenu(_ulId){
var objUL = document.getElementById(_ulId);
var flag = objUL.style.display =="block";
if(flag){
objUL.style.display ="none";
}
}
/**
叶子节点信息
*/
function nodeInfo(_id,_name){
alert("节点ID:"+_id+"~节点名称:"+_name);
}
</script>
<body>
<div id="menuBorder" class="menuBorder">
<ul id="menuTab">
<li class="menu"><span onclick="displayListMenu('menu_1')" >菜单1</span>
<ul id="menu_1" style="display:none" onmouseout="displayListMenu('menu_1')">
<li><a href="javascript:nodeInfo('menu_1_1','菜单1.1')">菜单1.1</a></li>
<li><a href="javascript:nodeInfo('menu_1_2','菜单1.2')">菜单1.2</a></li>
<li><a href="javascript:nodeInfo('menu_1_3','菜单1.3')">菜单1.3</a></li>
</ul>
</li>
<li class="menu" ><span onclick="displayListMenu('menu_2')" >菜单2</span>
<ul id="menu_2" style="display:none" onmouseout="displayListMenu('menu_2')" >
<li><a href="javascript:nodeInfo('menu_2_1','菜单2.1')">菜单2.1</a></li>
<li><a href="javascript:nodeInfo('menu_2_2','菜单2.2')">菜单2.2</a></li>
<li><a href="javascript:nodeInfo('menu_2_3','菜单2.3')">菜单2.3</a></li>
<li><a href="javascript:nodeInfo('menu_2_4','菜单2.4')">菜单2.4</a></li>
</ul>
</li>
<li class="menu" ><span onclick="displayListMenu('menu_3')">菜单3</span>
<ul id="menu_3" style="display:none" onmouseout="displayListMenu('menu_3')" >
<li><a href="javascript:nodeInfo('menu_3_1','菜单3.1')">菜单3.1</a></li>
<li><a href="javascript:nodeInfo('menu_3_2','菜单3.2')">菜单3.2</a></li>
<li><a href="javascript:nodeInfo('menu_3_3','菜单3.3')">菜单3.3</a></li>
<li><a href="javascript:nodeInfo('menu_3_4','菜单3.4')">菜单3.4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>