Fancy Drop Down menus within the page body

Design help Animations & Interactions
1

Can we do stuff like this in Webflow. And also remain responsive and touch device compatible:

http://www.broadstoneltd.co.uk/page.aspx/Intro-to-Corporate-Bens

See the drop down menus on ‘Our services’ but after the horrible arrows diagram.

2

Quite simple to do with WebFlow.
Here: http://webflowforumhelp.webflow.com/growing-div
Public link: https://webflow.com/design/webflowforumhelp?preview=683e5a91620e881118e55a39b25450ab

Cheers!

3

This is exactly what I am looking for!

But how would I go about setting that up using the tools in Webflow? That I don’t understand. Or would I need to go outside of Webflow to do this?

4

BUILDING IT

  1. Create a div and give it a class. For this tutorial we will use “growdiv”
  2. Give the div a width and a height and position it were you want it, also make sure you choose overflow:hidden
  3. Place the div’s content (text images title)
  4. Place 2 link texts inside of the div (one will open it, one will close it)
  5. Position these links one on top of the other (display block)
  6. Top links says “OPEN”, bottom link says “CLOSE” (or whatever text you want)
  7. Give open link a class like “openlink” and close link a class like “closelink”
  8. Write down the height size of “growdiv” and reduce it to the size it will be when it is closed, write that size down as well.

INTERACTIONS

  1. Select “openlink” and create a new interaction for it. Name it something like “open div”
    a. Interaction 1: On click → affect “growdiv” → Height:(first number you wrote down)
    b. Interaction 2: On click → affect current → display:none
    c. Interaction 3: On click → affect “closelink” → display:block

  2. Select “closelink” and create a new interaction for it. Name it something like “close div”
    a. Interaction 1: On click → affect “growdiv” → Height: (second number you wrote down)
    b. Interaction 2: On click → affect current → display:none
    c. Interaction 3: On click → affect “openlink” → display:block
    *** IMPORTANT: Make sure to add “display:none” to “closelink” after you create its interactions

Thats it!
If anything goes wrong I encourage you to clone my public site and see how the effect is done.

Cheers!

2 Likes
5

Thanks.

I’ve got onto the interactions but having problems getting this to work.

Do I need anything for initial appearance?

Also how do I clone your public site and get it into web flow?

6

You can clone it from here: https://webflow.com/website/Web-Flow-Forum-Help

1 Like
7

Ah, that works brilliantly. I’ve managed to get it working on my site now.

Just hoping the fixed pixel heights play well with mobile etc.