Determe which menu item is currently active

How can I determine which menu item is currently active via the Intercation Panel?
As an example in the scribble I have a sidebar. This can be open or closed. Each menu item can be active or normal.

Every menu currently consists of 4 states:

  1. Normal (icon and text, white background, 260 px width)
  2. Normal closed (icon, text hidden, white background, 80px width)
  3. Active (icon and text white, colored background, 260 px width)
  4. Active closed (icon white, text hidden, colored background, 80 px width)

An example:

  • “A” is active, sidebar is open
  • sidebar is closed, “B” becomes active
    … and so on

Worked once, when I close the sidebar and “A” was active, but as soon as I choose another menu I’m not able to trigger the actual state. When I open the sidebar it does not recognize the active state.

Is this possible via the interaction panel or is it only possible via scripts?

Thanks in advance

Hi Joe,

this should be certainly possible by using the interactions.
Did I understand you correctly, that you reflect the menu item (A, B, C) states in the menu widget (sidebar)?
Could you provide an example Antetype file?

Normally you would have a sidebar widget with the states open/closed and within multiple items with the states (normal, active, etc.). You trigger them separately by interactions.

1 Like

as Adrian said there a re multiple ways to achieve it. Here a small example using a menu widget in 4 states. “content closed” is shown when the sidebar is closed, “content open” if the sidebar is open respectively. The click-interactions set the states for both, this way the state is preserved if you open or close the sidebar.

open-close.zip (787.7 KB)

Does this help?

1 Like

Hi Adrian, here’s an example of how I built it

Hello fizfaz,
Thanks for the example. I see that the solution is very different from my own. My sidebar is separate from the “opener”, the arrow. I was trying to control via the opener which widget (A, B, C) is currently active, in open and closed state. When closed, the opener changes, the arrow then points to the right. I can not access this state in the interaction palette to reopen the sidebar.
Also, there is only one widget (A, B, C) in my example.
What I miss in the Interaction Palette is e.g. the IF / ELSE condition.
If an event contains multiple cases, conditional logic can be used to determine which ones to execute in the web browser.
I suspect the way my file is structured you can’t control that via the Interaction Palette

here the example file
example.zip (956.9 KB)

Hi Joe,

yes I think you would need script actions, or the conditionals… so far we did not implement it due to the complexity of the GUI. For example which conditions should we support? Active State like in your example, maybe entered text, size etc. But a very interesting topic. Maybe a bit over the top, but I played with Scratch and Blockly both support quite complex visual scripting …

Cheers,

felix

Hi fizfaz,
thx for your reply. For example like this:
OnLeftClick:
Case 1
(If “[[sidebanner]]” equals “open”):
Set “menuA” to State1 (normal)
Set “menuB” to State1 (normal)
Case 2
(Else If “[[sidebanner]]” equals “closed”):
Set “menuA” to State2 (normal_closed")

Case 3
and so on …

you can achieve such things for example in Axure, but Axure is miserable under the responsive aspect compared to Antetype.
Best Regards

ok, just for the record, as Script-Action this would roughly translate to:

let sideBanner = targetCells[0];   // given as parameter in the interaction-inspector
let menuA = targetCells[1];   // ditto
let menuA = targetCells[2];   // ditto

if (sideBanner.activeState.name == "open") {
     let normalState = menuA.widget.states.find( s => s.name == "Normal" );
     at.changeStateOfCell(menuA, normalState);
     at.changeStateOfCell(menuB, normalState);
} else if (sideBanner.activeState.name == "closed") {
     let state2 = menuA.widget.states.find( s => s.name == "normal_closed" );
     at.changeStateOfCell(menuA, state2);
....

(typed in this comment, surely contains typos). Note the API can and will be improved. We have some documentation for it http://antetype.com/docs/antetype-webpreview/at-javascript.html.

Just out of interest: do you prefer a visual approach (non-textual) for this kind of interaction or would a better API/Editor of JavaScript help you?

Cheers,

Felix

1 Like

hi fizfaz,
I’ll try that out and watch the Javascript documentation when I come back from vacation on Monday. In Axure, I’ve solved this kind of sidebar interaction with the interaction panel. To be honest, I would prefer and appreciate a visual approach in antetype, because I’m not a real programmer.
Thank you in advance for your effort.