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. 

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

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

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

 

Interaction Setup 

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.

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.