Dropdown interactions

Design help Animations & Interactions
1

Hi,

I have created a sidebar, example shared here, with a dropdown and two links.

Two questions:

  1. How can I set the bottom two links/buttons relative to the dropdown, so that when it is open it bumps them down lower, rather than covering them up?
  2. How can I keep the dropdown open when a relevant page is selected?
    for example: “View 2” is clicked > “View 2” is opened; dropdown (with “View 2” highlighted) remains open

I have been playing around with this but am stumped. Help greatly appreciated!

Here is my public share link: LINK

and here is a published version: LINK

2

Hi, @Waldo or @cyberdave,

Wondering if one of you might be able to help with this. I figured out how to do part one using interactions; however, I seem to have a lingering issue:

In the preview version, the interactions I built in work very smoothly. In the published version, something else is happening. Not sure what this is.

I’ve built three interactions triggered by the dropdown:

  1. “Dropdown nudge,” which pushes down the “add” and “about” nav links when the dropdown is opened [WORKING WELL]

  2. “Ease dropdown list,” which should ease down the dropdown list from 50px up and opacity 0% down to its origin, at opacity 100%. [WORKING IN PREVIEW, NOT IN PUBLISH]

  3. “dropdown icon rotate” [WORKING WELL]

So, in short, the main difference is the speed with which the dropdown list eases in in the “published” view, vs. in the preview.

Meanwhile, I have not figured out how to open the dropdown menu (automatically, on page load) if one of the dropdown links is opened. Is this even possible?

Thank you!

3

@johanna_f, don’t forget to ask @PixelGeek for help as well (I would help but I don’t know the answer :anguished:) Sorry.

1 Like
4

Thanks, @VLADinSACRAMENTO. @PixelGeek, any ideas as to why the dropdown interaction is behaving differently in preview vs. publish? or @Waldo @cyberdave ?

5

No problem @johanna_f, since the Webflow staff aren’t replying yet I would like to ask @DharmaNode or @DFink for help. Any guidance guys?

1 Like
6

3 posts were split to a new topic: Interactions interfering with Editor Mode

9

Hey @johanna_f regarding your first question, you will want to set your Dropdown List to position: Relative. Then remove the interactions which you have set to move the links down. Please let me know if that solves the problem. I’ll start a new conversation for your other questions.

10

Thank you, @waldo! I overlooked that!

11

@Waldo – one lingering question!

Is it possible to somehow have the dropdown automatically open on page load if the active page is one of the links in the dropdown? AKA, this screenshot, automatically.

632×579 32.9 KB

Appreciate the help!!

12

Hey @johanna_f my pleasure to help :slight_smile: as far as having the dropdown open on page load, that would require some custom code.

You may find this post helpful to add that to your site: http://forum.webflow.com/t/dropdown-open-on-load/20519 :smiley:

13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.