Another Menu with flip

Hopefully I can explain this clearly… I want to create a menu with different tabs. These tabs are squares and they have texts and solid colours. Text is display in side way (vertically) and the solid colour is showing beside it (1/4 of the square box maybe). Once clicked, the solid colour will open like a book (slowly so it does show the opening book effect) and the “square” tab is now extended becoming a rectangle. The TEXT is now display horizontally with the solid colour as background.
Could anyone help me? I dont know how to go about this…Thank you!

can anyone help? I have no idea how to go about this…

@billc,

Kind of hard to understand what you are describing without seeing it. Can you point to an example site that does something like this? Could you share some sketches or some quick photos of hand drawings?

It seems like each menu tab will have two basic states: 1) Closed, 2) Open. You want to animate the transition between Closed and Open. A good way to do this is with a dynamic panel with two states.

Here’s the basic approach:

  • Create the widget(s) as you want them to appear when the tab is closed.
  • Select them all, choose Arrange > Convert To Dynamic Panel (or right-click: Convert To Dynamic Panel)
  • Duplicate “State1” (in the Outline pane on the right)
  • Double-click “State2”
  • Modify the widget(s) as you want them to appear when the tab is open.
  • Decide how you want to enable the click action: either one widget, area, or the whole thing. Add an OnClick interaction to a widget, hotspot or the whole dynamic panel.
  • Choose the “Set Panel State” action, select the dynamic panel, select “State2” or “Next”
  • Select your transition effect with “Animate In / Animate Out” options. One of the “flip” options should work best. Play with the timing to get it right.
  • Repeat this for the transition from open to close if you need to show that.

See this thread for a great example of how to do this “open like a book” or page-turning effect:

You can set the rotation of widgets and text on widgets, for example, 90 or 270 degrees, so text flows vertically. See this Axure Reference for details:
https://www.axure.com/support/reference/shape-widgets#location,_size,_and_rotation

You can then control the rotation dynamically with the Rotate action, and control the speed with the Animate options. https://www.axure.com/support/reference/interactions

Best of luck!

Yes that is kind of what I want in terms of flip action. The link you sent me is what I am looking for! Thank you again for your help.