Ability to close Dropdown Menu after link is clicked

Would be nice, if this could be done via the API. Something like $(‘.w-dropdown’).data(‘.wDropdown’).close()

Sweet! Thanks. Works well for me.
Would be great if this was in designer. This issue arises when using a dropdown with anchor links in a scrolling site.

I’ve implement but unfortunately this is causing issues on mobile for me. (tested on iPhone 4s, 5s, and 6 only)

A couple of things happen:

  1. all hover and click-states needed to be removed in order for the mobile dropdown to open.
  2. once hover and click-states were removed, the dropdown did open but the touch-points don’t match up to what’s shown in the dropdown. Tapping will go to the link that was previously in the mobile menu (before the dropdown was initiated). Oddly enough, if I do a long hold on one of the mobile dropdown items, the correct url is shown and I can “open” or “open in new tab” and it works fine.

Working on a solution to only effect the desktop menu and not the mobile menu. Will post if I figure something out.

this seems to have taken care of the mobile dropdown weirdness:

 if (Modernizr.touch || winMobileCheck === true) {
            //this is a mobile device
        } else {
            if($target.closest('.w-dropdown-link')) {
                close(data);
            }
        }
});

}

1 Like

Hi everyone,

I’ve got this exact same problem. The scroll site that I’m designing consists of a menubar with three dropdown lists which corresponds to three different pages. These lists are opened on hover. The different items in each list is linked to a section of each page. So when a link is clicked and the page scrolls down to a said section the dropdown list covers the heading of that section. Very annoying and not very intuitive for the visitor.

I’ve tried copying the code @Tolga_Inam provided into the Footer code for the entire site but can’t det it to work.

What I want is essentially a piece of code that makes the menu dropdown close when a link in it is clicked.

Is there any new progress on this?
Would really appreciate it!

Thanks,
Daniel

Hey @catino there’s also now an option for drop down menus to open on hover instead of click, if you look in the settings tab you’ll see a checkbox for it now which solves this problem for the most part. :slight_smile: if not I have some custom code which works for this as well.

Hi @Waldo

Thanks for your reply! I’m aware of this option but alas it doesn’t solve our problem. With “Open on hover” switched on the menu still doesn’t close down after I click the link. Not on desktop nor mobile.

Just to clarify, the link I’m clicking is in a dropdown list in the menu and it refers to a section on the same page.

The problem is biggest on mobile, where the menu cover a bigger portion of the screen and thus covers more content. So when you click the hamburger and open the menu, click a dropdown to expand it, and then click a link, the window scrolls down slightly to the referred section, but the menu is still out and covers everything.

Hope there’s a solution for this!
Daniel

Hey @catino

This should work for you, just paste it in the footer area of your site :smile: :

<script>
 $("a").click(function(){
    $("nav").removeClass("w--open");
});
 $("a").click(function(){
    $("div").removeClass("w--open");
});
</script>

Thanks @Waldo! That works really well for desktop! Mobile still doesn’t work though…
Is there a way to make this code affect the mobile menu as well? We had to use a separate menu to get other functions to work so our mobile menu is a separate object, only visible on mobile and always with the “hamburger” button.

Thanks for looking at this for us me!
/Daniel

Hi @cyberdave. Back in August 2014 you had mentioned that you guys would look into adding ‘close on click’ for the Dropdown widget – is this still the plan? Ta.

2 Likes

Hi @spincinconi, thanks for giving this topic some CPR :wink: I will need to check on this. If there is not a feature request already made, I will ensure that it gets some attention. As soon as there is more info on this, I will update.

2 Likes

Many thanks, @cyberdave. Looking forward to an update. Cheers.

For mobile, see my reply in this thread from Jul 2015

hello. i tried pasting this code in an embed element in what would be the footer element of my page. however, nothing seems to have changed. some more explicit instructions would be really helpful. i very much need this to work. thanks!

Hi @cyberdave

Old post, but I give the topic a bit more CPR, since it’s a very useful feature! Any news? :slight_smile:

Edit: I see now with some more testing that this actually works if I use the built in ‘Link to section’ feature. But since I often link to sections on different pages and thereby have to use the ‘…/#section’ link hack, it does not work :cry:

I have added it to my ultimate wish list too :wink:

@Waldo I have tried that code on a site, and it does close the dropdown menu on mobile, but the whole NavBar stays open and overtakes the whole page. How can you close both the Dropdown and the opened Navbar on mobile ?

@cyberdave

Here’s the page: http://aaa-canada.webflow.io/about-us

@MichealReno works with me, but see my post above!

I still would like to see this feature implemented please :slight_smile:

Very important feature. Hope for a quick update!!!