满分问滑动菜单实现？

js实现
或者jquery更简单.

用JS来实现就OK了，如果只滑动，没有其他高级的动画效果的话，很容易。用JQUERY能简化过程。

下次我发给你，用js或ajax控件都可以，
[email protected]

显示隐藏层而已，没什么花头，建议做成web用户控件。

ajax控件中的Accordion控件，，

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><!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">
    <title></title>
     <style type="text/css">
        .accordion {
            width: 400px;
        }

        .accordionHeader {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #2E4d7B;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }

        .accordionHeaderSelected {
            border: 1px solid #2F4F4F;
            color: white;
            background-color: #5078B3;
            font-family: Arial, Sans-Serif;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-top: 5px;
            cursor: pointer;
        }

        .accordionContent {
            background-color: #D3DEEF;
            border: 1px dashed #2F4F4F;
            border-top: none;
            padding: 5px;
            padding-top: 10px;
        }
    </style>

    <script type="text/javascript">
        function fun() {
            var text = document.getElementById("TextBox1").value;
            var values=WebApplication1.WebForm2.isCheck(text).value;
            alert(values);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
      <ajaxtoolkit:toolkitscriptmanager id="ToolkitScriptManager1" runat="server"></ajaxtoolkit:toolkitscriptmanager>
    <div>



  
<asp:Panel ID="Panel1" runat="server">
    <h2>Hello World!</h2>
</asp:Panel>
<ajaxToolkit:AlwaysVisibleControlExtender
    ID="AlwaysVisibleControlExtender1"
    TargetControlID="Panel1"
    VerticalSide="Top"
    VerticalOffset="10"
    HorizontalSide="Right"
    HorizontalOffset="10"
    runat="server" />

    <!--可折叠控件->
    <ajaxToolkit:Accordion
    ID="Accordion1"
    CssClass="accordion"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent"
    runat="server">
<Panes>
    <ajaxToolkit:AccordionPane runat="server">
        <Header>Pane 1</Header>
        <Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content>
    </ajaxToolkit:AccordionPane>
    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
        <Header>Pane 2</Header>
        <Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content>
    </ajaxToolkit:AccordionPane>
    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
        <Header>Pane 3</Header>
        <Content>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
        Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
        </Content>
    </ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
    </div>

</form>
</body>
</html>
jquery+AjaxControlToolkit

DIV的隐藏显示
MENU
http://www.open-open.com/ajax/Menu.htm

能把实例发到邮箱里吗？
[email protected]

能给个解决方案的实例吗？到底怎样开发AJAX空间啊？

jquery插件，到jquery官网下载。。
http://jqueryui.com/demos/accordion/
你需求应该是这个

不用这么复杂吧，系统带的Menu控件里边，自己设计一下鼠标停留样式（StaticHoverStyle）完全可以做到啊。

Menu控件可以实现？怎样实现？有实例吗？

js:
<title>带记忆功能的伸缩菜单</title>
</head><body>
<ul>
    <li>
        <a href="javascript:;" onclick="show('ol1')">国内新闻</a>
        <ol class="itemmenu" id="ol1" style="display:none;">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ol>
    </li>
    <li>
        <a href="javascript:;" onclick="show('ol2')">国际新闻</a>
         <ol class="itemmenu" id="ol2" style="display:none;">
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
        </ol>
   </li>
    <li>
        <a href="javascript:;" onclick="show('ol3')">宇宙新闻</a>
         <ol class="itemmenu" id="ol3" style="display:none;">
            <li><a href="#">G</a></li>
            <li><a href="#">H</a></li>
            <li><a href="#">I</a></li>
        </ol>
    </li>
</ul>
</body>
</html>
<script language="javascript" type="text/javascript">
function $(obj){
    return document.getElementById(obj);
}
//初始化左边菜单
function setCookie(sName,sValue,expireHours) {
    var cookieString = sName + "=" + escape(sValue);
    //;判断是否设置过期时间
    if (expireHours>0) {
         var date = new Date();
         date.setTime(date.getTime + expireHours * 3600 * 1000);
         cookieString = cookieString + "; expire=" + date.toGMTString();
    }
    document.cookie = cookieString;
}
//--- 获取cookie
function getCookie(sName) {
  var aCookie = document.cookie.split("; ");
  for (var j=0; j < aCookie.length; j++){
    var aCrumb = aCookie[j].split("=");
    if (escape(sName) == aCrumb[0])
      return unescape(aCrumb[1]);
  }
  return null;
}
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var j = 0; j < elem.length; j++) {
        var classes = elem[j].className;
        if (myclass.test(classes)) retnode.push(elem[j]);
    }
    return retnode;
}
function show(obj){
    if($(obj).style.display == "none"){
        $(obj).style.display = "block";
    }else{
        $(obj).style.display = "none";
    }
    setAllItemCookie();
}
function setAllItemCookie(){
    //遍历菜单入库操作
    var strCookieMenu = "";
    var items = document.getElementsByClassName("itemmenu");
    for(var i = 0;i<items.length;i++){
        if(items[i].style.display=="block"){
            strCookieMenu += items[i].id + ",";
        }
    }
    setCookie("product-menu",strCookieMenu,1);
}window.onload = function(){
    //初始化菜单
    try
    {
        var currMenu = getCookie("product-menu");
        var arrMenu = currMenu.split(",");
        for(var i = 0;i < arrMenu.length;i++){
            $(arrMenu[i]).style.display = "block";
        }
    }
    catch(e)
    {
    }


}
</script>

<div >
<th>标题1</th>
<ul>
<li>内容1</li>
<li>内容1</li>
</ul>
<div>
<div >
<th>标题2</th>
<ul>
<li>内容2</li>
<li>内容2</li>
</ul>
<div>
给th加个事件单击时隐藏和显示ul标签样式自已加

有AJAX Toolkit Accordion控件在哪里下载嘞

js moseover 的时候调用一个方法()

这里有现成的
http://blog.csdn.net/xlfancy/archive/2010/08/21/5829448.aspx

给你个ajax菜单合集
http://ajax.open-open.com/Menu.htm

http://www.csrcode.cn/html/txdm/cddh/
楼主可以看看这上面的菜单特效，大部分是js的，当然，楼主也可以用flash做。

调试易

满分问滑动菜单实现？

解决方案 »