Converting single level to multilevel dropdown menu using jquery

Question

I just developed a single level dropdown menu using jquery... How to refactor the same code to make it a multilevel dropdown menu...

Here is my working sample....

The jquery what i used,

$(document).ready(function() {
$("#Programming ul.child").removeClass("child");
$("#Programming li").has("ul").hover(function() {
   $(this).addClass("current").children("ul").fadeIn();
     }, function() {
    $(this).removeClass("current").children("ul").stop(true, true).css("display",
                                                                     "none");
                              });
                            });

EDIT:

Menu1       Menu2
 SubMenu1    SubMenu1
 Submenu2    SubMenu2
    SubMenu21       
    SubMenu22

The second submenu level can be anywere...

Where do you want the multi-level ness to appear?

jamie-wilson
– jamie-wilson

2010-07-28 01:57:03 +00:00
Commented Jul 28, 2010 at 1:57 — jamie-wilson
– jamie-wilson, Commented Jul 28, 2010 at 1:57

jamie-wilson · Accepted Answer · 2010-07-28 02:05:18Z

3

+50

As your code is very generic about hiding/showing the child of the list, all I did was nested another UL inside an LI element, and then positioned it according to it's parent:

http://jsbin.com/oteze/5

(No JS changes, just a new line of CSS targeting Third Level Menu items)

#Programming li ul li ul { left:100px;top:0px; }

answered Jul 28, 2010 at 2:05

jamie-wilson

1,92521 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ehpc · Accepted Answer · 2010-07-28 06:09:02Z

Here is my solution: http://jsbin.com/oteze/9 I tested it on Firefox 3.6.8. ADD: Now it works in IE7 too.

You can nest any number of submenus anywhere. Just like that:

<li><a href="#">Child 1.2</a>
   <ul class="child">
       <li><a href="#">Child 1.2.1</a></li>
       <li><a href="#">Child 1.2.2</a></li>
   </ul>                                                      
</li>

I modified your code a little, so there is difference between first level submenu and other levels. I also moved all show/hide logic to JS.

   $(document).ready(function() {

        $("#Programming ul.child-first-level").hide();
        $("#Programming ul.child").hide();

        $("#Programming ul.child").each(function(index) {
            $(this).css("margin-left", $(this).parent().css("width"));
        });


        $("#Programming li ul.child-first-level").parent().hover(
            function() {
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

        $("#Programming li ul.child").parent().hover(
            function() {
                var offset = $(this).children("ul").offset();
                offset.top = 0;
                $(this).children("ul").offset(offset);
                $(this).children("ul").css("margin-left", $(this).parent().css("width"));
                $(this).children("ul").fadeIn();
            },
            function() {
                $(this).children("ul").stop(true, true).css("display", "none");
            }
        );

   });

Yep, IE doesn't handle offsets well. So I modified code a little. Now it works in IE 7: jsbin.com/oteze/9

Williams · Accepted Answer · 2010-07-28 03:52:05Z

1

Is there any reason why you wouldn't want to use the existing jquery plugin dedicated to this?

A good one is: http://users.tpg.com.au/j_birch/plugins/superfish/

Suckerfish has been around for years as the pure JS version that's about as solid as you can get.

Even if you don't use this I'm sure it'd be helpful to check out his source.

answered Jul 28, 2010 at 3:52

Williams

4,3571 gold badge44 silver badges54 bronze badges

1 Comment

ACP Over a year ago

i just tried a menu without any plugin... So i did it manually but i couldn't convert it to a multilevel menu...

Collectives™ on Stack Overflow

Converting single level to multilevel dropdown menu using jquery

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related