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 Nav

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.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store