Streaming live at 10am (PST)

Elements move accordingly as another increases in size


#1

Hi guys,

I need some help again please smile

I don't know if you are familiar with Mac and their dock menu (bottom of screen). My client would like something like this on his site. Basically, there is a row if icons and when you hover over them they increase in size.

Now I've managed to set up this effect with drop downs using an image instead of text. This work great and I love it. However I have two things I want to add to its functionality.

  1. When we hover over the image and it increases in size, currently it overlaps the other two icons on either side of it. Is there any way to make the icons on either side of the increased size icon move away as it enlarges. So they will move away as the icon increases in size. I hope that’s clear?
  2. Secondly I just want the drop down to drop up lol?

And it would be visually cool if if the icon stays within the screen as it gets bigger on mobile.

https://preview.webflow.com/preview/hogshead?preview=2804c5f3eb75b317354ce3561e10e222


#2

I have another issue.. getting the dropdown lists to stay above the other icons?


#3

Hi Sean,

For fix problem #1 I would recommend you to use not scale, but increasing height of icon+move it up on 25-50% (just test which will be better for you). In this way icon will automatically increase link size and you will get effect that you want.

About other questions can't tell you now, have to check a little bit more.

Regards,
Anna


Navigation with top accordion functionality
#4

Well, now about dropdown "opening up" smiley

1) Take dropdown-list (which is "dddddd" in your case) and make it display=block

2) Give it position = fixed, aligning to the bottom (it will let dropdown list grow in the up direction).

3) Create interaction for Dropdown link (which is "list" in your case)

4) For hide dropdown list on load you can make interaction for it with ONLY initial appearance, where height=0px. Or just go to "dddddd" settings and make it height=0px.

Hope it helps.

Cheers,
Anna


Have navigation menu dropdown open upwards
#5

Hi Anna smile

Thank you so much for your help. This will work perfectly !!!


#6

Awesome blush Glad I could help


#7

Can't thank you enough.. you're a LEGEND !!!


#8

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