Hi
With navigation menus that are set to drop down or wrap to a drop down menu on smaller screen sizes, they tend to take a long time to close after selecting an option.
We find that we to close the drop down, we have to click off the menu on the back page and then it still takes a couple seconds to close. I have recorded an example of this that I have attached here.
Is there any way to have the menu close when one of the options are selected?
Thank you!
Funny thing: This is the 3rd community post today dealing with issues we are working with in our own Org! I just rebuilt a solution to this problem. The key is the Action item Toggle Component, but you have to be careful. I started by giving all the child nav items the same “unique” Id, say DEV-LIST. Each child, along with its distinct actions, also toggles DEV-LIST off. The parent nav component toggles DEV-LIST on. When you would select a child item, the list goes blank. You bring it back by clicking the header/parent. Where this failed us though was adding conditional Display Logic to the child menu items. (Looked up the documentation for Toggle Component today and found that doing this gives “unpredictable” results.) We discovered that restricted menu items were reappearing when the DEV-LIST was toggled on after being off. My workaround was to build the menu where the parent has the unique Id, say DEV-MENU. The child items use the Toggle Component “hide” option to turn off DEV-MENU. They also have a second Toggle Component that “shows” another component. This one is a navigation component with a unique Id like NO-MENU. The label on NO-MENU is the same as the label on DEV-MENU, and its actions toggle/show DEV-MENU and toggle/hide NO-MENU (itself). DEV-MENU, of course, also toggles/shows NO-MENU. The two menus basically alternate with each other, and the display logic (so far) is applied correctly each time DEV-MENU is rendered. A further complication is that both menus appear on the initial page load. This was resolved with a snippet run as Display Logic for NO-MENU. The snippet uses document.getElementById(“NO-MENU”).style.display = ‘none’; return false; [javascript typed from memory; it might be inaccurate. ]
Hi Mike,
Thanks for the idea! I didn’t think of using the Action item Toggle component, but it definitely helps towards fixing this.
We’ve had issues before using this component and with render conditions on components we are hiding/showing, so I’m not surprised it is unpredictable.
I must admit your second workaround doesn’t quite make sense to me, and I couldn’t get it to work when I tried to follow it, but using your idea I was able to find that another alternative is to use both the toggle action with the branching action.
I have set a toggle action to each menu item (all with their own unique Ids) and and those that have a render condition I added a branch before that toggle action with the render condition logic in the branch. That way, if the menu items are showing, it toggles them, but if they aren’t, it skips that toggle action, and we don’t seem to get any buggy results with the actions.
