How to use Axure to make the menu bar with the above effect? Go directly to the steps:
-
Create a new master (menu bar template) and 5 pages (page 1 - page 5), when the menu bar button is clicked, the corresponding pop-up page effect
-
【Mastering】Make a menu box, drag a rectangle and enter "page 1", then drag a small icon and rectangle to make a combination.
-
【Mastering】Menu box attribute setting: Set the attributes of the rectangle and the small icon respectively. The attributes are white characters on a black background, and then set white characters on a green background when the mouse hovers over them, and green characters on a black background when the component is selected.
-
[Mastering] Menu box interaction setting 1: Rectangle setting interaction, if the selected state of the current combination == true, the rectangle is set to be selected. Small icons do the same for interaction design.
-
[Mastering] Copy 5 menu boxes above and rename them as: Page 1, Page 2, Page 3, Page 4, and Page 5
-
[Mastering] Menu box interaction setting 2: "Page 1" combined setting interaction, when clicked, open the link, the link is page 1, the effect is that clicking the menu box "Page 1" will jump to "Page 1" "page. Do the same setting for the other 4 menu boxes
-
[Mastering] Add masters to 5 pages
-
[Page Interaction] Enter page 1, set interaction: when the page is loaded, the menu bar combination "Page 1" is set to the selected state. The remaining 4 pages do the same settings.
After completing the above settings, preview to see the top interaction effect!