Keep dropdown menu open until clicked on

Design help Animations & Interactions
1

Hi,
I want my side dropdown menu to not close when I click elsewhere on the site. I only want it to close when I click on it again. I know I’m able to do that with a custom accordion but the reason I went with a drop-down menu is that it highlights the text when you are in that section of the page. So I’m wondering if it’s possible to create that interaction with a custom accordion or a way to edit the drop-down menu. And if there is any way to actually have the menu automatically open and close to show which section you are on when you browse the website?

Thanks in advance!

Here is my public link: Webflow - Copy of Mercari Brandland

2

No easy way that I’ve found.

Webflow.js registers a page-wide event so that if you click anywhere, dropdowns close. There isn’t an exposed option to control that behavior, and webflow.js itself isn’t editable unless you export your site and host it elsewhere.

It sounds like you’re referring more to a ToC type of in-page navigation. I build this using Finsweet ToC. It can also be setup to style the item you’re scrolled to.

For example;

image
image1182×651 73.7 KB

4

Thank for the reply. Yes, a ToC type of in-page navigation is exactly what I’m looking for. I did build this out but unfortunately I couldn’t have a unique icon for each section. Do you know if it’s possible?

5

In each section of the ToC itself?
Haven’t seen anyone who wanted to do that.

Three things you could explore-

  • Try putting the icon inside of the <H2> by building it as a custom element. See if FS ToC picks it up
  • Read the API docs for ToC, see if there are code options for modifying how the ToC items are generated
  • Post in Finsweet’s forum to see if the FS team has a recommendation
6

Will do that thanks for the great advice!