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...

Answer 1

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

Answer 2

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.

Answer 3

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

   });