| 導購 | 订阅 | 在线投稿
分享
 
 
 

Div+CSS+JS樹型菜單,可刷新

2008-12-04 08:25:53  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <title>Div+CSS+JS樹型菜單,可刷新</title>

  <meta name="description" content="http://alexa.knowsky.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: 160px;

   display: block;

   padding-left:20px;

  

  }

  #nav li {

   background:#CCC;

   border-bottom:#FFF 1px solid;

   float:left;

  

  }

  #nav li a:hover{

   background:#CC0000;

  }

  #nav a:link {

   color:#666; text-decoration:none;

  }

  #nav a:visited {

   color:#666;text-decoration:none;

  }

  #nav a:hover {

   color:#FFF;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:160px;

  

  }

  #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:#CC0000;

  

  }

  #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="http://www.www.devdao.com" target="_blank">www.www.devdao.com</a></li>

   <li><a href="http://www.www.devdao.com" target="_blank">www.www.devdao.com</a></li>

   <li><a href="http://www.www.devdao.com" target="_blank">www.www.devdao.com</a></li>

   </ul>

  </li>

  <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a>

   <ul id="ChildMenu2" class="collapsed">

   <a href="http://www.www.devdao.com" target="_blank">支付</a></li>

   <li><a href="#">網上支付</a></li>

   <li><a href="#">登記彙款</a></li>

   <li><a href="#">在線招領</a></li>

   <li><a href="#">曆史帳務</a></li>

   </ul>

  </li>

  <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a>

   <ul id="ChildMenu3" class="collapsed">

   <li><a href="#">登錄</a></li>

   <a href="http://www.www.devdao.com" target="_blank">管理</a></li>

   <li><a href="#">管理</a></li>

   <li><a href="#">管理</a></li>

   </ul>

  </li>

  <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">網站管理</a>

   <ul id="ChildMenu4" class="collapsed">

   <li><a href="#">登錄</a></li>

   <a href="http://www.www.devdao.com" target="_blank">管理</a></li>

   <li><a href="#">管理</a></li>

   <li><a href="#">管理</a></li>

   </ul>

  </li>

  </ul>

  </div>

  <div style="width:300;padding-left:30px;">

  </br></br>

  工作需要搞了一個菜單,分享給大家,大家一齊學習

  </br></br>

  請大家支持:<a href="http://www.www.devdao.com" target="_blank">http://www.www.devdao.com</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>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Div+CSS+JS樹型菜單,可刷新</title> <meta name="description" content="[url=http://alexa.knowsky.com]http://alexa.knowsky.com[/url]"> <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: 160px; display: block; padding-left:20px; } #nav li { background:#CCC; border-bottom:#FFF 1px solid; float:left; } #nav li a:hover{ background:#CC0000; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;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:160px; } #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:#CC0000; } #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="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">[url]www.www.devdao.com[/url]</a></li> <li><a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">[url]www.www.devdao.com[/url]</a></li> <li><a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">[url]www.www.devdao.com[/url]</a></li> </ul> </li> <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a> <ul id="ChildMenu2" class="collapsed"> <a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">支付</a></li> <li><a href="#">網上支付</a></li> <li><a href="#">登記彙款</a></li> <li><a href="#">在線招領</a></li> <li><a href="#">曆史帳務</a></li> </ul> </li> <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網站管理</a> <ul id="ChildMenu3" class="collapsed"> <li><a href="#">登錄</a></li> <a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">網站管理</a> <ul id="ChildMenu4" class="collapsed"> <li><a href="#">登錄</a></li> <a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">管理</a></li> <li><a href="#">管理</a></li> <li><a href="#">管理</a></li> </ul> </li> </ul> </div> <div style="width:300;padding-left:30px;"> </br></br> 工作需要搞了一個菜單,分享給大家,大家一齊學習 </br></br> 請大家支持:<a href="[url=http://www.www.devdao.com]http://www.www.devdao.com[/url]" target="_blank">[url]http://www.www.devdao.com[/url]</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>
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有