DIV+CSS+JS树形菜单

<html>
    <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	  <title>Div+CSS+JS树型菜单</title>
	  <meta name="description" content="http://www.erp-china.com">
	  
	   <style type="text/css">

	  *{margin:0;padding:0;border:0;}
	  body {
	  font-family: arial, 宋体, serif;
	  font-size:12px;
	  }
	
	  #nav {
	  width:180px;
	  line-height: 24px;
	  list-style-type: none;
	  text-align:left;
	  }
	
	  #nav a {
	  width: 110px;
	  display: block;
	  padding-left:20px;
	  }
	
	  #nav li {
	  background:#FFF;
	  border-bottom:#FFF 1px solid;
	  float:left;
	  }
	
	  #nav li a:hover{
	  background:#00CC00;
	  }
	
	  #nav a:link  {
	  color:#666; text-decoration:none;
	  }
	
	  #nav a:visited  {
	  color:#666;text-decoration:none;
	  }
	
	  #nav a:hover  {
	  color:#FF0000;text-decoration:none;font-weight:bold;
	  }
	
	  #nav li ul {
	  list-style:none;
	  text-align:left;
	  }
	
	  #nav li ul li{
	  background: #EBEBEB;
	  }
	
	  #nav li ul a{
	  padding-left:20px;
	  width:110px;
	  }
	
	  #nav li ul a:link  {
	  color:#666; text-decoration:none;
	  }
	
	  #nav li ul a:visited  {
	  color:#666;text-decoration:none;
	  }
	
	   #nav li ul a:hover {
	  color:#F3F3F3;
	  text-decoration:none;
	  font-weight:normal;
	  background:#0000ff;
	  }
	
	  #nav li:hover ul {
	  left: auto;
	  }
	
	  #nav li.sfhover ul {
	  left: auto;
	  }
	
	  #content {
	  clear: left;
	  }
	
	  #nav ul.collapsed {
	  display: none;
	  }
	
	  #PARENT{
	  width:300px;
	  padding-left:20px;
	  }
	  </style>
    </head>

  <body>

	<div id="PARENT">
	<ul id="nav">
	
	<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">锄禾日当午</a>
	<ul id="ChildMenu1" class="collapsed">
	<li><a href="" target="_blank">childMenu1</a></li>
	<li><a href="" target="_blank">childMenu2</a></li>
	<li><a href="" target="_blank">childMenu3</a></li>
	<li><a href="C:/" target="_blank">打开C盘</a></li>
	</ul>
	</li>
	
	<li><a href="#Menu=ChildMenu2"  onclick="DoMenu('ChildMenu2')">汗滴禾下土</a>
	<ul id="ChildMenu2" class="collapsed">
	<li><a href="" target="_blank">childMenu1</a></li>
	<li><a href="" target="_blank">childMenu2</a></li>
	<li><a href="" target="_blank">childMenu3</a></li>
	<li><a href="" target="_blank">childMenu4</a></li>
	</ul>
	</li>
	
<li><a href="#Menu=ChildMenu3"  onclick="DoMenu('ChildMenu3')">谁知盘中餐</a>
	<ul id="ChildMenu3" class="collapsed">
	<li><a href="" target="_blank">childMenu1</a></li>
	<li><a href="" target="_blank">childMenu2</a></li>
	<li><a href="" target="_blank">childMenu3</a></li>
	<li><a href="" target="_blank">childMenu4</a></li>
	</ul>
	</li>
	
	<li><a href="#Menu=ChildMenu4"  onclick="DoMenu('ChildMenu4')">粒粒皆辛苦</a>
	<ul id="ChildMenu4" class="collapsed">
	<li><a href="" target="_blank">childMenu1</a></li>
	<li><a href="" target="_blank">childMenu2</a></li>
	<li><a href="" target="_blank">childMenu3</a></li>
	<li><a href="" target="_blank">childMenu4</a></li>
	</ul>
	</li>
	   
  </ul>
  </div>

  <div style="width:300;padding-left:30px;">
  </br></br>
  <b>燃灯古佛圆寂前只说了两个字:open source...</b>
  </br></br>
  欢迎访问:<a href="http://www.erp-china.com" target="_blank">宏桥科技</a>
  </div>

  </body>
  </html>
 
  <script type=text/javascript><!--
  
  var LastLeftID = "";
  
  function menuFix() {

	 var obj = document.getElementById("nav").getElementsByTagName("li");
	 
	  for (var i=0; i<obj.length; i++) {
	  obj[i].onmouseover=function() {
	    this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
  
      obj[i].onMouseDown=function() {
	    this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
  
      obj[i].onMouseUp=function() {
	    this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
  
      obj[i].onmouseout=function() {
	    this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
      }
      }
  }

  function DoMenu(emid){
  
    var obj = document.getElementById(emid);
    obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
    if((LastLeftID!="")&&(emid!=LastLeftID)){//关闭上一个Menu
      document.getElementById(LastLeftID).className = "collapsed";
    }
    LastLeftID = emid;
    }

  function GetMenuID(){
    var MenuID="";
    var _paramStr = new String(window.location.href);
    var _sharpPos = _paramStr.indexOf("#");
    if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1){
      _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
    }
   
    else{
      _paramStr = "";
    }
    
    if (_paramStr.length > 0){
      var _paramArr = _paramStr.split("&");
      if (_paramArr.length>0){
        var _paramKeyVal = _paramArr[0].split("=");
        if (_paramKeyVal.length>0){
        MenuID = _paramKeyVal[1];
        }
      }
    }
    
    if(MenuID!=""){
      DoMenu(MenuID)
    }
  }
  GetMenuID();    //*这两个function的顺序要注意一下,不然在Firefox里GetMenuID()不起效果
  menuFix();
  --></script>

 

你可能感兴趣的:(JavaScript,html,css,firefox)