jQuery субконтейнер FlyDown / FlyUp Menu - PullRequest
Новая
       19

jQuery субконтейнер FlyDown / FlyUp Menu

0 голосов
/ 20 февраля 2009

Мне было интересно, может ли кто-нибудь дать мне руководство по созданию меню с использованием jQuery, аналогичного MultiColumn RadMenu от Telerik (http://demos.telerik.com/aspnet-ajax/menu/examples/multicolumnmenu/defaultcs.aspx). Я отчаянно пытаюсь заставить это работать, и я не Я хочу потратить кучу денег на набор компонентов. Я работаю над чем-то, используя функцию hover (); jQuery, но контейнеры меню по какой-то причине не хотят сдвигаться вверх.

Заранее благодарю!

Ответы [ 2 ]

2 голосов
/ 20 февраля 2009

Это для клика 

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

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

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

Это другой скрипт для наведения курсора и мыши 

<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>
0 голосов
/ 20 февраля 2009

Посмотрите на инструменты пользовательского интерфейса jQuery. Учитывая ваше использование Telerik, я предполагаю, что вы используете ASP.NET или их MVC. MS стремится интегрировать jQuery в свои вещи (ASP.NET AJAX Framework), поэтому будет полезно ознакомиться со всем этим. Виджет Аккордеон или Эффект слайда может быть именно тем, что вы ищете.

ДОБАВЛЕНО: В экспериментальной ветке есть виджет «Интерфейс меню», но на данный момент вы застряли бы в своем собственном.

ДОБАВЛЕНО: Вот плагин ( jdMenu или droppy ), если вы предпочитаете эту дорогу.

...