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.
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?
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.
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.
Take dropdown-list (which is “dddddd” in your case) and make it display=block
Give it position = fixed, aligning to the bottom (it will let dropdown list grow in the up direction).
Create interaction for Dropdown link (which is “list” in your case)
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.
Glad I could help