谁有jquery 使用iframe做的系统左侧菜单 用与后台系统管理的

解决方案 »

  1.   

    要用jquery实现什么样的功能??
      

  2.   

    改一下图片就行了。菜单内容也可以从后台动态生成
    html,body {margin:0;padding:0;width:100%;height:100%; font-size:12px; font-family:Verdana;}
    html,table,td,tr{ border-collapse:collapse;margin:0;padding:0;}
    ul,li{ list-style-type:none;margin:0;padding:0;}
    li{height:24px;line-height:24px;padding-left:20px;border-top:1px solid #7fa153;background:url(images/arrow002.gif) no-repeat 6px 7px;}
    table{border-collapse:collapse;border:none;height:100%;}
    table div.title{height:22px;line-height:22px;padding-left:3px;color:#fff;font-weight:bold;background:#a2d84e url(images/title.gif) repeat-x; cursor:pointer;}
    table div.title b{background:url(images/class_nav.gif) no-repeat left center;padding-left:16px;}
    table div.menus{margin:5px auto 0 auto;padding:0;width:155px;border:1px solid #7fa153;}
    table ul.none{display:none;}
    a,a:visited,a:hover{text-decoration:none;color:#000;}
      $(function() {
            $('.title').click(function() {
                $(this).siblings().slideDown(600).parent().siblings().children('ul').slideUp(600);
            });
        });<table width="173">
      <tr>
        <td style="width:4px; background-image:url(images/main_16.gif)">&nbsp;</td>
        <td width="169" valign="top"><table width="100%">
          <tr>
            <td height="20" background="images/main_11.gif">&nbsp;</td>
          </tr>
          <tr>
            <td valign="top">
            <div class="menus">
            <div class="title"><b>信息管理</b></div>
            <ul>
            <li><a href="News/Default.aspx" target="I2">发布信息</a></li>
            <li><a href="News/AllNews.aspx" target="I2">编辑信息</a></li>
            </ul>
            </div>
     <div class="menus">
      <div class="title"><b>信息管理</b></div>
             <ul class="none">
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            </ul>
            </div>
     <div class="menus">
      <div class="title"><b>信息管理</b></div>
            <ul class="none">
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            </ul>
            </div>
             <div class="menus">
              <div class="title"><b>信息管理</b></div>
             <ul class="none">
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            <li>11111</li>
            </ul>
            </div>         
            </td>
          </tr>
        </table></td>
      </tr>
    </table>
      

  3.   


    <!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>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
    $(function(){
    $('.box-title').attr('title','展开/关闭').click(function(){$(this).next().toggle()});
    })
    //]]>
    </script></head>
    <body>
    <div class="box">
    <h3 class="box-title">box-title</h3>
    <div class="box-content">box-content</div>
    </div>
    <div class="box">
    <h3 class="box-title">box-title</h3>
    <div class="box-content">box-content</div>
    </div>
    <div class="box">
    <h3 class="box-title">box-title</h3>
    <div class="box-content">box-content</div>
    </div>
    <div class="box">
    <h3 class="box-title">box-title</h3>
    <div class="box-content">box-content</div>
    </div>
    <div class="box">
    <h3 class="box-title">box-title</h3>
    <div class="box-content">box-content</div>
    </div>
    </body>
    </html>