jQuery下拉菜单/弹出菜单子容器

我想知道是否有人能为我提供一个使用jQuery创建菜单的指南，它类似于Telerik的多列RadMenu（）。我非常想让它工作起来，我不想为一个组件套件花一大笔钱。我正在使用jQuery的hover（）做一些事情；功能，但由于某些原因，菜单容器不希望向后滑动

---

提前感谢你

查看jQuery的UI工具。鉴于您使用Telerik，我猜您使用ASP.NET或其MVC内容。MS希望将jQuery集成到他们的东西（ASP.NETAjax框架）中，所以熟悉整个系统会有回报。手风琴小部件或幻灯片效果可能正是您想要的

补充：在实验分支中有一个菜单ui小部件，但现在，您将无法运行自己的菜单ui小部件

添加：如果您喜欢这条路，这里有一个插件（或）。

这是用于单击的

<script type="text/javascript">
    $(document).ready(function() {

        $(".subMenu").hide();

        $(".btnJQUERYSubMenu").click(function() {
            $(this).next(".subMenu").slideToggle("fast");
            $(this).toggleClass("active");
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.subMenu”）.hide（）；
$（“.btnJQUERYSubMenu”）。单击（函数（）{
$（此）.next（“.subMenu”）.slideToggle（“快速”）；
$（此）.toggleClass（“活动”）；
返回false；
});
});

这是mouserover和mouseout的另一个脚本

$（文档）.ready（函数（）{
$（“.subMenu”）.hide（）；
$（“.btnJQUERYSubMenu”）.mouseover（函数（）{
$（此）.next（“.subMenu”）.slideToggle（“快速”）；
$（this.toggleClass（“活动”）
}).mouseout（函数（）{
$（此）.next（“.subMenu”）.slideToggle（“快速”）；
$（this.toggleClass（“活动”）
});
$（“.subMenu”）.mouseout（函数（）{
$（this）.slideToggle（“fast”）；//或者您可以使用用户隐藏而不是slideToogle。css发生了一些问题，可能是因为我在测试中使用了css类
});
});

hi alphadogg！谢谢你的建议。是的，我使用的是ASP.NET 3.5版的框架。手风琴插件的效果不是很好，但我会看看幻灯片效果。有很多的周期插件，但这是更多的图像。当我往前走的时候，我会回到这里。谢谢你好，阿尔法多格。Thanx的插件链接！droopy看起来是一个很好的插件，可能正是我想要的。我会把结果贴在这里的，谢谢你的回复！这看起来不错，只是需要在鼠标上方向下滑动，在鼠标上向上滑动。我尝试过使用jQuery hover（）；但是当我把鼠标移到另一个项目上时，我的第一个项目就消失了。有什么线索吗？不客气，你需要使用鼠标悬停和鼠标悬停功能。我已经更新了关于鼠标悬停的答案，请检查：）这看起来太棒了，巴巴拉斯！塔克斯！让我只是应用一些css，并尝试一下！巴巴拉斯，它就像一个符咒！非常感谢你的帮助。有了一点CSS的魔力，它看起来和功能都很棒！但此后我需要更加熟悉jQuery。干杯再看看我的答案，它是更新的

<script type="text/javascript">
        $(document).ready(function() {

            $(".subMenu").hide();

            $(".btnJQUERYSubMenu").mouseover(function() {
                $(this).next(".subMenu").slideToggle("fast");
                $(this).toggleClass("active")
            }).mouseout(function() {
                $(this).next(".subMenu").slideToggle("fast");
                $(this).toggleClass("active")
            });

            $(".subMenu").mouseout(function() {
                $(this).slideToggle("fast"); // or you can user hide instead of slideToogle. Something happens to css it might be about that i have css classes on testing
            });
        });
    </script>

<ul class="menu-panel">
    <li>
        <asp:HyperLink  runat="server" Text="Home"></asp:HyperLink>
    </li>
    <li>
        <asp:HyperLink ID="lnkSideMenuEstates" runat="server" Text="Estates" ></asp:HyperLink>
    </li>        
    <%--SubMenu--%>
    <li>
        <asp:HyperLink runat="server" Text="About Us" CssClass="btnJQUERYSubMenu plus" NavigateUrl="#"></asp:HyperLink>
        <div class="subMenu">
            <ul class="menu-panel paddingleft10">
                <li>
                    <asp:HyperLink runat="server" Text="Who are we"></asp:HyperLink>
                </li>                   
           </ul>
        </div>
    </li>
</ul>