▼
Streaming live at 10am (PST)

Drop down menu with text that changes beneath it depending on menu selection (in page, not nav)

Community resources General
#1

Noob here. :upside_down_face:
I need to create a drop-down menu button in the body of my page with text that changes underneath it depending on which option is selected from the drop down.

For example, I’d like to include a list of states in the drop down. Depending on which state is selected, it will show you the selected state’s customer service rep and their contact information. If nothing is selected, then no text would appear. I do not want the menu to link to another page. I want a text box to appear with information relevant to the visitor’s selection. I plan on using a few of these drop downs on my site, if there is a better alternative out there, please let me know :slight_smile:

I feel like this is probably an easy thing to do in Webflow. I haven’t been able to locate a tutorial- I’m probably not using the correct wording to bring up what I am looking for. I poked around the drop down option but couldn’t figure out how to achieve this.

1 Like
#2

Anyone able to help out here?

1 Like
#3

Hi Kelly,

I may be able to help out here, if you could kindly send the read-only link over and I’ll have a look at your conundrum.

What you are asking, is a sort of Mega menu? Or some sort of animation when you click a button in a dropdown, it will then show its relevant content, is this correct?

Best wishes,

Steve | 3SIX5 Digital

#4

Thanks for your reply!

As an example, the drop down on this site: https://prss.org/tools-and-resources

Check out the “find your account rep” drop down. When you select a state, the text below the button updates with information relevant to that state. Not a new page, just a text area beneath/to the side of the drop down button. I’d like to recreate this look on a webflow page.

Does that make sense? It wouldn’t be a mega menu. This is a simple drop down button within the body of a page.

#5

Hi Kelly,

I see what you are looking for.

If you are looking to only have a few options in the dropdown, there is a way to create this, but it evolves quite a fair amount of animations. And could get messy if you are looking to replicate on the page.

The best way would be to use custom code to achieve this. And I’m not a true expert on how to set this up, I would post this on the custom code section, or find someone you trust to write some code for you. As this isn’t native in Webflow. Unless like mentioned, you have only a few options to dropdown. As for every link in the list will have its own animation, and having to hide all other animations subsequently.

Hope that’s cleared up something, and sorry I couldn’t be a better help!

Best wishes,

Steve | 3SIX5 Digital

1 Like