© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

 

NAVIGATION MENU

Use a master to make a navigation menu that appears on multiple pages.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GET STARTED

Open the “Navigation menu” page in the training document.


This page contains several menu widgets that already have MouseOver and Selected interaction styles. (Check out our Interactive Button tutorial to learn more about configuring interaction styles.)


Select all these widgets, right-click, and choose “Convert to Master”.

Name your new master “Header” and choose the drop behavior “Lock to Master Location”. Click "Continue" to finish creating the master.


Double-click anywhere on the master to open it for editing.

STEP 2: CONFIGURE NAVIGATION LINKS

Click the “Home” widget. Double-click “OnClick” in the Properties tab to add a new OnClick case.


In the left column, click the "Open Link" action.


In the right column, click the radio button "Link to a page in this design" and then click the page “Navigation menu”.


Click "OK" to close the dialog.


Repeat these steps for the three other buttons in the navigation menu.

STEP 3: SET THE SELECTED MENU ITEM ON EACH PAGE

Open the “Navigation menu” page.


In the Page Inspector, double-click "OnPageLoad" to add a new OnPageLoad case in the Case Editor.


Click the action group "Set Selected/Checked" to expand it, and then choose the "Selected" action.


In the "Configure actions" column, click the “Home” widget in the “Header” master.


Click OK to close the dialog.


Add the "Header" master to the "Manage", "Profile" and "Help" pages. Then, repeat the steps above three more times to set the Selected states of the "Manage", "Profile", and "Help" menu items on their corresponding pages. Once that's done, you may want to take a moment to preview your "Navigation menu" page to make sure all your links work and your Selected states are activating correctly.

STEP 4: PIN MENU TO TOP OF PAGE

Double-click “Header” in the Masters pane to open it for editing.


Select everything on the page, right-click, and choose "Convert to Dynamic Panel".


In the Properties tab, click "Pin to Browser."


In the "Pin to Browser" dialog, click the checkbox "Pin to browser window". Then choose "Center" in the "Horizontal Pin" section and "Top" in the "Vertical Pin" section.


Click "OK" to close the dialog.

STEP 5: PREVIEW

Click Preview.


Use the navigation menu to switch between pages. Try scrolling down a bit and notice that the navigation menu stays in place.

MORE RESOURCES

CORE TRAINING

TUTORIALS