Nested menu with jQuery

Question

In a nested menu, I want to show the submenu of an element when that element is hovered over.

HTML:

<div id="menu">
    <div class="menu-main-menu-container">
        <ul>
            <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li>
            <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a>
                <ul>
                    <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li>
                    <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li>
                </ul>
            </li>
            <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li>
        </ul>
    </div>
</div>

jQuery:

(function($){   
    $(document).ready(function(){
        $("ul.menu-main-menu-container li").hover(function () {                          
            $(this).addClass("hover");
            $('ul:first', this).css({visibility: "visible",display: "none"}).slideDown(200);
        }, function () {
            $(this).removeClass("hover");
            $('ul:first', this).css({visibility: "hidden"});
        });

        if ( ! ( $.browser.msie && ($.browser.version == 6) ) ){
            $("ul.menu-main-menu-container li ul li:has(ul)").find("a:first").addClass("arrow");
        }               
    });
})(window.jQuery);

What am I doing wrong?

What do you mean with "doesn't work"? What do you expect, and what is happening actually? — Asciiom
– Asciiom, Commented Aug 27, 2012 at 11:48

Oyeme · Accepted Answer · 2012-08-28 05:51:30Z

1

Something like this:

 <div id="menu">
    <div class="menu-main-menu-container">
    <ul>
        <li id="mojo_page_list_index" class="mojo_active"><a href="http://localhost/index.php">Home</a></li>
        <li id="mojo_page_list_over"><a href="http://localhost/index.php/over">Over</a>
            <ul style="display:none;">
                <li id="mojo_page_list_bedrijfsprofiel"><a href="http://localhost/index.php/bedrijfsprofiel">Bedrijfsprofiel</a></li>
                <li id="mojo_page_list_geschiedenis"><a href="http://localhost/index.php/geschiedenis">Geschiedenis</a></li>
            </ul>
        </li>
        <li id="mojo_page_list_contact"><a href="http://localhost/index.php/contact">Contact</a></li>
    </ul>
    </div>
</div>

   jQuery(function(){ 
       $(".menu-main-menu-container ul li").hover(function () {                          
            $(this).addClass("hover");
            $('ul:first', this).css({display: "none"}).slideDown(200);
        }, function () {
            $(this).removeClass("hover");
            $('ul:first', this).css({display: "hidden"});
        });
    });

Updated Just replace your js script in your ( fiddle http://jsfiddle.net/kL8RF/1/ )

jQuery(function(){ 
   $("#menu li").hover(function () {                          
        $(this).addClass("hover");
        $('ul', this).slideDown(100);  
    }, function () {
        $(this).removeClass("hover");
        $('ul', this).slideUp(100);
    });
});

edited Aug 28, 2012 at 5:51

answered Aug 27, 2012 at 11:55

Oyeme

11.3k4 gold badges46 silver badges66 bronze badges

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

1 Comment

Ricardo Jacobs Over a year ago

I tried all your options and I got this so far: jsfiddle.net/kL8RF/1 I think there is something wrong with the stylesheet. But it is fun learning this way. Is there somebody who could help me and tell me what I am doing wrong now with this stylesheet?

cih · Accepted Answer · 2012-08-27 11:54:17Z

0

Your selector in the jQuery is wrong. Its looking for class of menu-main-menu-container within a ul and there is not one. I would suggest you debug this in stages, first select the html element you wat and do an alert in jQuery. This will show you have the right element selected then you can go from there with the events on that element.

answered Aug 27, 2012 at 11:54

cih

1,9901 gold badge16 silver badges27 bronze badges

Comments

Bhargav Golla · Accepted Answer · 2012-08-27 12:11:06Z

0

It was jQuery selectors problem. It is looking for a ul with class main-menu-... but not looking for a ul which is descendant of class main-menu-... This should solve your problem.

answered Aug 27, 2012 at 12:11

Bhargav Golla

463 bronze badges

Collectives™ on Stack Overflow

Nested menu with jQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related