100分，这样的菜单怎样实现

ajax控件，jquery,或者自己写div+js来实现。

tree控件来实现，很好用，我的网站后台管理就是这种功能。

这个怎么个Tree法，要是知道告诉我吧。
或者第三方控件，类似QQ那样的

  <!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 runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
    <title>首页</title>
    <style type="text/css" >
   *{ margin:0; padding:0; font-size:12px;}
img{border:0px}
body{margin:0 0 0 0;background:#fff;font-size:12px;font-family:宋体,Verdana;color:#666;height:100%}
a:link,a:visited {text-decoration: none;color: #0000ff;font-family: "宋体";font-size: 9pt; outline:none;}
a:hover{color:#ff0000;font-family: "宋体";font-size: 9pt;}
ul{ margin:0; list-style-type:none;}
.div_MemberManagerMenuItem{width:100%; height:1%;line-height:20px;  float:left; display:inline;}
.div_MemberManagerMenuItem ul li  a{ text-decoration: none;color: #0000ff;font-family: "宋体";font-size: 9pt;}
.div_MemberManagerMenuItem ul li  a:hover {color:#ff0000;font-family: "宋体";font-size: 9pt;}
.div_MemberManagerMenuItem ul li { padding:5px 6px 4px 6px; border-bottom:1px solid #EEE;}
.div_MemberManagerMenuItem h6{cursor:pointer;background:#F0F0F0 ; padding:5px 6px 4px 6px; width:92%; border:1px solid #E0E0E0;}    </style>
</head>
<body>
  <div style="width:300px;" id="div_MemberManagerMenu">
     <div class="div_MemberManagerMenuItem" >
        <h6>天使宝宝1</h6>
        <ul>
          <li> <a href='' >09.3.25 胡乐天</a></li>
          <li><a href='' >09.3.30李泽铨</a></li>
          <li><a href='' >09.5.20周旭</a></li>
        </ul>
    </div>
    <div class="div_MemberManagerMenuItem" >
        <h6>天使宝宝2</h6>
        <ul>
          <li><a href='' >09.6.10宋周雨佳</a></li>
          <li><a href='' >09.6.19魏力新</a></li>
            <li><a href='' >09.3.30李泽铨</a></li>
          <li><a href='' >09.5.20周旭</a></li>
        </ul>
    </div>
     <div class="div_MemberManagerMenuItem" >
        <h6>天使宝宝3</h6>
        <ul>
         <li><a href='' >09.3.30李泽铨</a></li>
          <li><a href='' >09.5.20周旭</a></li>
          <li><a href='' >09.6.19魏力新</a></li>
            <li><a href='' >09.3.30李泽铨</a></li>
        </ul>
    </div>
     <div class="div_MemberManagerMenuItem" >
        <h6>天使宝宝4</h6>
        <ul>
         <li><a href='' >09.6.19魏力新</a></li>
            <li><a href='' >09.3.30李泽铨</a></li>
        </ul>
    </div>
     </div>
   </body>
     <script type="text/javascript" src="/JS/According.js" charset='utf-8'></script>
<script type="text/javascript">
var $ = function (id,obj) {
    obj = obj|| document;
    return "string" == typeof id ? obj.getElementById(id) : id;
};
var $$ = function (name,obj) {
    obj = obj|| document;
    return "string" == typeof name ? obj.getElementsByTagName(name) : name;
};
    (function(){
        var mainMenu = $("div_MemberManagerMenu");
       var according = new __AccordingClass();
       //according.isMultiExpand = true;
       according.initAccording( $$("h6",mainMenu), $$("ul",mainMenu));    })();
</script>
</html>[code=JScript]
/*
功能：滑动门效果封装类
作者：老胡
日期：2010-06-29
*/
function __AccordingClass()
{
    this.isMultiExpand = false; // 是否允许多个同时展开
    this.expandClassName ='';  // 内容展开后的，头类名称
    this.foldedClassName ='';  // 内容折叠后的，头类名称
    this.speedTime = 5 ;       // 展开折叠速度，隔多少毫秒执行一次
    this.speedCount=10 ;       // 展开折叠渐变次数，多少次完成展开折叠
    this.defaultExpandIndex = 0; // 默认展开的索引
    var isIE = document.all?true:false;
    var according=[];            //
    var obj = null;
    var accordingPan =function()
    {
        this.isExpand = true;
        this.maxHeight=0;
        this.timer=null;
        this.header=null;
        this.content = null;
    };
    this.initAccording = function(headerList,contentList,exClassName,fdClassName)
    {
        if(headerList&&contentList&&headerList!=null&&contentList!=null&&headerList.length>0&&headerList.length==contentList.length){
              obj = this;
              for(var i=0;i<headerList.length;i++)
              {
                  according[i] = new  accordingPan();
                  according[i].maxHeight = contentList[i].offsetHeight;
                  according[i].header = headerList[i];
                  according[i].content = contentList[i];
                  according[i].content.style.overflow='hidden';
                  if(exClassName&&exClassName!=null&&exClassName!='')obj.expandClassName = exClassName;
                   if(fdClassName&&fdClassName!=null&&fdClassName!='')obj.expandClassName = fdClassName;
                  obj.bindEvent(i);
              }
              if(!obj.isMultiExpand)
              {
                   obj.expandFolded(obj.defaultExpandIndex);
              }
        }
    };
    this.bindEvent = function(i)
    {
         if(window.addEventListener){
               according[i].header.addEventListener('click', function(e){ obj.expandFolded(i);  },false);
          }else{
               according[i].header.attachEvent("onclick",function(){ obj.expandFolded(i);  });
         }
    };
    this.expandFolded = function(i)
    {
             if( according[i].isExpand)
             {
                 if(obj.isMultiExpand)
                 {
                    clearInterval(according[i].timer);
                  according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
               }else{
                    for(var j=0;j<according.length;j++){
                     if(i!=j)obj.toFolded(j);
                    }
               }
             }
             else
             {
                 clearInterval(according[i].timer);
             according[i].content.style.display='';
         according[i].timer=setInterval(function(){obj.expand(i);},obj.speedTime);
         if(!obj.isMultiExpand)
                 {
                    for(var j=0;j<according.length;j++){
                       if(i!=j)obj.toFolded(j);
                    }
                 }
             }
    };
    this.toFolded = function(i){
         clearInterval(according[i].timer);
          according[i].timer=setInterval(function(){obj.folded(i);},obj.speedTime);
    };
    this.expand=function(i)
    {
        var h = according[i].content.offsetHeight;
       if(h<according[i].maxHeight)
       {
   var v = Math.round((according[i].maxHeight-h)/obj.speedCount);
    v = (v<1) ? 1 :v ;
    v+=h;
   according[i].content.style.height=( v)+'px';
   if(isIE){
        according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
   }else{
         according[i].content.style.opacity = (v/according[i].maxHeight);
   }
    }else{
        if(obj.expandClassName !='') according[i].header.className = obj.expandClassName ;
    according[i].content.style.height=according[i].maxHeight +'px';
    according[i].isExpand = true;
    clearInterval(according[i].timer);
    }
    };
    this.folded=function(i)
    {
       var h = according[i].content.offsetHeight;
       if(h> 0)
       {
   var v = Math.round(h/obj.speedCount);
   v = (v<1) ? 1 :v ;
   according[i].content.style.height=(h - v)+'px';
   if(isIE){
        according[i].content.style.filter= 'alpha(opacity='+(v*100/according[i].maxHeight)+');';
   }else{
         according[i].content.style.opacity = (v/according[i].maxHeight);
   }
    }else{
         if(obj.foldedClassName !='') according[i].header.className = obj.foldedClassName ;
    according[i].content.style.height='0px';
    according[i].content.style.display='none';
    according[i].isExpand = false;
    clearInterval(according[i].timer);
    }
    }
}
[/code]

很多种解决方法，级联，下拉菜单实现，树形控件treeview，还有自己写js。

用TreeView,通过它的一些属性实现

jquery easy ui 可以轻松实现这个效果并且效率还不错

在这里说不清楚，也发不全，得JS+div综合实现，一般后台都是这样做的，需要的话，我可以发给你一个通用的

网上很多，都是用JS或者Jquery实现的，就是在LI里面套用UL

源码
http://blog.csdn.net/lzf1988119/archive/2009/07/30/4393246.aspx另外也可以用个第三方控件

ajax控件实现方式：<cc1:Accordion ID="Accordion2" runat="server" FadeTransitions="true" FramesPerSecond="40"
                        TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
                        <Panes>
                            <cc1:AccordionPane ID="AccordionPane1" runat="server">
                                <Header>
                                    <div class="left_menu">
                                        <a>首页信息管理</a>
                                    </div>
                                </Header>
                                <Content>
                                    <div class="left_child_menu">
                                        <a href="sytg.aspx">推广信息审核</a>
                                    </div>
                                    <div class="left_child_menu">
                                        <a href="syrmcp.aspx">热卖产品审核</a>
                                    </div>
                                </Content>
                            </cc1:AccordionPane>
                            <cc1:AccordionPane ID="AccordionPane4" runat="server">
                                <Header>
                                    <div class="left_menu">
                                        <a>产品页信息管理</a>
                                    </div>
                                </Header>
                                <Content>
                                    <div class="left_child_menu">
                                        <a href="zkcp.aspx">折扣产品信息审核</a>
                                    </div>
                                    <div class="left_child_menu">
                                        <a href="rqph.aspx">人气排行</a>
                                    </div>
                                    <div class="left_child_menu">
                                        <a href="tjcp.aspx">推荐产品</a>
                                    </div>
                                    <div class="left_child_menu">
                                        <a href="zxcp.aspx">最新产品</a>
                                    </div>
                                </Content>
                            </cc1:AccordionPane>
                            <cc1:AccordionPane ID="AccordionPane5" runat="server">
                                <Header>
                                    <div class="left_menu">
                                        <a>店铺页信息管理</a>
                                    </div>
                                </Header>
                                <Content>
                                    <div class="left_child_menu">
                                        <a href="tjdp.aspx">推荐店铺审核</a>
                                    </div>
                                </Content>
                            </cc1:AccordionPane>
                             <cc1:AccordionPane ID="AccordionPane7" runat="server">
                                <Header>
                                    <div class="left_menu">
                                        <a>退出</a>
                                    </div>
                                </Header>
                                <Content>
                                    <div class="left_child_menu">
                                        <a href="../loginout.aspx">退出</a>
                                    </div>
                                </Content>
                            </cc1:AccordionPane>
                        </Panes>
                    </cc1:Accordion>

right

是用DIV 来框住表格然后 onclick事件里控制div隐藏和展开

HTML+CSS配合JS做就好了1
我的下载里模版很多自己找中意的了!

调试易

100分，这样的菜单怎样实现

解决方案 »