jQuery FlyDown/FlyUp Menu sous-conteneur

Question

Je me demandais s'il était possible pour quelqu'un de me fournir un guide pour créer un menu utilisant jQuery similaire au MultiMolumn RadMenu de Telerik(). Je suis désespéré de faire ce travail, et je ne veux pas débourser un pot-charge d'argent pour une suite de composants. Je travaille sur quelque chose en utilisant le hover de jQuery(); fonction, mais les conteneurs de menu ne veulent pas glisser vers le haut pour une raison quelconque.

en remerciant d'avance!

Answer 1

Ceci est pour le clic

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

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

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

Ceci est l'autre script pour mouserover et 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 2

Regardez dans les outils de l'interface utilisateur de jQuery. Compte tenu de votre utilisation de Telerik, je suppose que vous utilisez ASP.NET ou leurs trucs MVC. MS cherche à intégrer jQuery dans son contenu (ASP.NET AJAX Framework), donc ça va payer pour se familiariser avec toute la série. Le widget Accordéon, ou l'effet Slide peut être exactement ce que vous cherchez.

AJOUTÉ: Il y a un widget Menu ui dans la branche expérimentale, mais pour l'instant, vous seriez obligé de faire rouler le vôtre.

AJOUTÉ: Voici un plugin (jdMenu ou droppy), si vous préférez cette route.