Sexy drop down menu hide on click outside

Question

I think many of you know the sexy drop down menu that uses jQuery and CSS to style the drop down menu.

When you click on a arrow trigger, it shows the drop down menu, when you hover out it hides it.

My problem is that I can't get it to hide the drop down menu on click outside. I've searched on Internet, but unfortunately didn't find anything.

My code is :

jQuery(document).ready(function($){
    $('li:has(ul)').addClass('has-children');

    // Sexy Drop Down Menu
    $('li.has-children').append('<span class="dropdown"></span>'); // Adding a span tag with .dropdown class to <li> with child elements

    $("li.has-children .dropdown").click(function(){ // When trigger is clicked...

        // Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.sub-menu").slideDown('fast').show(); // Drop down the subnav on click

        $(this).parent().hover(function(){
        }, function(){
            $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
        });
    });
});

I tried to replace $(this).parent().hover(function(){ by $(this).parent().click(function(){ but it didn't work.

Can someone help me with this problem, please?

Thank you in advance.

In a way your question doesn't make sense because when you want to click outside you already hovered outside. Usually you want to do something like `$(document).click(function(){/*hide your menu*/});` — Tim Vermaelen, Apr 22 '13 at 09:44

Space · Answer 1 · 2013-04-23T13:08:12.133

0

Replace

$(this).parent().hover(function(){

With

$('html').click(function(){

It should then close when you click somewhere else on the page (I assume that is what you meant by click outside).

I have used this on a few sites to close a menu. It is hard to guarantee it will work on all sites without testing, as I expected to run into z-index issues, but it worked first time for me on mine.

Update:

Replace

    $(this).parent().hover(function(){
    }, function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });

With

    $('html').click(function(){
        $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse hovers out of the subnav, move it back up
    });

edited Apr 23 '13 at 13:08

answered Apr 22 '13 at 10:54

Space

2,022
1
19
29

You probably will also need a stop propagation event for when you click inside the `menu`. [Example is given here](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element/153047#153047) – Pankrates Apr 22 '13 at 11:42
It doesn't work, unfortunately. It shows the menu and immediately hides it. – atorscho Apr 23 '13 at 08:59
I have updated the answer. The original code's hover() took 2 functions, whereas we would only need one now. Also Pankrates is correct that you may need that stop propagation example as well. – Space Apr 23 '13 at 13:11

score 0 · Answer 2 · answered May 28 '14 at 12:18

Capitalizing on Ben's answer, If clicking on the menu hides it immediately, why not reverse the click and hover functions:

    jQuery(document).ready(function($){
    $('li:has(ul)').addClass('has-children');

    // Sexy Drop Down Menu
    $('li.has-children').append('<span class="dropdown"></span>'); // Adding a span tag with .dropdown class to <li> with child elements

    $("li.has-children .dropdown").hover(function(){ // Change click to hover event...

        // Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.sub-menu").slideDown('fast').show(); // Drop down the subnav on hover

        $('html').click(function(){
        }, function(){
            $(this).parent().find("ul.sub-menu").slideUp('slow'); // When the mouse clicks out of the subnav, move it back up
        });
    });
});

This way hovering over the arrow will drill down and clicking anywhere else will hide it...if that's what you're looking for.

I'd upvote Ben's answer if I had enough rep since this works just fine, I just swapped out the click on the arrow to become a hover drill down instead — Rafs2, May 28 '14 at 12:19

Sexy drop down menu hide on click outside

2 Answers2