Create a fixed and interactive navigation sidebar with Axure 7.0 (Part II)

In my previous post, I talked about, as part of building a interactive navigation menu, how to detect the section the current view is in and highlight the corresponding navigation menu item. This post is going to finish the work by adding actions that make the navigation menu stay on top of the view.

First, let me start by saying that a new feature is recently added to Axure that can pin a dynamic panel to browser. Right click the panel and you will fine the option.

11-11-2014 1-16-13 PM

However, this always keeps the same top margin between the panel and the top of the view. What we want is to only pin the panel in place when it is about to be out of the view. In other words, we want the panel to start moving along with the page when it is about to be scrolled out of the view.

So how do we know if the panel is about to be scrolled out of the view? This can be detected by checking whether the distance scrolled vertically is greater than the y position of the first horizontal line (our panel’s top edge aligns with the line). This is going to be the condition of our action.

When the page is scrolled past the first line, part of the panel will be out of the view. How do we pin it in the view instead? We just need to immediately move that outside part back in. In other words, we need to move the panel down by a distance that equals to the height of the part that is out of the view. Below diagram shows how we can calculate this distance. Scroll Y is how much has been scrolled. Panel’s Y value is the distance from the top of the page to the top edge of the panel. The difference between these 2 variables is the distance we need to move the panel down, so that the green part is back in the view.

11-11-2014 1-41-08 PM

Once we are clear on the approach, we can add a new action on ‘OnWindowScroll’ event that moves the panel back in when it is scrolled out of the view. The Target here is the panel itself because we are moving it. It is a quick way to get a widget’s property.

11-11-2014 2-03-30 PM

Note that I added 20 pixels of top-margin at the end. It is not necessary. But if you added some margin, you need to remove the margin once the view is back to the initial position, so that the panel is also back to its initial position. Below I have another action that moves the panel back to its original position when the page is scrolled back to top.

11-11-2014 2-08-17 PM

Here is a demo of the navigation menu.  Hope this helps!

Create a fixed and interactive navigation sidebar with Axure 7.0 (Part I)

UI design is part of my daily work and I use Axure to build mock up screens all the time. Recently I have updated the tool to its latest 7.0 version and noticed that some of the new features it offers are quite useful. What I found to be the most useful are the ability to pull or push adjacent widgets when a widget is hidden or shown and the ability to break away the first state of dynamic panels.

My wife, a UX designer, thinks Axure is really counter-intuitive and she prefers to use Adobe Muse. I have to agree that in terms of building animation and graphic intense web apps, Adobe Muse is a better choice than Axure, but I think they are focused on different things. Axure is more focused on building a prototype for tools and enterprise applications. Just look at what it offers – page and widget events, repeater, dynamic panels –  all of these make it easier to build up pages with complicated logic.

In this article I am going to describe how to use Axure to build a navigation sidebar that stays on the page and  highlights the section the user is current in, which seems to be a feature that requires some logic controls. Ironically, my wife says this can be done easily with Muse.. I hope it is not true! On the bright side, this can still be done with Axure, just with a little bit more effort.

So this is what we want to achieve – a navigation sidebar that first appears on the right top corner. When page is scrolled and the sidebar is about to be out of the view, it starts to stay on the top. The menu items in the sidebar become selected/highlighted when the page is scrolled to the corresponding sections. Here is a demo.

10-13-2014 10-56-00 PM

Instead of jumping into the detailed steps, I think it is beneficial to firstly explain the solution a bit. To make this work, the central idea is to store the Y position of each section as the text of a hidden widget, which is the rectangle to the left of each section on my demo, and then when the window is scrolled, compare the Window.scrollY with the hidden widget’s text to determine whether the page is current scrolled into that section. The trick here is that you can compare a variable value with a widget’s text.

Now, the first step is to of course put all the widgets on the page including the widgets for storing the Y positions. They will later be hidden. I put the widget on the top of each section so that their Y position is the section’s Y position. Then on the onPageLoad event listener, save the Y position of each widget. In the below screenshot, I named these widget as PosA, PosB, PosC, and PosD. Note the ‘Target’ here is the hidden widget itself. It is a new feature introduced in Axure 7.

10-13-2014 10-31-22 PM

These actions effectively store the Y location of each section. Next we will add more actions so that when the page is scrolled to a section, the corresponding menu item is selected.

First assign menu items with a selection group to ensure only one item can be selected at a time.

10-13-2014 6-56-51 PM

Also set the menu items’ Selected style by selecting ‘Interaction Styles…’ in the above menu and go to Selected tab to define a Selected style.

10-13-2014 10-50-06 PM

Here comes the most important step. On the page’s OnWindowScroll event listener, add the following actions. These actions compare the Window.scrollY (how much the page has been scrolled) with the position of each section to determine whether the page is currently scrolled in the section

10-13-2014 10-50-54 PM

These steps are the essential parts for achieving the interactive navigation sidebar. However, without the sidebar staying on top of the view, we cannot see the end result (because the side bar is out of the view). Next time I will finish the tutorial with steps of making the side bar fixed in place. Stay tuned!