How to convert a css only megamenu to jquery based

Question

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/

Animations exist in css3 if you don't have all to much restrictions on browser compatibility. What exactly do you want for an animation? — Caleb Doucet, Nov 09 '12 at 16:32
Can you post your HTML? Seeing the existing functionality would help — AJak, Nov 09 '12 at 16:33
The dropdown should appear with an animation. Just like jquery slide down. I tried with opacity 0 and 1 trick. But it didn't worked because my dropdown uses a -285px towards the left. — user632347, Nov 09 '12 at 16:34
Just try applying the jQuery code to your current page and see what happens. Just try http://api.jquery.com/slideToggle/ to begin with. — Billy Moat, Nov 09 '12 at 16:36
@BillyMoat "Just apply jQuery and see what happens" not a good solution to any problem — Nick Fury, Nov 09 '12 at 16:38

score 2 · Accepted Answer · answered Nov 09 '12 at 16:50

2

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();
 }
);

answered Nov 09 '12 at 16:50

Billy Moat

20,792
7
45
37

definitely need a stop() somewhere :) – Huangism Nov 09 '12 at 16:57
@Billy Moat : Thanks it works like a magic. Any soultion now to make it work for non javascript browsers too? – user632347 Nov 09 '12 at 16:59
@Huangism : where to add that? – user632347 Nov 09 '12 at 17:00
non javascript browser should use css only although I wouldn't worry about non javascript browsers – Huangism Nov 09 '12 at 17:59

How to convert a css only megamenu to jquery based

1 Answers1