js - Tree of LeftMenu

于 2008-08-27 18:00:00 发布
阅读量1.3k 收藏
点赞数
分类专栏： javascript 文章标签： tree menu stylesheet javascript class 数据备份
本文介绍了一个使用HTML、CSS和JavaScript实现的动态网页左侧菜单栏设计方案。该方案通过鼠标悬停效果显示二级菜单，并利用JavaScript控制菜单的显示与隐藏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. <!-- LeftMenu.htm-->
  3. <html> 
  4. <head> 
  5.     <link rel="StyleSheet" href="leftTree.css" type="text/css">
  6.     <script language="javascript" src="leftTree.js"></script> 
  7. </head> 
  8. <body>
  9.     <!-- leftMenu的logo -->
  10.     <table cellpadding="0" cellspacing="0" width="158"> 
  11.         <tr style="CURSOR:hand"> 
  12.             <td height="42" valign="bottom"> 
  13.                 <img src="images/back.gif" width="160" height="30"> 
  14.             </td> 
  15.         </tr> 
  16.     </table>
  17.     <!-- leftMenu的第一级目录 -->
  18.     <table cellpadding="0" cellspacing="0" width="158"> 
  19.         <!-- 第一级目录的总目录 -->
  20.         <tr style="CURSOR:hand"> 
  21.             <td height="25" class="menu_title" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';" 
  22.                 background="images/title_bg_show.gif" id="menuTitle1" onclick="menuChange(menu1,80,menuTitle1);"> 
  23.                 <span>基本选项</span> 
  24.             </td> 
  25.         </tr>
  26.         <!-- 第一级目录的分目录 -->
  27.         <tr> 
  28.             <td> 
  29.                 <div class="sec_menu" style="FILTER:alpha(Opacity=100);OVERFLOW:hidden;WIDTH:158px;HEIGHT:80px" id="menu1"> 
  30.                     <table cellpadding="0" cellspacing="0" align="center" width="135" style="POSITION:relative;TOP:10px"> 
  31.                         <tr> 
  32.                             <td height="20"><a href="setLogo.aspx" target="right" onfocus="this.blur();">设置Logo</a> </td> 
  33.                         </tr> 
  34.                         <tr> 
  35.                             <td height="20"><a href="setHotNews.aspx" target="right" onfocus="this.blur();">增加热点信息</a></td> 
  36.                         </tr> 
  37.                         <tr> 
  38.                             <td height="20"> <a href="HotNewsForSearch.aspx" target="right" onfocus="this.blur();">查看热点信息</a></td> 
  39.                         </tr> 
  40.                     </table> 
  41.                 </div> 
  42.             </td> 
  43.         </tr> 
  44.     </table> 
  45.     <script language="javascript"> 
  46.         var whichOpen=menuTitle1; 
  47.         var whichContinue=''; 
  48.     </script> 
  49.     <table cellpadding="0" cellspacing="0" width="158"> 
  50.         <tr style="CURSOR:hand"> 
  51.             <td height="25" class="menu_title" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';" 
  52.                 background="images/title_bg_show.gif" id="menuTitle2" onclick="menuChange(menu2,120,menuTitle2);"> 
  53.                 <span>信息设置</span> 
  54.             </td> 
  55.         </tr> 
  56.         <tr> 
  57.             <td> 
  58.                 <div class="sec_menu" style="DISPLAY:none;FILTER:alpha(Opacity=0);WIDTH:158px;HEIGHT:0px" id="menu2"> 
  59.                     <table cellpadding="0" cellspacing="0" align="center" width="135" style="POSITION:relative;TOP:10px"> 
  60.                         <tr> 
  61.                             <td height="20"><a href="searchInfo.aspx?type=0" target="right" onfocus="this.blur();">查看未审核的信息</a></td> 
  62.                         </tr> 
  63.                         <tr> 
  64.                             <td height="20"><a href="searchInfo.aspx?type=1" target="right" onfocus="this.blur();">查看已审核信息</a></td> 
  65.                         </tr> 
  66.                         <tr> 
  67.                             <td height="20"><a href="put.aspx" target="right" onfocus="this.blur();">固定位置设置</a></td> 
  68.                         </tr> 
  69.                         <tr> 
  70.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">信体过滤规则</a></td> 
  71.                         </tr> 
  72.                         <tr> 
  73.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">附件过滤规则</a></td> 
  74.                         </tr> 
  75.                     </table> 
  76.                 </div> 
  77.             </td> 
  78.         </tr> 
  79.     </table> 
  80.     <table cellpadding="0" cellspacing="0" width="158"> 
  81.         <tr style="CURSOR:hand"> 
  82.             <td height="25" class="menu_title" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';" 
  83.                 background="images/title_bg_show.gif" id="menuTitle3" onclick="menuChange(menu3,120,menuTitle3);"> 
  84.                 <span>系统管理</span> 
  85.             </td> 
  86.         </tr> 
  87.         <tr> 
  88.             <td> 
  89.                 <div class="sec_menu" style="DISPLAY:none;FILTER:alpha(Opacity=0);WIDTH:158px;HEIGHT:0px" id="menu3"> 
  90.                     <table cellpadding="0" cellspacing="0" align="center" width="135" style="POSITION:relative;TOP:10px"> 
  91.                         <tr> 
  92.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">用户管理</a></td> 
  93.                         </tr> 
  94.                         <tr> 
  95.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">进程管理</a></td> 
  96.                         </tr> 
  97.                         <tr> 
  98.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">主机运行状态</a></td> 
  99.                         </tr> 
  100.                         <tr> 
  101.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">数据备份</a></td> 
  102.                         </tr> 
  103.                         <tr> 
  104.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">垃圾目录管理</a></td> 
  105.                         </tr> 
  106.                     </table> 
  107.                 </div> 
  108.             </td> 
  109.         </tr> 
  110.     </table> 
  111.     <table cellpadding="0" cellspacing="0" width="158"> 
  112.         <tr style="CURSOR:hand"> 
  113.             <td height="25" class="menu_title" onmouseover="this.className='menu_title2';" onmouseout="this.className='menu_title';" 
  114.                 background="images/title_bg_show.gif" id="menuTitle4" onclick="menuChange(menu4,140,menuTitle4);"> 
  115.                 <span>系统统计</span> 
  116.             </td> 
  117.         </tr> 
  118.         <tr> 
  119.             <td> 
  120.                 <div class="sec_menu" style="DISPLAY:none;FILTER:alpha(Opacity=0);WIDTH:158px;HEIGHT:0px" id="menu4"> 
  121.                     <table cellpadding="0" cellspacing="0" align="center" width="135" style="POSITION:relative;TOP:10px"> 
  122.                         <tr> 
  123.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">IP过滤统计</a></td> 
  124.                         </tr> 
  125.                         <tr> 
  126.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">信封过滤统计</a></td> 
  127.                         </tr> 
  128.                         <tr> 
  129.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">信头过滤统计</a></td> 
  130.                         </tr> 
  131.                         <tr> 
  132.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">信体过滤统计</a></td> 
  133.                         </tr> 
  134.                         <tr> 
  135.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">附件过滤统计</a></td> 
  136.                         </tr> 
  137.                         <tr> 
  138.                             <td height="20"><a href="http://qybbs.net" onfocus="this.blur();">动态规则统计</a></td> 
  139.                         </tr> 
  140.                     </table> 
  141.                 </div> 
  142.             </td> 
  143.         </tr> 
  144.     </table> 
  145.     <table cellpadding="0" cellspacing="0" width="158"> 
  146.         <tr style="CURSOR:hand"> 
  147.             <td height="25" class="menu_title" background="images/title_bg_quit.gif"> 
  148.                 <a href="managerLogin.aspx" target="_parent"> 
  149.                 <span> 退出系统</span></a> 
  150.             </td> 
  151.         </tr> 
  152.     </table> 
  153. </body> 
  154. </html> 

 

  1. <!-- LeftMenu.css -->
  3. body {
  4.     background:#799AE1;
  5.     margin:0px;
  6.     font:normal 12px 宋体;
  7. }
  9. table {
  10.     border:0px;
  11. }
  13. td {
  14.     font:normal 12px 宋体;
  15. }
  17. img {
  18.     vertical-align:bottom;
  19.     border:0px;
  20. }
  22. a {
  23.     font:normal 12px 宋体;
  24.     color:#215DC6;
  25.     text-decoration:none;
  26. }
  28. a:hover {
  29.     color:#428EFF 
  30. }
  32. .sec_menu {
  33.     border-left:1px solid white;
  34.     border-right:1px solid white;
  35.     border-bottom:1px solid white;
  36.     overflow:hidden;
  37.     background:#D6DFF7;
  38. }
  40. .menu_title {}
  42. .menu_title span {
  43.     position:relative;
  44.     top:2px;
  45.     left:8px;
  46.     color:#215DC6;
  47.     font-weight:bold;
  48.     
  49. }
  51. .menu_title2 {}
  53. .menu_title2 span {
  54.      position:relative;
  55.     top:2px;
  56.     left:8px;
  57.     color:#428EFF;
  58.     font-weight:bold;
  59. }

 

  1. <!-- LeftMenu.js -->
  3. function menuShow(obj,maxh,obj2){
  4.     if(obj.style.pixelHeight<maxh){     
  5.         obj.style.pixelHeight+=maxh/20;     
  6.         obj.filters.alpha.opacity+=5;   
  7.         obj2.background="images/title_bg_hide.gif";     
  8.         if(obj.style.pixelHeight==maxh/10)
  9.         obj.style.display='block';      
  10.         myObj=obj;      
  11.         myMaxh=maxh;        
  12.         myObj2=obj2;        
  13.         setTimeout('menuShow(myObj,myMaxh,myObj2)','5');        
  14.     }
  15. }
  17. function menuHide(obj,maxh,obj2){
  18.     if(obj.style.pixelHeight>0) {   
  19.         if(obj.style.pixelHeight==maxh/20)
  20.         obj.style.display='none';   
  21.         obj.style.pixelHeight-=maxh/20; 
  22.         obj.filters.alpha.opacity-=5;       
  23.         obj2.background="images/title_bg_show.gif";     
  24.         myObj=obj;      
  25.         myMaxh=maxh
  26.         myObj2=obj2;        
  27.         setTimeout('menuHide(myObj,myMaxh,myObj2)','5');                
  28.     } else if(whichContinue)
  29.         whichContinue.click();
  30. }
  32. function menuChange(obj,maxh,obj2){
  33.     if(obj.style.pixelHeight){      
  34.         menuHide(obj,maxh,obj2);        
  35.         whichOpen='';       
  36.         whichcontinue='';               
  37.     }else if(whichOpen){    
  38.         whichContinue=obj2; 
  39.         whichOpen.click();      
  40.     }else { 
  41.         menuShow(obj,maxh,obj2);        
  42.         whichOpen=obj2;     
  43.         whichContinue='';               
  44.     }   
  45. }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值