Search code examples
javascriptjqueryhtmlcssmegamenu

How to convert a css only megamenu to jquery based

I am using a megamenu in my site, which is purely css based. The disadvantage is that, it doesn't have any animation. The dropdown is getting show all on a sudden. So I am thinking of converting it to jquery based toggle. Here is the current code. How can I convert it to jQuery based?

.dropdown-1column, 
.dropdown-2columns, 
.dropdown-3columns, 
.dropdown-4columns,
.dropdown-5columns {
   margin:-1px auto  0 -285px;
   float:left;
   position:absolute;
   text-align:left;
   padding:10px 5px 10px 5px;
   border:1px solid #dedede;
   background:#fff;
   z-index:999;
   display:none;    
}


.menu li:hover .dropdown-1column, 
.menu li:hover .dropdown-2columns, 
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
    display:block; 
}

Here is the code http://jsfiddle.net/gsTNS/

Solution

  • This pretty much does what you're looking for I think. Could probably be refined:

    http://jsfiddle.net/gsTNS/5/

    Basically I've added a class of "has-dropdown" to each LI that has a dropdown and I've added a "dropdown" class to each dropdown DIV.

    Then use jQuery to activate a slideToggle function:

    jQuery("div#menu ul.menu li.has-dropdown").hover(
 function () {
   $(this).find("div.dropdown").slideToggle();
 },
 function () {
   $(this).find("div.dropdown").slideToggle();
 }
);