Axur making folding menu tutorial:
1. Prepare the component to open the new Axure file and pull out a rectangle with w of 200px, h of 40px and color value of #333333. Enter "Level 1 Menu" in the rectangle, and then name it "Level 1 Menu";
Drag it into a rectangle, w is 200px, h is 40px, the color value is changed to #FFFFFF (pure white), and enter "option1"in the rectangle;
Make two copies of "Option 1" and name them "Option 2" and "Option 3" respectively.
After completing the above actions, you can get a demonstration. Look at the picture:
Ok, let's start the second step when you're done ~
Second, set the interaction style (1). Select "options 1, 2, 3" all, right-click to interact with style settings, select mouse hover _ fill color _ color value #F2F2F2, and then select _ fill color _ color value #E4E4E4.
As shown in the figure:
(2) Continue to select Options 1, 2, 3, right-click to set the name of the option group, name it Options, select Options 1, and right-click (selected by default) to finish.
After completing the above settings, continue to the next step ~
Iii. Set the interactive use case (1) Select "Option 1", set _ Select _ Select when the mouse clicks, and click OK. (Options 2 and 3 are the same as above, just copy and paste).
After completing the above settings, our options can be clicked and switched according to the effect:
(2) Select "Options 1, 2, 3", right-click to convert it into a dynamic panel, name it "Options", and click the hidden panel.
(3) Set the "first-level menu", set the mouse click _ set the panel status _ visibility: switch, animation: down when displayed/up when hidden, animation: linear, 250 milliseconds, hook on it, hook on the push component, direction down, animation: linear, 250 milliseconds.
That's it. In order to prevent everyone from setting mistakes, let's put a picture of the settings below:
Attach another renderings:
After completing the above production, we will see that this is just a single menu, and we can copy multiple folding menus together.
4. Advanced (1) Select all components and dynamic panel _ right-click combinations, and then we will copy and paste n of them, arranged as follows:
(2) When the user sets the "push element" in the front, we have already set it, and there is no need to set it later. But what we did before, we set "option 1" as the default selected state, and here we copied two more, so we need to remove the default selected state from the copied two "options 1".
After setting, continue to see the effect:
The above is about "How does Axure make a folding menu?" I shared everything, thank you for reading, I hope you can learn something from it! More Axure operation skills, read more Axure articles! Of course, if you want to learn Axure skills more clearly and professionally, then I suggest you take Axure video courses! Save time and effort, learn Axure prototype interaction design quickly and comprehensively ~