Axure. Lesson 1: how to create a global site menu with bookmarks
6 April 2008 | admin | Tools
Step №1: We create a site structure On the first stage we create site structure. I took our company site structure as an example:
Step №2: We create a master (a header template) On the second stage we create a master for the header:
Step №3: We populate header template onto all site pages Now we plug our template into all site pages:
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:
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:
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":
Then we insert pages links:
Now we copy all the contents of the first mode using Ctrl-A keys and insert them into the second mode:
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:
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.