Axure Tutorial: Top Menu Bar
Introduction
When mouse enter the menu, the sub-menu is shown, and when the mouse leave, the sub-menu is automatically hidden. This kind of interaction is believed to be an interaction that is often used when making prototypes.
Widgets Setup
1. Menu making
Make a top menu, create a title using the basic elements: text labels, set the title size and set the line spacing.
2. Submenu making
Make a submenu, use the basic element: dynamic panel, set the name of the dynamic panel, and double-click to enter the dynamic panel.
Enter the dynamic panel to add the submenu name, and you can add interactions for each submenu, such as links, mouse over, etc.
Interactions Setup
Go back to the index page, add interaction to the first-level menu, and when the mouse moves in, the menu will be shown and slide down together, and the time of animation will be 200s.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Note: Click here to download the completed RP file for this tutorial (RP 10 or up).
Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.
Leave a comment