Axure Tutorial: Dynamic Menu Using Repeater
Introduction
When you only use dynamic panel to make menus, if there are many menus and they are constantly added and deleted, it will be difficult to manage. You need to constantly change the menu name, set up links and adjust the position. Especially when you need to insert a menu in the middle, you need to adjust the position of all the subsequent menus. It's a tedious job.
Using repeater and dynamic panel, you can easily manage the addition, deletion and modification of menus. Set data and controls separately.
In this tutorial, you will learn how to use repeater and dynamic panel to make a two level menu and a three level menu.
Features to be Realized
1. When clicking the Level 1 menu, toggle to expand / collapse the Level 2 menus.
2. When clicking the Level 2 menu, toggle to expand / collapse the Level 3 menus, or open the corresponding page in a new window.
3. When clicking the level 3 menu, the corresponding page will be opened in the new window.
How to Realize these Features
1.Make menus through repeater. Set the Reference Page of the repeater's data. Show / hide the widgets of the Level 2 menu when the widget of the Level 1 menu is clicked.
2.When the widget of the Level 2 menu is clicked, show / hide the widgets of the Level3 menu (if has), or open the corresponding page.
3.When the widget of the level 3 menu is clicked (if has), open the corresponding page.
Pre-Requisites:
- Master the usage of Repeater
- Master the usage of dynamic panel
- Master the usage of Event
- Master the usage of Variable and Function
Preview the completed prototype for this tutorial
Make Two Level Menu
1. Page and Widget Setup
1. Set up all the pages.
2. Drag a repeater to the canvas, then go into the repeater, drag a rectangle representing the Level 1 menu and then drage multiple rectangles representing Level 2 menus to the repeater canvas.
3. Select a rectangle and name it: level 1. Select another rectangles and name it level 2_1, Level 2_2, Level 2_3...
4. Make a dynamic panel including a triangle. then set its two states to point down and right respectively. Move it to the right of Level 1 menu when repeater loaded.
2. Repeater Data Setup
1. Set the repeater data according to the menu level, where column 1 corresponds to level 1 menu. Level 2_1 corresponds to the first item of the Level 2 menus, level 2_ 2 corresponds to the second item of the Level 2 menus, and so on. Bind the data to the rectangles.
2. Right click the repeater item to set the Reference Page. Select the pages you want to open.
3. Set Interaction Events
1. Select the Level 2 menus and set the click or tap event, that is, jump to the response page. Set loaded events. That is, hide this menu if the text is empty.
2. Create all Level 2 menus in one dynamic panel. And set the states of the arrow when the dynamic panel is displayed and hidden
4. Custom your menus
If you want to add new menus, add the corresponding menus directly to the data of the repeater. When the level 2 menus are added, copy and paste several more Level 2 menus according to the above steps, set the loaded event and bind the data to widgets.
Make Three Level Menu
If you want to add level 3 menus, you need to be a little different in setting the data and widgets of the repeater, but the basic principle is the same. This can be your homework. Think about how to add a three-level menu.
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 technical writer and teacher, focuses on Axure prototype design and product design.
Leave a comment