jimmyh
(Jimmy Hopton)
May 24, 2016, 6:00pm
1
Hi, I’m trying to create an expanding menu that takes over the full page. I want the red circle to expand on click, something like this example http://capptivate.co/2015/02/01/keezy/ Is this even possible in Webflow?
Here’s my current state http://portfolio-ef8d4a.webflow.io/
As you can see I seem to have hit a wall. Any advice would be greatly appreciated!
Here is my public share link: LINK
(how to access public share link )
I would try to nest the red dot into a wrapper div, which is styled with overflow: hidden; and absolute (maybe fixed) position. Then I would add a click trigger interaction to the red dot which
effect the wrapper and set it to 100VH / 100 VH
and
increases the transform to 300% or so, maybe you have to play around
Please let me know if you need more explanations.
Good luck,
Marius
I think I got it. It’s a bit tricky, but it works
http://marius-jurtz.webflow.io/zackete-interactions/menu-circle
Sorry, I have no time left for further instructions now but I’ll get back on you soon.
jimmyh
(Jimmy Hopton)
May 24, 2016, 8:02pm
4
Wow thanks @zackete_de !
This is exactly what I’m trying to achieve. I’m going to try your instructions out tonight. I’ll let you know how I get on.
Thanks again,
Jimmy
You’re welcome
as I said, it is a bit tricky
I used a wrapper with 100VH / 100VW / overflow hidden
added a circle 5000px width and height, position absolute, top -2500px, right -2500px
than added a interaction to the circle div
→ initial appearance: scale 0.01 X and Y
click trigger → scale 1 X and Y
This should do the trick.
Cricitem
(webTAC | Technology Apprenticeship Center)
May 24, 2016, 8:31pm
6
Heads up: That interaction chokes my MacBook Pro even with nothing else on the page. It works, but isn’t nearly as smooth as you may be want.
jimmyh
(Jimmy Hopton)
May 24, 2016, 9:24pm
7
Hey @zackete_de is it possible to share your read-only link?
I seem to be doing something wrong.
jimmyh
(Jimmy Hopton)
May 24, 2016, 9:25pm
8
@Cricitem Thanks for the tip!
jimmyh
(Jimmy Hopton)
May 25, 2016, 12:37pm
9
@zackete_de did you import the circle as an SVG image? and did you place the circle in a div and then nest the div into a wrapper?
Sorry I’m new to this. Thanks for your help so far!
system
(system)
Closed
July 25, 2016, 9:45am
10
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.