一個簡單的兩級菜單效果

來源:互聯網
上載者:User

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>
 <HEAD>
  <title></title>
  <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
  <meta name="CODE_LANGUAGE" Content="C#">
  <meta name="vs_defaultClientScript" content="JavaScript">
  <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">   
  <style>
   /*子功能表begin*/
   .CSubMenu
   {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid; 
    background-color: #f5f5f5;
    z-index:10;
    width:60%;
    vertical-align:top;
    position:absolute;
    filter:alpha(opacity=100);
   }
   .CMenuTD
   {
    background-color: #E9EDF9;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #A2A9B2;
    border-top-style: none; 
    border-bottom-style: none; 
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #03115c;
    //padding-left:24px; 
    cursor:hand;
   }
   .CSubMenuItem
   {FONT-SIZE:10pt;COLOR:#FFFFFF;FONT-WEIGHT:bold;TEXT-DECORATION:none;}

   A.CSubMenuItem:link
   {FONT-SIZE:10pt;COLOR:#000000;FONT-WEIGHT:normal;TEXT-DECORATION:none;}

   A.CSubMenuItem:visited
   {FONT-SIZE:10pt;COLOR:#000000;FONT-WEIGHT:normal;TEXT-DECORATION:none;}

   A.CSubMenuItem:hover
   {FONT-SIZE:11pt;COLOR:red;FONT-WEIGHT:normal;TEXT-DECORATION:none;}
   /*子功能表end*/
  </style>
  <script type=text/javascript>
    <!-- 顯示菜單 -->
     function MenuShow(id,leftnum)
     {
      var intleft=leftnum;
      intleft = intleft-58;
      //alert(intleft);
      var ediv = document.all("d" + id);
      var etr  = document.all("tr" + id);
      
      if (ediv.style.display == "none")
      {
       //ediv.style.color = "red";
       ediv.style.display = "";
      }
      
      
     }
     <!-- 隱藏菜單 -->
     function MenuHide(id)
     {
      var ediv = document.all("d" + id);
      var etr  = document.all("tr" + id);
      if (ediv.style.display != "none")
      {
       ediv.style.display = "none";
      }

     }
     <!--滑鼠移動到子功能表上-->
     function MoIn(id,leftnum)
     {
      var intleft=leftnum;
      
      if(intleft==null || intleft=="")
       intleft=0;
      MenuShow(id,intleft);
     }
     <!--滑鼠移出到子功能表上-->
     function MoOut(id)
     {
       MenuHide(id);
     }
         
  </script>

</HEAD>
<body MS_POSITIONING="GridLayout" >
 
<form name="Form1" method="post" action="WangZhanIndex.aspx?WangZhanBiaoShi=393" id="Form1">
<table width="94%" border="0" cellspacing="0" cellpadding="5">
<tr>
 <td align="center">
  <table border="0"  width="150" cellpadding="0" cellspacing="5">
  
   <tr>
    <td align="left">    
    <a >部門職責&nbsp;&nbsp;</a></td>
   </tr>
  
   <tr>
    <td align="left">    
    <a >工作動態&nbsp;&nbsp;</a></td>
   </tr>
  
   <tr>
    <td align="left">
     <!--工作計劃begin-->
     <table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
      <tr >
       <td align=left nowrap id="trlm_工作計劃" onmouseover=MoIn('lm_工作計劃') onmouseout=MoOut('lm_工作計劃') >
        
         <a >工作計劃<font face='Webdings'>4</font></a>
       </td> <td align="left" width="100%">     
         <table id=dlm_工作計劃  style="display:none" onmouseover=MoIn('lm_工作計劃') onmouseout=MoOut('lm_工作計劃') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
          
            <tr >
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem" >年度工作計劃</a>
             </td>
            </tr>
            
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem"  >月度工作計劃</a>
             </td>
            </tr>
            
         </table>
       </td>
      </tr>
     </table>
     <!--工作計劃end-->
    </td>
   </tr>  
   <tr>
    <td align="left">
     <!--工作計劃begin-->
     <table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
      <tr >
       <td align=left nowrap id="trlm_工作總結" onmouseover=MoIn('lm_工作總結') onmouseout=MoOut('lm_工作總結') >
       
        <a>工作總結<font face='Webdings'>4</font></a>
       </td>
       
       <td align="left" width="100%">
         <table id=dlm_工作總結  style="display:none" onmouseover=MoIn('lm_工作總結') onmouseout=MoOut('lm_工作總結') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
          
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem" >年度工作總結</a>
             </td>
            </tr>
            
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem" >月度工作總結</a>
             </td>
            </tr>
            
         </table>
       </td>
      </tr>
     </table>
     <!--工作計劃end-->
    </td>
   </tr>
  
   <tr>
    <td align="left">
    
    <a >會議紀要&nbsp;&nbsp;</a></td>
   </tr>
  
   <tr>
    <td align="left">
   
    <a >專題總結&nbsp;&nbsp;</a></td>
   </tr>
  
   <tr>
    <td align="left">
     <!--工作計劃begin-->
     <table width="100%" height="100%" border=0 cellspacing=0 cellpadding=0>
      <tr >
       <td align=left nowrap id="trlm_規章制度" onmouseover=MoIn('lm_規章制度') onmouseout=MoOut('lm_規章制度') >
        
        <a >規章制度<font face='Webdings'>4</font></a>
       </td>
       
       <td align="left" width="100%">
         <table id=dlm_規章制度  style="display:none" onmouseover=MoIn('lm_規章制度') onmouseout=MoOut('lm_規章制度') class=CSubMenu border=0 align=center cellspacing=0 cellpadding=0>
          
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem"  >部門規章制度</a>
             </td>
            </tr>
            
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem"  >國家相關法規</a>
             </td>
            </tr>
            
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem" >集團規章制度</a>
             </td>
            </tr>
            
            <tr>
             <td align=left height=20 style='padding-left:5px;padding-right:5px;' nowrap>
              <a href="#" class="CSubMenuItem" >總部規章制度</a>
             </td>
            </tr>
            
         </table>
       </td>
      </tr>
     </table>
     <!--工作計劃end-->
    </td>
   </tr>
  
  </table>
 </td>
</tr>
</table>
</form>  
</body>
</HTML>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.