标签：style blog io ar color os 使用 sp java
//--------------------使用多层嵌套完成对不同级的控制最终实现二级菜单
/*HTML中标签没有完全放置，后面5项list没有放置*/
<html> <head><title>subnavMeau</title></head> <style type="text/css"> body,li,div,ul{margin: 0px;padding: 0px;} li{list-style: none;} body{font-size: 20px;font-weight: bold;text-align: center;} #nav li{float: left;width: 200px;background: url("pic/navBg.png");} .clear{clear: both;float: none;} #subMeau div{float: left;width: 200px;} .subnav{visibility: hidden;background: url("pic/subNav.png");} li div{float: left;background-image: "pic/navBg.png"} .options{background: gray;position: absolute;width: 100px;background: url("pic/list.png");} </style> <script type="text/javascript"> window.onload=function(){ var i; var oLi=document.getElementsByTagName(‘li‘); var oSub=document.getElementsByClassName(‘subnav‘); var oList=document.getElementsByClassName(‘list‘); oOption=document.getElementsByClassName(‘options‘); var Timer=new Array(oOption.length); for(i=0;i<3;i++){ oLi[i].index=i; oSub[i].style.visibility=‘hidden‘; oLi[i].onclick=function(){ value=oSub[this.index].style.visibility; for(i=0;i<3;i++){ oSub[i].style.visibility=‘hidden‘; } if(value=="hidden"){ oSub[this.index].style.visibility=‘visible‘; } if(value=="visible"){ oSub[this.index].style.visibility=‘hidden‘; } } } for(i=0;i<oOption.length;i++){ oList[i].index=i; oOption[i].index=i; oOption[i].style.display="none"; oList[i].onmouseover=function(){ oOption[this.index].style.display="block"; offset=this.index%4; oOption[this.index].style.left=Math.floor(this.index/4)*200+150+‘px‘; oOption[this.index].style.top=offset*17+23+‘px‘; } oOption[i].onmouseout=oList[i].onmouseout=function(){ mid=this.index; Timer[mid]=setTimeout(function(){ oOption[mid].style.display="none"; },5); } oOption[i].onmouseover=function(){ clearTimeout(Timer[this.index]); } } } </script> <body> <div id="nav"> <ul> <li>IOS</li> <li>Andriod</li> <li>Windows</li> </ul> </div> <div class="clear"> </div> <div id="subMeau"> <div class="subnav"> <ul > <li class="list">iMac</li> <div class="options"> <ul> <li>Mac</li> <li>Macmini</li> <li>MacPro</li> </ul> </div> <li class="list">iTouch</li> <div class="options"> <ul> <li>Touch</li> <li>Touchmini</li> <li>TouchPro</li> </ul> </div> <li class="list">iPhone</li> <div class="options"> <ul> <li>Phone5</li> <li>Phone6</li> <li>Phone6plus</li> </ul> </div> <li class="list">iWatch</li> <div class="options"> <ul> <li>Mac</li> <li>Macmini</li> <li>MacPro</li> </ul> </div> </ul> </div> <div class="subnav" > <ul> <li class="list">sunsung</li> <li class="list">HTC</li> <li class="list">ZTE</li> <li class="list">Huawei</li> </ul> </div> <div class="subnav" id="tes"> <ul> <li class="list">WindowsPhone</li> <li class="list">Windows7</li> <li class="list">Vista</li> <li class="list">WindowsXP</li> </ul> </div> </div> <div class="options"> <ul> <li>Mac1</li> <li>Macmini</li> <li>MacPro</li> </ul> </div> <div class="options"> <ul> <li>Mac2</li> <li>Macmini</li> <li>MacPro</li> </ul> </div> <div class="options"> <ul> <li>Mac3</li> <li>Macmini</li> <li>MacPro</li> </ul> </div> </html>
标签：style blog io ar color os 使用 sp java
原文地址：http://www.cnblogs.com/fleshy/p/4117593.html
