Edit: I have edited this post from what it used to be because I thought I solved it but now have a different problem
I actually sort of seemingly figured out the issue of the dropdown messing with the autolayout of the menu, but my solution has caused another issue. I made the boundary of the “open section” variant frame just the size of the tab without the dropdown part, and made the dropdown fixed position, so that it doesn’t affect the rest of the menu. This worked, but the problem is I want to be able to show in prototype opening the dropdown and switching to another dropdown. I added the “mouse leave” interaction so that the dropdown would close when not hovering so that there can’t be multiple open at a time, but because the dropdown part is outside the boundaries of the “section” tab frame I cannot hover over it. And I will eventually need to show the hover states for those links as well. Here’s what I mean:
Hi, I have edited this post because I actually sort of solved it but also messed it up in a different way… I updated the post and have a link to figma file for an example
@Avokadomos The issue with having an overlay is the menu is being used in various places in different pages and files so I would have to have the overlay on every page and redo that prototype interaction each time. That’s why I made it a variant rather than an overlay. Unless there is in fact a way to have an overlay interaction apply across multiple pages and files?
@Avokadomos Unless I’m using it incorrectly though, it doesn’t apply across other pages and files, only on the page where the overlay lives. The interactions apply everywhere when it’s interactions between variants because it’s part of that component, but not when it’s just an overlay interaction.
So, I think I encountered something similar recently. I was wanting to show what would happen if someone opened a drop down menu. I made it a component so that the menu would be out of frame but still rendered. In the component, I have a fixed height for only the button to open the nav and then the drop down is below it still within the component frame. It is important here that you don’t clip content for the component. Unfortunately it appears that this does not work in auto layout (I swore I had got it to but maybe I remembered incorrectly). So what I did do is that the section it was in, I took out of auto layout. Again, do not clip it. The absolute location should keep from other frames covering the list.
