When creating a menu, it often comes with multiple submenus. How can this effect be achieved?This article demonstrates how to use Axure to create the effect of moving into the menu. I hope it will be helpful to you.
1、 Prototyping 1. Drag a rectangular component, set the width as 100x, height as 45px, input content as "Move into menu", font as Microsoft Yahei, color as # 199ED8, drag a dynamic panel on it, named as "Triangle rotation", set the "Up" and "Down" states, and drag a rectangle in the shape of a triangle with the arrow pointing up,The color is set to # FFFFFF, and a rectangle is dragged "down" into the shape of a triangle with the arrow facing down, and the color is set to # FFFFFF. The combination of rectangular components and dynamic panels is named Navigation Bar 1, as shown in the figure:
2. Drag in a rectangular component with a width of 100x and a height of 179px and a border color of # 199ED8. Drag in four rectangular components with a width of 100x and a height of 45px. Enter Menu 1, Menu 2, Menu 3 and Menu 4 respectively. Add a dynamic panel to the rectangle of Menu 4, named Triangle Rotation, and set "Up" and "Right"In two states, "up" drag a rectangle whose shape is a triangle with the arrow facing up, and the color is set as # 199ED8; "right" drag a rectangle whose shape is a triangle with the arrow facing right, and the color is set as # 199ED8. The combination of rectangular components and dynamic panel is named as navigation bar 2, as shown in the figure:
3. Drag in a rectangular component on the right side of "navigation bar 2", set the width as 100x, height as 133px, and its border color as # 199ED8. Drag in three rectangular components on it, set the width as 100x, height as 45px, respectively input: Menu 1, Menu 2, and Menu 3, add a dynamic panel to the rectangle of Menu 3, named Triangle Rotation, and set "Up"In the two states of "up" and "right", "up" drag a rectangle whose shape is a triangle with the arrow facing up, and the color setting is # 199ED8; "right" drag a rectangle whose shape is a triangle with the arrow facing right, and the color setting is # 199ED8. The combination of rectangular components and dynamic panel is named Navigation Bar 3, as shown in the figure:
4. Drag a rectangular component on the right side of "navigation bar 3", set the width as 100x, height as 133px, and its border color as # 199ED8. Drag three rectangular components on it, set the width as 100x, height as 45px, and enter Menu 1, Menu 2, and Menu 3 respectively. The combination is named as submenu and set as hidden, as shown in the figure
5. The combination of "Navigation Bar 3" and its submenu on the right is named as: 1, and its hidden status is set. All the menu combinations on the right of "Navigation Bar 2" are named as: submenu, and its hidden status is set. The combination of "Navigation Bar 2" and its submenu on the right is named as: 2, "All the menus under navigation bar 1 "are grouped together and named as submenu. Set its hidden status. All the components are grouped together and named as 3,
The final design is shown in the figure below:
2、 Interactive settings 1. Group 3 to set "when the mouse moves in" and "when the mouse moves out", as shown in the figure:
2. Group 2 to set "when the mouse moves in" and "when the mouse moves out", as shown in the figure:
3. Group 1 to set "mouse in" and "mouse out", as shown in the figure:
4. Set the "when clicking" of each menu, as shown in the figure:
This article was contributed by Xianxianlu, which does not represent the position of Love Operation. If it is reproduced, please indicate the source:https://www.iyunying.org/pm/axure/292840.html
