Axure Tutorial: Top Navigation Menu - Repeater Intermediate Tutorial

Introduction

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. 

Top Navigation

Preview the completed prototype for this tutorial


Pre-Requisite 

1. Master the use of repeater
2. Master the use of dynamic panel

Widgets and Pages Setup

Widgets 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.

Data Binding

Data binding

Bind the data to the all menus, right-click the data table and set the reference page

Reference page 

Interaction Setup 

Mouse Enter Level1 menu

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.

3.  Now, if the text of the level 2 menu is empty, the menu will still be shown on the interface, which will cause blank. Therefore, we need to set that when the menu is loaded, if the text is empty, the menu will be hidden, and push the widgets below.
4. Click all menus of level 2 to set the link page and link to the corresponding page on the repeater data table.

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

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.