24
2012
04

左侧菜单效果的展开收缩效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="https://www.zhengdecai.com/upload/201204242318003530.gif); background-repeat: no-repeat; background-position:
   2px 6px; } .leftNav_on a { display: block; background: url(../images/leftnav_on.gif)
   no-repeat 2px 6px; background-color: #fab012; border-bottom-width: 1px;
   border-bottom-style: dashed; border-bottom-color: #99CC23; padding: 5px
   0px 5px 17px; line-height: 18px; color: #fff; font-weight: bold; text-decoration:
   none; } .leftNav_on a:hover { background: url(../images/leftnav_on.gif)
   no-repeat 2px 6px; background-color: #417c04; color: #fff; font-weight:
   bold; } .MenuNote { margin: 0px; padding: 0px; display: none; vertical-align:
   middle; } .Menu { cursor: pointer; line-height: 30px; display: block; color:
   #79a44d; text-align: left; background: url(../images/leftTree/sysbg_01.gif);
   background-repeat: repeat-x; font-weight: bolder; font-size: 13px; height:
   30px; padding-top: 4px; padding-left: 10px; } .Menua { cursor: pointer;
   color: #fc5d2b; text-align: left; text-decoration: none; } img { border:
   0px; padding-top: 5px; }
  </style>
  <script type="text/javascript" src="../JavaScript/jquery-1.3.2.min.js">
  </script>
  <script type="text/javascript">
   $(function() {
    var x = 10;
    var y = 10;
    // 左侧菜单效果
    $('.Menu').click(function() {
     $('.Menu').css("background", " url(../images/leftTree/sysbg_01.gif) repeat-x");
     $('.Menu').css("color", "#79a44d");
     var $NowMenu = $(this).next('.MenuNote');

     $('.MenuNote').hide(400,
     function() {});
     if ($NowMenu.is(":visible")) {
      $NowMenu.hide(300,
      function() {});
     } else {
      $NowMenu.show(500,
      function() {});

     }
     setTimeout("big()", 1000); //0.8秒后调用show_pop()
     $(this).css("background", " url(../images/leftTree/sysbg_01.gif) repeat-x");
     $(this).css("color", "#fc5d2b");

    });
   })
  </script>
 </head>
 <body style="margin: 0px; padding: 0px; border: 0px; text-align: left;">
  <div style="height: auto; width: 170px; font-size: 13px; margin: :0px; padding: 0px;">
   <div id="leftdiv" style="height: auto; width: 170px; font-size: 13px; margin: :0px;">
    <div id="lefttable">
     <div class='Menu' onclick="indiv('')">
      <img src='../images/leftTree/icon01.gif' width='11' />
      &nbsp;&nbsp;&nbsp;字典管理
     </div>
     <div class='MenuNote' style='display: none;'>
      <table cellpadding='0' cellspacing='0' width='100%'>
       <tr>
        <td style='height: 25px; text-align: left;' id='td12' class='leftNav'
        onclick='initmenu(1,4)'>
         <a href='../Management/JiBingMange.aspx' _fcksavedurl='../Management/LilunMange.aspx' target='mainFrame'>
          理论管理
         </a>
        </td>
       </tr>
      </table>
     </div>
    </div>
   </div>
  </div>
 </body>

</html>
<script type="text/javascript">
 var obj = document.getElementById("leftdiv");

 var gh1 = document.documentElement.clientHeight - document.getElementById('top').clientHeight;
 document.getElementById("leftdiv").style.height = gh1;
 var count = 0;
 function big() {
  document.getElementById("lefttable").style.width = 170;
 }

 function initmenu(i, count) {
  if (document.getElementById("td" + i).className != "leftNav_on") {
   for (var tdi = 1; tdi <= count; tdi++) {
    document.getElementById("td" + tdi).className = "leftNav";
   }
   document.getElementById("td" + i).className = "leftNav_on";
  }
 }

 function indiv(url) {
  if (url != "") {
   parent.document.getElementById("mainFrame").src = url;
  }
 }
</script>

« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。