Dropdown Menu - Prevent from closing when clicked elsewhere?

Design help Custom code
1

Hi,

I originally posted this in the design/layout section of the forum, however I have arrived at the conclusion that what I am trying to do is not possible without some use of custom code, so I decided to post again here. I’m certain that it’s possible I’m just not sure how I would go about doing it as custom code is something I have very little experience with.

I have a dropdown menu that is functioning fine, however by default in webflow dropdown menus automatically close themselves whenever an area outside of the dropdown menu is clicked - I want to keep my dropdown menu open when clicking elsewhere in the page and only collapse the dropdown if the user clicks in the area of the “dropdown toggle” element.

Can anyone help me with this?

Here’s a link to my original post if anyone wants to see -

What I am trying to do is create a dropdown sidebar as symbol for use on my ecommerce site, with multiple layers of categories and subcategories that would make it easy for customers to find their products.

I would like it to function in a similar way to the example below:
https://eytys.com/

I have made a start on this, and it works to some extent, however I am having two problems that is preventing it from functioning how I would like it to.

Here is my test example so far:
https://thrifty-store.webflow.io/styles

Please note that as it is a test, only the Shop>Mens>Tops>Shirts buttons are currently functioning.

Edit:

Another thing I would also like to do if possible:
When I select a category and go to the next page, the sidebar is returned to it’s initial state.

For example, if I click Shop>Mens>Tops>Shirts, when the Shirts page loads, the dropdown is reverted back to it’s original state and displays just Shops, Looks and Contact.

If possible, I would like to set this up so that when the user clicks on a category, it is remembered on the next page where they were in the dropdown.

It may be worth mentioning for clarification I will be using this as a symbol on all of my ecommerce pages within my website too, so it would need to function as a symbol on my product and category template pages too.

Here is my read only, although I am in the process of experimenting so the contents of the project may change. The sidebar I am trying to create is on the Styles page.

https://preview.webflow.com/preview/thrifty-store?utm_medium=preview_link&utm_source=dashboard&utm_content=thrifty-store&preview=047bb88d15c3d441c51c7a9204f14f27&mode=preview

Thank you to anyone who was taken the time to read, if anyone is able to offer advice then it would be greatly appreciated!

Or, failing that, if anyone could point me in the right direction of where I could learn to fix this, or recommend anyone that I could ask for assistance.

Apologies for the long post but as it is quite a complex thing I am trying to do I wanted to be as clear as possible for everyone to see the problem. If anyone needs me to explain anything again (as I am sure my explanation wasn’t great) then please just ask and I will try to clear it up.

1 Like
2

@cccurtis

I think your first problem could be solved with interactions, you would just need to close each submenu in each close interaction, so that even if the menu isn’t open it resets to the initial hidden state.

However, problem 2 is a different story and in my opinion would be much easier to solve with jQuery than with really complicated interactions. Which would lead me to say that you should just solve both problems with jQuery since you’ll basically have to recreate that functionality with it.

Off the top of my head I would recommend checking the url that is navigated to (you could do this with a cookie too, but not worth it IMO) to determine which menu to “stay open” on the next page load.

So if page path contains /mens/ open the “Mens” submenu. And so on and so forth. You could also bold the specific submenu item as well using a method like this.

Based on your level of experience with jQuery this isn’t all that difficult. I would recommend starting here maybe: How to Create Accordion Menu (CSS3+jQuery) - Designmodo

Try to get the menu functioning first with jQuery, basically toggling a class on and off on click. The toggle method is really nice for this

You can read url pathnames using this: javascript - Get current URL with jQuery? - Stack Overflow

You’ll need a document.ready statement to set the intitial state of the menu and then some click events to change it.

1 Like
3

Hi Sam,

Thanks a lot for your reply, I’ll take a look at those links.

When I do have the right code, how would I go about implementing it into my Webflow project?

Would I just put the jQuery code in the footer of my custom code section? Sorry if this is a dumb question but I have no experience with this kind of thing haha.

4

@cccurtis - yes, you’ll put it in the footer custom code so that it is called after jQuery has been loaded by Webflow.

Start simple, just try to get something basic working. You’ll need to target elements on the page using classes or ids in jQuery like this:

$(".sidebar-text").on("click", function() {
    // do stuff
});
1 Like
5

Hi @sam-g,

Thanks for your reply - I’ve since made some progress on this.

I’ve now changed it so that instead of using text blocks, div blocks and interactions to setup my menu, I am now using dropdowns nested within each other.

This has eliminated the problem of the subcategories not collapsing within each other, and although it is an improvement it has created another problem.

Now, whenever I click anywhere else on screen, due to the nature of dropdown menus, they are collapsed automatically. Do you know how I could go about making them remain open?

I would like it so that they only close when the user clicks on the dropdown toggle element, rather than clicking anywhere on screen.

Thanks!

6

@cccurtis - I think nesting drop downs is going to become very hard to control. As far as I’m aware you can’t interrupt the functionality of built-in webflow dropdown menus. I would again recommend building this with jQuery if you need that specific functionality or abandoning the idea of “keeping the menu open” when the user navigates to a page. The menu is reloading every time a page loads and you are basically creating the illusion :crystal_ball: that it has stayed open for the user. To do this in an efficient way you’re going to have to read the current page url and set the menu to appear to have stayed open.

If you abandon that piece of functionality I think you can accomplish what you are going for with a combination of click interactions; but still not using the built-in dropdowns.