Ability to close Dropdown Menu after link is clicked

Community resources Product feedback
1

Is there a way to force the dropdown to close when linking to sections on the same page. I made a simple example here http://nav-tester.webflow.com/

The dropdown menu should close when you click one of the links. Is this working as intended?

1 Like
2

Hi @Will_Specht, at the moment, the Drop Down widget does not auto close after click, however the Nav Bar Widget does auto close, so if you need this, you can use the Nav Bar, and set the Nav Bar to to show the Drop Down for all viewports (desktop, tablet, landscape phone and portrait phone) It is a good suggestion to have this close on click, so we will look at that and see about adding this in an upcoming update.

Cheers, Dave

2 Likes
3

Hello,

While working on my site, I also needed the same feature. After various attempts and hacks on the webflow designer
I saw that it is not possible at the moment so I prepared a full zip and edited the webflow.js.

The below code works for me, my dropdown now closes when I click on dropdown items, the toggle or outside.
In webflow.js find the following function under the dropdown components section and add those lines:

       if($target.closest('.w-dropdown-link')) 
{
close(data);                      
}

sample is below…

  function outside(data) {
    // Unbind previous tap handler if it exists
    if (data.outside) $doc.off('tap' + namespace, data.outside);

    // Close menu when tapped outside
    return _.debounce(function(evt) {
      if (!data.open) return;
      var $target = $(evt.target);
      if ($target.closest('.w-dropdown-toggle').length) return;
      if (!data.el.is($target.closest(namespace))) {
        close(data);
      }
                      if($target.closest('.w-dropdown-link')) {
                      close(data);
                      
                      }
    
    });
  }
4 Likes
4

Hi @Tolga_Inam, Thanks for sharing :slight_smile:

@danro, check this out :slight_smile:

5

Only downside is, you can not check in designer.

1 Like
6

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

7

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.

8

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.

9

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
10

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

11

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.

12

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

13

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

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

15

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
16

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
17

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

18

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

19

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!

20

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: