How to make and use the secondary menu of Axure9.0;
First, use the rectangle in Axure9.0 component library, the first-level menu icon and the down arrow searched in Alibaba vector icon library.
Second, the first-level menu production uses the mouse to drag the rectangle from the Axure9.0 component library to the fixed position of the page, and the "Style" page/toolbar sets the rectangle size, border and fill color.
Style page/toolbar sets the font size and color of menu name, ribbon->; Style sets the margin between the content and the rectangle.
Select the rectangle, right click, select the interactive style, set the word color in the mouse hover style of the menu name, and click OK.
Adjust the color and size of the first-level menu icon searched from Alibaba vector icon library, put it in an appropriate position in front of the menu name, and put the down arrow icon behind the menu name to show the folding effect.
Select the rectangle, icon and down arrow, click the middle button, and adjust the style to center alignment.
The first-level menu is made.
Third, when making the secondary menu, select the icon, rectangle and down arrow of the primary menu at the same time, click the combination button in the toolbar, and select Interactive-> at the same time; Start the internal component mouse interaction style.
After completing the component combination, click the right mouse button to select and convert it into a dynamic panel, and name it "level 1 menu 1".
Double-click the Level 1 Menu 1 dynamic panel. At this point, the first-level menu will be converted into state 1 in the dynamic panel. Click the copy state button at the back to add state2.
Open the state2 page, modify the first-level menu style of the state2 page, select the down arrow, adjust the position and size of the down arrow, and rotate 180, and the arrow will be displayed upward as a menu expansion effect.
Select the first-level menu style with the mouse, and hold down the Ctrl key on the keyboard at the same time, copy the first-level menu style to the bottom of the style, adjust it left and right, delete the icon and the down arrow (or adjust the style as needed), and change the menu to "second-level menu 1. 1".
Click the right mouse button to select an interactive style (note: if the style is in the combined state at this time, please ungroup it, otherwise the interactive style button will not be displayed), and set the hovering and selection effects of the menu. The hover effect can set the fill color and font color, and the selection effect can include fill color, font color, line segment color, border width, border type, border visibility and other styles. Click OK to complete the secondary menu style adjustment.
Select the secondary menu and perform the following operations in turn on the interaction page: Create new interaction-> When clicked-> Settings is selected, choose to set the current component to "true", and click OK.
After the interactive editor window is closed, hold down the Ctrl key in the keyboard, copy the required number of secondary menus, adjust the position and modify it to the required menu name, and complete the production of secondary menu style.
4. Set the menu expansion and folding effect to state 1, select the first-level menu style, and perform the following operations in turn on the "Interaction" page: Create a new interaction-> When clicked-> Set the panel state, and select "State 2 Push-Pull Component Next Menu 1".
Switch to state 2, select the first-level menu style, and perform the same operation in the "Interaction" page in turn: Create New Interaction->; When clicked-> Set the panel status, and select "Level 1 menu 1 to status 1 push and pull the components below".
At this time, when we look at the menu production effect, we can find that clicking on different secondary menus will lead to the following situations.
At this point, we can select three secondary menus, click the right mouse button, select an option group, select an existing group name or enter a new group name. Now, we can fill in the group name as "Secondary Menu-Mutex" and click OK to finish the editing operation.
Click preview at this time, and we can see that clicking different secondary menus will not have the effect of selecting all.
5. Set the menu mutex effect to close the dynamic panel, select the "first-level menu 1" dynamic panel on the home page, press and hold the Ctrl key in the keyboard to copy the required number of first-level menus, and change the menu names and the corresponding dynamic panel names into first-level menus 2 and 3 in turn.
Double-click the "first-level menu 1" dynamic panel, select the "first-level menu 1" style on the state 1 page, move the mouse to the state of setting the panel, and click the add target button to continue setting the panel state, that is, "push and pull the next-level menu 2 of elements to state 1" and "first-level menu 3 to state 650/".
The effect of the above operation is that the first-level menu 1 is expanded, and the menus of the first-level menu 2 and the first-level menu 3 are contracted.
The operation mode of state 1 in the dynamic panel of "level 1 menu 2" is the same as above, and the panel states are set to "level 1 menu 1 under the state 1 push-pull element" and "level 1 menu 3 under the state 1 push-pull element" respectively.
The effects achieved by the above operations are as follows: When the first-level menu 2 is expanded, the first-level menu 1 and the first-level menu 3 are contracted.
The operation mode of state 1 in the dynamic panel of "level 1 menu 3" is the same as above, and the panel states are set to "level 1 menu 1 under the state 1 push-pull element" and "level 1 menu 2 under the state 1 push-pull element" respectively.
The effects achieved by the above operations are as follows: When the first-level menu 3 is expanded, the first-level menu 1 and the first-level menu 2 are contracted.
The second-level menu effect is finished. Check the effect.
The effect of the secondary menu is completed, and the final effect is:
The above is about "How does Axure9.0 make a secondary menu? How to use it? " I have shared all the wonderful content, I hope you can learn something from it! If you think an article is not enough, then don't miss Axure related articles! In short, it is difficult to achieve all-round self-development by learning path and single knowledge! If you want to master a skill completely, then you must study it comprehensively! Come on, learn Axure in an all-round way, acquire knowledge points in an all-round way, and promote independent prototype design quickly and effectively ~