In Axure Tutorial: Dynamic Menu Using Repeater, we learned how to make the side navigation menu through the repeater. In this Tutorial, we will learn how to make the top navigation menu.
Features to be Realized
1. When the mouse hovers over the Level 1 menu at the top of the screen, the Level 2 menu is shown.
2. When clicking the Level 2 menu, open the corresponding page in a new window.
How to Realize these Features
1. Make two-level menus through the repeater and make the pages of all level 2 menus. Set reference page for table data.
2. When the first level menu widget is hovered, the level 2 menus is shown. When you click the level 2 menu widget, the corresponding page will be opened in a new window.
Preview the completed prototype for this tutorial
1. Master the use of repeater
2. Master the use of dynamic panel
Widgets and Pages Setup
1. Design or import all pages.Drag several rectangles onto the canvas, one of which represents the level 1 menu. Others represent Level 2 menus. Drag Level 2 menus according to the maximum number of Level 2 menus.
2. Then drag a rectangle as the background of the top navigation bar. Set its width to the screen width when loaded.
3. Sets the style when the menus are hovered.
Bind the data to the all menus, right-click the data table and set the reference page
1. Create all Level 2 menus as an dynamic panel.
2. Set event: when mouse Enters the Level1 menu, the Level 2 menu panel is Shown. And Treat as flyout. Of course, it can also be CLICK OR TAP.
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! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.