Is there a better way to build this mobile multi-tiered expand / collapse menu?

Hello! I am looking for feedback on a better way to build out this prototype that’s more sustainable and easier to maintain for a mobile multi-tiered expand/collapse menu. I’ve just started using Axure a few months ago, and any feedback would be greatly appreciated.

I switched the real content over from the actual prototype to be random animal information. The purpose of this prototype is to use it as a Sales demo of the existing production website.

I am using a screenshot png for each page of the body content for the following reasons:

  • Content for each page is fairly long and contains many complex elements.
  • Content doesn’t need to be clickable for the Sales demo.

The problem I’m running into is with the menu. I’m currently using a dynamic panel for the multi-tiered menu structure.

I’m using a master widget for the menu, but I’m having to ‘Break away’ with each instance in order to make the expand / collapse behavior shift the body content screenshot for each page to work. Also for each page, I have to make 5 copies of the same screenshot (screenshot = body content) for the 5 states of the dynamic panel, which also defeats the purpose of a master widget.

I also struggled with getting push/pull behavior to work on the menu + body content screenshot. I ended up using ‘Move’ to do this.

  • Is there a way to use nested accordion widgets here?
  • Could I have used push/pull behavior to shift the position of the body content screenshot when the menu is expanded or collapsed instead?

And finally, I wasn’t able to figure out how to use a global variable in the master menu widget to set the ‘active’ menu item to bold (ie. I’m viewing the ‘Hedgehogs’ page, this menu item remains bolded even when I expand / collapse the menu). So I went into each one of the 5 dynamic panel states to bold the active menu item for each page.

Any thoughts on a better way to build this prototype? The current prototype has the potential to become a maintenance nightmare (ie. For the ‘Dogs’ section, I’ll have to use 35 screenshots for the 7 pages instead of just 7 screenshots). Here’s my prototype file: AXURE-MULTI-TIER-MENU.rp (8.4 MB)

Thanks in advance!

Hi!

You can do this very manageably using a repeater. Here the dataset looks like this:

image

In the ItemLoaded event, you’d move the menu to the right if Level is not ‘top’ and you’d hide the expand arrow.

[Edit] I didn’t handle the case when you click on a sub-menu. That’s now handled. Use link below

expanding_menu.rp (58.9 KB)

There’s also a label (being used as a variable) that keeps track of which item is open. There’s a filter set on the repeater’s Loaded event that shows all rows whose level is either “top” OR whose level matches what’s in the label.

Also, there’s an OnClick command in the repeater. I added comments there to explain what’s going on.

I also added a navigateTo column if you plan to navigate to pages upon clicking a menu. You’d right-click the navigateTo column and choose the “reference page” you want to go to. Take a look at the article about repeaters by the Axure folks: it discusses the reference page.

Preview

Sample file: expanding_menu.rp (58.3 KB)

[Edit] I forgot to handle the case where you click on a submenu. Fixed below:

expanding_menu.rp (58.9 KB)

[Edt] It occurs to me that since you are navigating pages, you’ll probably want to use a global variable to store the currently chosen menu.

1 Like

Interesting! I didn’t even think to consider using a repeater in this way for an expand/collapse menu. I’ll take a look at your example and try it out - thank you so much for the reply!!!

No problem! Note that you’ll probably want to put the menu into a master, so you can have it on every page and update it just once. In the updated sample, I’ve created a master, use a global var for keeping track of the current menu, and I’ve wrapped the master in a dynamic panel so that you can hide show the master by hiding/showing the panel… IMPORTANT: the DP needs to be set to “fit to content”

Take a look at the beagle page: here the dynamic panel (surrounding the master) handles both the Shown event and the Resized event (which will happen whenever the master resizes, since the DP is set to “fit to content.” Both of these appropriately move other page content down when the menu is shown or resized. Might not be the desired behavior, but it’s a technique you might use.

expanding_menu.rp (102.8 KB)

Note that if you want to copy this to your prototype, be sure to create the global variable (matching the name) in your prototype before pasting it in.