老掉牙裴帮助关于javascript+css列表菜单的小练习
日期：2014-05-17 浏览次数：20661 次
<!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>
