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

[ilovespace]

Hi, I’m really stuck on this expanding mobile menu functionality on Axure. I have implemented the menu items and dynamic panels, and the menu items open and close as expected in some scenarios. For example, if you open menu item 2, then menu item 1, it works fine. but if you open menu item 1 and then menu item 2, it doesnt work because the dynamic panel for menu item 2 doesnt move down when menu item 1 is opened. somehow the ‘push widgets below’ option doesnt seem to work on dynamic panels. is there a way for me to fix this issue? I have attached my rp file and some screenshots. Thanks so much, Alicia
mobile_menu.rp (72.1 KB)

[Alyssa_Axure]

It looks like the “closed” state of the menu items being empty is causing the panels not to get pushed when the top items expand. Your panels are set as “fit to content” and by default are set to the “closed” state, but since those are totally empty the panel essentially occupies no space. Since the panel doesn’t get pushed, it’s still at its original location when you trigger it to be set to its “open” state.

Adding something to the “closed” state so that it’s not empty seems to let the panel push properly. Alternatively, since only one of the panel states has content, you may find it better to simply hide and show the menu content instead of switching back and forth between two panel states. If you do choose to hide/show panel content, then you may want to take a look at the note about that here:

Push/Pull from inside DP

I noticed that you posted a couple of duplicate threads about this issue on the forums. If you ever have an urgent question that needs a fast response from the Axure team, please email us directly at support@axure.com. The forums are a peer-run platform, so while we do monitor the threads most of them will be answered by other community members as they have time. Duplicate threads get taken down to help keep the forums organized and to help keep discussions on the same topic from forking into multiple threads. If you email us during business hours (M-F, 9am-6PM PST) we’re typically able to respond to you same day (or within a few hours).

[ilovespace]

Thanks Alyssa, that works! Apologies about the duplicate, I’ll email in the future if I have an urgent question.

Thanks very much again

[ilovespace]

Hi Alyssa,

Just adding onto this, I now have submenus that open from the menu options as well. I have created submenus for menu items 1.1, 1.2 and 2.1. I am implementing this functionality using nested dynamic panels, and when the dynamic panel of the child menu item opens, the parent dynamic panel doesnt get moved down with it (despite using the push/pull widgets option). Please look at the attached screenshots and the .rp file. Please try opening menu items 1.1, 1.2 and 2.1 to see the issue. Thanks a lot.
mobile_menu.rp (75.3 KB)

[Jane_Axure]

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.

4. 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)

[ilovespace]

Hi Jane,

Thanks so much, this seems to work!

[isabelarias]

Hello @Jane_Axure How this will work if we need to apply the same menu to a responsive view? If we need to add a condition for a mobile view, then should we use dynamic panels in the menu item 1.1, 1.2 and 1,3 instead of adding a condition of visibility? I think we cannot embeed conditions.
I dont know if my question is clear?
Here my issue

If I add dynamic panels everywhere, instead of a condition of visibility, some of my embed dynamic panels are still push-pull on the desktop view.
but if I used dynamic panels everywhere, then I can add a condition for a mobile view.

My colleagues is trying to avoid the use of dynamic panels and use the selected / or visibility of to show /hide items. the quesiton is: can we do multi level responsive embed menus with only dynamic panels? or can we avoid the use of dynamic panels

here two examples where I’ve been trying to solve the problem:

so my issue

First test:
This one, I have the main header ‘Onglet parents’ as a square with a visibility condition, and the embed content as a dynamic panel. so in this case, because I have a visibility condition I cannot add another condiiton for mobile view.

multi level responsive menu.rp (719.3 KB)

Second test:
This one is made only of dynamic panels and it works!Test_edited2.rp (108.3 KB)

I hope is clear and hopefully I can have a better idea,

Many thanks

Isabel

[Simon_Axure]

Hi isabelarias,

If you have many push/pull interactions in your prototype, using dynamic panels may be the best bet–push/pull interactions will only affect items within the same dynamic panel state, allowing you more control over which widgets are being pushed or pulled. While you can try grouping the widgets and pushing/pulling the group instead, this approach can result in widgets being unexpectedly displaced in some cases. If you’re interested, you can read more about the push/pull interaction with groups here.

That said, you should be able to add more than one condition to your conditional cases by clicking the green “+” icon in the Condition Builder. For example, in your first file you could have two conditions in the OnClick events of your headers: one that checks if the selected state of the header is true or false, and then another that checks which adaptive view is currently active:

Now both of these conditions will have to be met before the actions in the conditional case are fired. Note that the “Satisfy” dropdown menu is set to “all”, which means that all the conditions listed there must be satisfied in order for the conditional case to be fired. If you need only one of the conditions to be met, you can change that to “any”.

I hope this is helpful!