Axure mobile menu - dynamic panels not moving with push widgets option

Axure RP 8
5

Hi all,

Ilovespace wrote into the help desk about this, and the reason why the submenus (Submenu Item 1.1.1., Submenu Item 1.1.2, Submenu Item 1.1.3) aren’t pushing/pulling as expected is because they are nested within another panel. Panels that are nested inside another panel do not take into account widgets that are outside of the nested panel, and thus, cannot push/pull the outer widgets.

To fix this, I added a few edits to the file:

  1. First, since most of the dynamic panels had empty “closed” content, I broke away these dynamic panels and stacked the “open” content in vertical sequential order. This is personal preference, but I always like laying out all my widgets visible and vertically stacked on top of one another whenever possible as this makes it easier to edit and identify the widgets later.

  2. Then, hide and pull the menu (sub) items you want initially hidden with OnPageLoad.

  3. The best way to push/pull outer content with a nested panel in RP 7 is to use the trick of hiding/pulling the outer panels first so that the outer panels’ height is taken into account, and then trigger the change in the nested content. This will make the nested panels reappear at the new height when you show/push the parent panels again.

Here’s an example of how that would look like in the Case Editor:

Case 1
If visibility of [child sub panel] equals false
Hide [parent panel] pull widgets below
Show [child sub panel] push widgets below
Show [parent panel] push widgets below

Case 2
Else if visibility of [child sub panel] equals true
Hide [parent panel] pull widgets below
Hide [child sub panel] push widgets below
Show [parent panel] push widgets below

What this is doing is hiding the parent panel first before triggering any changes in the content so that the height of the parent panel gets readjusted with the nested content. Case 1 will show the nested panel while pushing down the outer content along with it, and then Case 2 will hide the nested panel while pulling up the outer content with it.

  1. The last thing I noticed was that using an animation (e.g. swing) with the push/pull will not work because the push/pull happens faster than expected, and thus, will rearrange the menu items in a non sequential order.

I’ve attached an edited version of ilovespace’s file that should work as intended. Hopefully this helps!
mobile_menu_EDIT.rp (69.1 KB)

1 Like