jQuery FlyDown/FlyUp Menu sub-container

Question

Hi there,

I was wondering if its possible for anyone to provide me with a guideline for creating a menu using jQuery that is similar to Telerik's MultiColumn RadMenu (http://demos.telerik.com/aspnet-ajax/menu/examples/multicolumnmenu/defaultcs.aspx). I am desperate to make this work, and I don't want to fork out a pot-load of money for a component suite. I am working on something using jQuery's hover(); function, but the menu containers don't wan to slide back up for some reason.

thanking u in advance!

Answer 1

Look into jQuery's UI tools. Given your use of Telerik, I am guessing you use ASP.NET or their MVC stuff. MS is looking to integrate jQuery into their stuff (ASP.NET AJAX Framework), so it'll pay off to get familiar with the whole she-bang. The Accordion widget, or the Slide Effect may be exactly what you are looking for.

ADDED: There is a Menu ui widget in the experimental branch, but for now, you'd be stuck rolling your own.

ADDED: Here's a plugin (jdMenu or droppy), if you prefer that road.

Answer 2

This is for the click

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

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

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

This is the other script for mouserover and mouseout

<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>

Answer 3

I have created this also:

http://sarfraznawaz.wordpress.com/2010/03/13/creating-panel-menu-with-jquery/