En Ru
+375 (29) 692-02-78 +375 (17) 219-48-27
Contact sales

Axure. Lesson 1: how to create a global site menu with bookmarks

6 April 2008 | admin | Tools

In this lesson I will demonstrate how to create a dynamic menu in Axure. This is what you should get as a result (open in a browser):

 

Step №1: We create a site structure  On the first stage we create site structure. I took our company site structure as an example:

screen1.jpg

Step №2: We create a master (a header template) On the second stage we create a master for the header:

screen2_small.jpg

Step №3: We populate header template onto all site pages Now we plug our template into all site pages:

screen3_small.jpg

Step №4: We create a menu based on a dynamic panel Now it's time to create the menu itself. We open the header master and insert dynamic panel into it. We change the size of the panel so that the menu fits into it:

screen3_small.jpg

Our dynamic panel will have 6 modes - corresponding to the number of global menu points. So we double-click on the panel and create 6 modes:

screen7.jpg

Now we create the first mode, for that we double-click on the mode "Home" and using widgets Text Panel, Button Shape, Horizontal Line and Vertical Line draw the menu for our active point "Home":

screen3_small.jpg

Then we insert pages links:

screen14.jpg

Now we copy all the contents of the first mode using Ctrl-A keys and insert them into the second mode:

screen3_small.jpg

We repeat the same steps for the remaining four modes. The menu is ready. Enjoy! 

Step №5: We activate menu points on site pages

Now that the menu is ready we should make it dynamic: when browsing site pages this or that menu point will become active. In our case menu point activation means the switch of the dynamic panel into a certain mode corresponding with this menu point. So, if the user goes to "Services" page we switch the panle mode to "Services".  

When should  the switch be performed? During the page is loading. 

Every page has an event  OnPageLoad, which is generated by Axure during the loading. This is just what we need. 

We open the Home page, double-click on OnPageLoad , choose a Set Panel state(s) to State(s) action, choose our panel ( did you remember to name the panel Global Menu?) and, finally, choose Home mode:

screen3_small.jpg

We repeat the same procedure for all site pages: Services, About usability, Porfolio, About company, Contacts.

As a result we get a dynamic menu on bookmarks. 

You can check the menu in action here and now.

Related links:

Liked this post?