I have a top menu bar which is a screen part. I am trying to use this on all my pages. I have animated the actions of the icons and menu items on this so that drop downs appear. It appears though that the only way my drops down will show on my pages is if I expand the screen part height so that it covers the page on the top and then my drop downs appear as you would expect above the other content. Unfortunately, however this means that any buttons or other animation on the page itself is covered by this invisible top layer and do not work in prototype view.
If I allow the page animations to work by only letting the top menu screen part have the height of itself then any animations fire on the menu, but the drop downs do not display.
Please can someone help me find a solution to this problem? It seems like a very common challenge that people might have, but I can not find any similar questions that were answered here with a solution, so I feel like I might be missing something obvious. :-)
Thank you so much
Thanks for contacting us.
One thing you can try is changing the size of the screenpart canvas in each state of the screenpart to accommodate for the items it has.You can keep the screenpart small if no dropdown is open, and increase the screenpart size if the dropdown is open.
You can see a simple example here: https://indigodesigned.com/share/run/cbt71tzkxkchItem 1 and Item 2 are inside a screenpart and the button is outside and has an interaction defined.
I hope the example helped.
Please let us know if you have any other question or concern.
Thanks for your response. If I understand this correctly, the item 1 and item 2 actions are animated on the current screen and not within the screenpart itself - is that right? In my example I've made lots of animations within the screenpart (as I want it to perform the same across multiple screens). How can I achieve the same without having to re-do the animation for every screen I include it on?
Sorry if I'm not understanding.
Item 1 and Item 2 actions are animated in the screenpart itself.
You can download the sample from here and open it with Indigo Studio if you want to see how it is implemented.
In the initial state of the screenpart, you just have the two items and a small canvas area:
In the "Tapped Item 1", the menu dropdown is added and the screenpart canvas size is bigger:
I hope this helps.
Please let us know if we can help you in any other way.
Thank you so much! It didn't work when I initially tried to do it, but when I created a duplicate screenpart and re-added that to the page it worked beautifully. Thank you so much - you've saved me lots of time and frustrations! :-)