Close dropdown menu

Design help General
1

I really dont know why this is not built in - its simply a no brainer that you want to close the dropdown when you click the link. Its astonishing.

Anyway, ive tried everything. this is the latest:

$(‘.dropdownmenuitem’).on(‘click’, ‘a’, function() {
$(‘.dropdownmenu’).triggerHandler(‘click’);
});

Doesnt work. Tried the other way to remove the w–open from all div and nav but then I face this annoying issue that I need to click twice on the dropdown to open it again.

Please any help really appreciated. Such a simple thing is turning out to be hell.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hello @mknee :raised_hands:

Maybe you can find an answer here > Ability to close Dropdown Menu after link is clicked - #24 by Toddy

Piter :webflow_heart:

3

Doesnt help. I am already using

$(“a”).click(function(){
$(“nav”).removeClass(“w–open”);
});
$(“a”).click(function(){
$(“div”).removeClass(“w–open”);
});

in the form of

$(‘.dropdownmenuitem’).each(function(){
$(this).click(function(){
$(“nav”).removeClass(“w–open”);
$(“div”).removeClass(“w–open”);
});
});

It closes the dropdown but I need to click twice after to open it again.

Any ideas?

4

Can you share your read only link?

5

Its confidential site. I cant share. How can I simulate a click on the body which should close the dropdown. Thats built in right

7

Hi @Siton_Systems, thanks for this, but it generates the double click issue when trying to open the dropdown again. Do you get that too?

@Waldo @cyberdave

8

I update my answer above (issue fixed).

9

Just create an extra link line that the user can select to return to the same page, such as “return” or “close menu” – sometimes it’s okay to think inside the box.

11

Any updates on this one?

I’m having the same issue…

12

Hello people,

I was feeling the same frustration about this issue and had to find a way to make this happen. This effect can be achieved through custom animation, no code required! You must create your own custom dropdown with the use of the div block structure I will show and the animations that go with each one.

Directions:

  1. DropdownWrapperDivBlock (Put Everything in This Div)

position: static
animation: hover on (Show DropdownListDivBlock display: block)
animation: hover out (Hide DropdownListDivBlock display: none)

  1. DropdownToggleDivBlock (Add text for the dropdown button itself here)

position: relative

  1. DropdownListDivBlock (This div holds your clickable links that dropdown)

position: absolute
display: show none

  1. DropdownLink1 (Put these inside DropdownListDivBlock)
    DropdownLink2
    etc.

animation: onClick hide DropdownListDivBlock
class: should be the same for each link block - copy and paste once you develop the first animation

It’s a bit complicated, but definitely works.
Hopefully this creates the intended functionality everyone is looking for.

1 Like
13

What’s going on with this one? My Google search showed an original post about this topic from 2014. I use Barba.js with Webflow since Webflow doesn’t support SPA smooth style routing where layout animations occur on elements that persist through the navigation.

That works great, but then if I use a Drop Down component for navigation, the menu stays open after navigation instead of closing, and I’ve found no working solution to problematically close the menu via custom code). Of course, I can create a custom component that can do most of this, but then I lose auto-close on mouse out, plus half the fiddle with the styles to show and hide the menu with making edits instead of just clicking the convenient “Open Menu” button that is available on the Drop Down component.

I’m so impressed with Webflow, but things like this make me wonder if you guys are stuck on a legacy stack or something? I have to escape hatch so often that the convenience and UX of Webflow are diminished.

Thing like this, and not being able to send different forms to different people make me wonder if a giant overhaul in the works or something. There is so much powered to be gained by creating an actual API for developers, leveraging more modern techniques like SPA/PJAX routing animations, better theming support, custom CMS views (drag images in a grid view to reorder, anyone?), the list goes on. Sounds exciting, let’s hope so.

14

This seems to do the trick.

this.$element.find(".w-dropdown-list a").click((function() {
  this.$element.find(".dropdown").triggerHandler("w-close.w-dropdown");
}

w-close.w-dropdown is closeEvent + namespace when inspecting the code.

It’s a bit dodgy, but it’s better than this:

  this.$element.find(".dropdown-toggle, .w-dropdown-list").removeClass("w--open");
  this.$element.find(".dropdown-toggle").attr("aria-expanded", "false");
  this.$element.find(".dropdown").css("z-index", "");
  $.data(this.$element.find(".dropdown")[0], ".wDropdown").open = false;

which is the first way I managed to avoid the two clicks needed to re-open

Edit: this.$element is just a reference to the top level element of the dropdown as a jQuery element. If you have more than one drop down on a page, this needs to run for each dropdown with the correct reference.

2 Likes
15

@Cody_Rodgers, @Jd_Bothma, @kws-philip - check my update answer above.

https://discourse.webflow.com/t/close-dropdown-menu/74499/#6

1 Like
16

Did anyone every write to webflow about this? Also, there are a few solutions on this thread; did any of them work?

17

A solution that actually works!! (for me at least) without custom code! I think it will only work if all your section links are on one page.

First: The problem causing the dropdown to not disappear is having external links that are actually section links (with the hashtag etc). If your link goes to a completely different page, the page will reload without the dropdown, the dropdown only stays if you are referencing a section on the same page, but through an external link.

My situation is that I have a navbar that I turned into a symbol so that it will be the same on every page. The items in it are section links which have to be external so they work from pages that do not include the section links. The navbar not disappearing is a result (BUG) from having section links entered as external links, BUT the navbar disappears perfectly if the links are page sections, not external links. SO. You keep the links as external links in the navbar used across the pages not including the section links. Then duplicate and create a different navbar only on the page with section links and just set the links as section links not external links.

Hope that makes sense…

1 Like
18

That’s amazing and it works like charm.
:heart_eyes: :heart_eyes: :heart_eyes: :heart_eyes:

1 Like
19

SOLVED: Instead of triggerHandler in the custom code’s last line, I needed trigger , because triggerHandler only targets the first element.

@mknee I’m having the exact same issue and can’t figure it out. Did you ever figure it out?

20

SOLVED: Instead of triggerHandler in the custom code’s last line, I needed trigger , because triggerHandler only targets the first element.

@Jd_Bothma , hoping you can help. I tried your solution and it kind of works. The issue is that I didn’t use “this.$element” in my coding, and I don’t know how to “rewrite” it to make it work.

Here’s the post I just posted with more specifics: Need to click twice before re-opening drop down

Hope you can help?

21

Wow, this deep into it and Webflow has no integrated solution. How sad. @benlorimore, thank you for this post. Does exactly what I need it too. Just not cool that I had to ruin my Nav symbol over it. Either way, I was able to accomplish what I needed.

23

$(".w-dropdown").trigger("w-close") Running this helped me. You can change and make the Jquery selector point to a specific dropdown

5 Likes