Issue creating sub menu item , Main Menu item not preservering it's selected state

Good Morning All,

I’ve been working on this Main Menu that has a submenu which is triggered upon selecting the first Menu item. When the submenu is triggered the border applied to the main menu item should stay visible.
However in my current version when the submenu has triggered the border of the main menu item disappears.
I’ve tried applying everything I could think off and am now wondering What else I can try.
This is a screenshot of How it currently looks

This is How it should look

I’m also attaching my current file here, any advice would be greatly appreciated.
mainmenu.rp (76.9 KB)

@bridgetz,

You’re so close! Your myselfcare widget has styling for a selected state, but you never explicitly set it to its “selected” state. Clicking on a widget does not automatically change its state to “selected”. So, you just need to use the Set Selected/Checked action for this.

Here is a fix:
mainmenu-v2.rp (79.7 KB)

Technically, you have set this up so the submenu is shown upon either hovering (OnHover) or clicking (OnClick) the first menu item, myselfcare, but not actually upon selecting it. There is an event just for this, OnSelected (look in the “More Events” droplist) which you could use but isn’t necessary here. My point here is you have two events which will cause the submenu to be shown, so both those events should also set myselfcare to its “selected” state.

The secondarynav dynamic panel (dp) overlaps myselfcare by a few px (and has a solid white box in the background)–enough to obscure the red bottom border when it is shown. So I lowered it a bit to match your desired look. This dp also has an OnClick event to Show myselfcare, which maybe is a test or something? I don’t see how or why myselfcare would ever be hidden… Also, since you have (soon to be) clickable widgets inside the dp, it is best to keep all the OnClick events there instead of mixing them on the dp as well as inside the dp. In general, if there are both, the inner events will fire instead of outer events, which can be confusing if you are expecting the outer event (Show myselfcare) to work and it doesn’t. I also added an action to unselect all the top-level menu widgets when the submenu is hidden (OnMouseOut), otherwiseThe secondarynav dynamic panel (dp) overlaps myselfcare by a few px (and has a solid white box in the background)–enough to obscure the red bottom border when it is shown. So I lowered it a bit to match your desired look. This dp also has an OnClick event to Show myselfcare, which maybe is a test or something? I don’t see how or why myselfcare would ever be hidden… Also, since you have (soon to be) clickable widgets inside the dp, it is best to keep all the OnClick events there instead of mixing them on the dp as well as inside the dp. In general, if there are both, the inner events will fire instead of outer events, which can be confusing if you are expecting the outer event (Show myselfcare) to work and it doesn’t. I also added an action to unselect all the top-level menu widgets when the submenu is hidden (OnMouseOut), otherwise myselfcare would still be selected after the user navigates away from it.

Consider making a style for your "selected menu item" and applying that instead of setting each state to the same multiple settings. This will save time and ensure consistency, especially as you build out the rest of the menu items. Also much easier to update the style later on if needed.

I also recommend making all the menu items part of a selection group (same for submenu items, in a different group) so that only one can be selected at a time. When any item in a selection group is selected, the rest are automatically unselected. You can drag across your menu items to select them all in the editor, then type in a name in the "Selection Group" droplist in the Properties panel…

Consider making a style for your selected menu items and applying that instead of setting each state to the same multiple settings. This will save time and ensure consistency, especially as you build out the rest of the menu items. Also much easier to update the style later on if needed.

I also recommend making all the menu items part of a selection group (same for submenu items, in a different group) so that only one can be selected at a time. When any item in a selection group is selected, the rest are automatically unselected. You can drag across your menu items to select them all in the editor, then type in a name in the "Selection Group" droplist in the Properties panel.

Wow , this is amazing. Thank you so much for your help and explaining How everything works.
I realised the submenu was overlapping just now. I was so frustrated that I couldn’t see the obvious error I had made.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.