javascript—纯手写代码—3级菜单.doc

htmlPage2 .class1,.class2,.class3,.class4,.class5 list-style-position: outside; list-style-type: none; .class1height: 20px; display: none; float: left; width: 100px; background-color: Silver; margin: -17px 0px 0px 100px; position: relative; padding:0px 0px 0px 0px; /*2级ul-隐藏*/ .class2 height: 20px; display: block; float: left; width: 100px; background-color: Red; margin: -17px 0px 0px 100px; padding:0px 0px 0px 0px; position: relative; border-left:ridge 1px white; /*2级ul-显示*/ .class3 height: 20px; float: left; width: 100px; background-color: Silver; padding:0px 0px 0px 0px; margin: 0px 0px; text-align:center; /*1级ul-显示*/ .class4 height: 20px; display: none; float: left; width: 100px; margin: -17px 0px 0px 100px; padding:0px 0px 0px 0px; background-color: Green; position: relative; /*3级ul-隐藏*/ .class5 height: 20px; display: block; float: left; width: 100px; margin: -17px 0px 0px 100px; padding:0px 0px 0px 0px; background-color: Green; position: relative; border-left:ridge 1px white; /*3级ul-显示*/ .class6 height: 20px; display: block; float: left; width: 100px; background-color: Red; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; position: relative; /*2级li*/ .class7 height: 20px; display: block; float: left; width: 100px; background-color:Green; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-align: center; position: relative; /*3级li*/ /第一级菜单-鼠标经过 function over(e) var n = e.id.toString().substring(2, 3); var myul=document.getElementById(ul + n + ); myul.setAttribute(class, class2); var item2 = document.getElementsByName(level2); var k2 = item2.length; for (var i = 0; i k2; i+) item2i.onmouseover = function() over2(this); item2i.onmouseout = function() out2(this); /第一级菜单-鼠标移出 function out(e) var n = e.id.toString().substring(2, 3); document.getElementById(ul + n + ).setAttribute(class, class1); /第二级菜单-鼠标经过 function over2(e) var n1 = e.id.toString().substring(2, 3); var n2 = e.id.toString().substring(4, 5); document.getElementById(ul + n1 + _ + n2 + ).setAttribute(class, class5); var item2 = document.getElementsByName(level3); var k2 = item2.length; for (var i = 0; i k2; i+) item2i.onmouseover = function() over3(this); item2i.onmouseout = function() out3(this); /第二级菜单-鼠标移出 function out2(e) var n1 = e.id.toString().substring(2, 3); var n2 = e.id.toString().substring(4, 5); document.getElementById(ul+n1+_ + n2 + ).setAttribute(class, class4); /第三级菜单-鼠标经过 function over3(e) var n1 = e.id.toString().substring(2, 3); var n2 = e.id.toString().substring(4, 5); document.getElementById(ul + n1 + _ + n2 + ).setAttribute(class, class5); /第三级菜单-鼠标移出 function out3(e) var n1 = e.id.toString().substring(2, 3); var n2 = e.id.toString().substring(4, 5); document.getElementById(ul + n1 + _ + n2 + ).setAttribute(class, class4); window.onload = function() var item = document.getElementsByName(level1); var k = item.length; for (var i = 0; i k; i+) itemi.onmouseover = function() over(this); itemi.onmouseout = function() out(this); var item2 = document.getElementsByName(level2); var k2 = item2.length; for (var i = 0; i k2; i+) item2i.onmouseo