Show/Hide Menu Keep Sub-Menu Open

[smilinmike]

Is it possible to navigate to a sub-menu, Hide the Menu and then Show it again with the current sub-menu open and in focus? I should say I'm using the keyboard to do this. I've got it partially working but its not 100%. I;ve been through the documentation, but haven't figured out how to make this behave properly. The main issue I'm having is setting the focus for the current item. I'm using itemActivate, and it does open the sub-menu when I re-show the menu, but then I can't navigate left-Right with the keyboard. This is being used to create a menu system for a trade show video player, and I;m trying to keep the amount of clicks to a minimum to get back to where they were before they played the current video.

[vadikom]

It's quite hard for me to imagine what exactly you are trying to achieve (at least without a live demo) but have you checked the Keyboard addon:

http://vadikom.github.io/smartmenus/src/demo/keyboard-navigation.html

It provides advanced keyboard navigation support and I guess it might actually do the trick for you - or at least you might get some ideas from the code:

https://github.com/vadikom/smartmenus/blob/master/src/addons/keyboard/jquery.smartmenus.keyboard.js

If you are still having troubles, please post some kind of demo and explain exactly how it should behave.

[smilinmike]

Hi Vasil,

Thanks for the quick reply. Here is an online demo of what I have currently. http://www.iim-creative.com/Fuji-VideoPlayer-ASTRO21b/Fuji-VideoPlayer-ASTRO21.html This is using the Keyboard Navigation Add-on. For this application what we are trying to do is use the menu to play an assortment of videos or display still images. I have it "auto-highlight" the first menu entry using the "focus" method. Right now just the first menu item (Eye Candy) and the first 2 items (Table, Lasers) in the next sub-menu (System Features) have videos associated with them. In the Clinical Gallery I have put in some placeholder still images.

So the way we would like this to function is use the arrow keys to select different menu items. When the user finds the item they wish to display they hit the "enter" key. The menu will hide itself and play the video or show a still image. This all works great! Then the user would press the "page up" button to re-display the menu to select another item. This is where I am running into an issue. I can bring the menu back, but then the user needs to use the arrow keys to navigate back to where they were before the menu was closed. ie to go through a series of still images might become tiresome re-navigating over and over. The idea I would like to implement is the ability to re-open the menu in the same configuration as when it was closed, vs starting at the beginning each time. I've been partly successful in making this happen. I add a class "openMenu" to the item that I hit enter on. Then I use activateItem to open it back up when I press the "page up" button. This all seems to work, but I have an issue with the "focus" on the opened item. I can seem to set it or it gets set but its fouling something else up in the keyboard code, because the keyboard navigation is kind of broken when I re-open the menu.

So I guess thats basically my issue. I'd like to be able to re-open th emenu where I left off and have the last item in focus, ready to select the next item using the arrow and enter keys.

I'm sure its probably user error on my part. Please let me know if you need any additional details to help me find a solution to this issue.

Thanks again for all your hard work and effort in putting this excellent menu together. :)

Michael Stafford

[smilinmike]

OK, I was able to get this working. I guess I was trying too hard and made this much harder than it needed to be. The solution I came up with doesn't hide the menu, but moves it off screen while also using hideOnClick: false option. This allows the menu to stay open and focused, while "hiding" it while the video is playing. Pressing PageUp brings it back just like it was before being "hidden". You can see it working here: http://www.iim-creative.com/Fuji-VideoPlayer-ASTRO21-v4/Fuji-VideoPlayer-ASTRO21.html

[vadikom]

Great, glad to hear you've solved the issue in another way! :)

FYI, I just tested to check what was the initial problem and it was that you needed to set the internal focusActivated property to true in addition to focusing the previously active item so that the script starts reacting immediately to key strokes again - e.g. something like this:

$('#main-menu').smartmenus('itemActivate', lastActiveItem);
lastActiveItem.focus();
$('#main-menu').data('smartmenus').focusActivated = true;

But I must admit this is not documented anywhere so you had small chance of figuring it out quickly.

[smilinmike]

Thanks for the info Vasil. I tried a bunch of different ways of getting the focus set back after hiding the menu, but couldn’t get it working 100%. I will probably go back and re-visit this again and see if I can get it working with your suggestions. Thanks for looking at this and responding back as quickly as you did. 😊 From: Vasil Dinkov ***@***.***> Sent: Monday, October 18, 2021 8:08 AM To: vadikom/smartmenus ***@***.***> Cc: smilinmike ***@***.***>; Author ***@***.***> Subject: Re: [vadikom/smartmenus] Show/Hide Menu Keep Sub-Menu Open (Discussion #164) Great, glad to hear you've solved the issue in another way! :) FYI, I just tested to check what was the initial problem and it was that you needed to set the internal focusActivated property to true in addition to focusing the previously active item so that the script starts reacting immediately to key strokes again - e.g. something like this: $('#main-menu').smartmenus('itemActivate', lastActiveItem); lastActiveItem.focus(); $('#main-menu').data('smartmenus').focusActivated = true; But I must admit this is not documented anywhere so you had small chance of figuring it out quickly. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#164 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH7KU7BPESKX6DRXYRUKVKDUHQL3RANCNFSM5GAVL6KQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/AH7KU7CYZ757DO23E3AKRHDUHQL3RA5CNFSM5GAVL6K2YY3PNVWWK3TUL52HS4DFWFCGS43DOVZXG2LPNZBW63LNMVXHJKTDN5WW2ZLOORPWSZGOAALNDNY.gif>

…

-- This email has been checked for viruses by AVG. https://www.avg.com