[SmartMenus 6 add-on]
This sample demonstrates a small add-on for SmartMenus 6 that extends the built-in keyboard navigation support in the SmartMenus script core (using the Tab key) by adding the ability to also access the links in the menus as you could in a desktop application by using the left, up, right, down and Escape keys. Support for configuring a hotkey that would send the focus directly to a given main menu is also available.
The add-on supports configuring keyboard access for more than one menu tree on the page if needed.
Hit Shift+F12 to send focus to the first link in the main menu above (this is the shortcut combination configured for it in this example). Once a link in the menu is focused, you can use the arrow keys (and Escape) to explore all other menu links.
Using the add-on is really simple - just link the small JS file on your page after the link to the SmartMenus script core (c_smartmenus.js) file.
The add-on can be customized through the following config block (found in the "s_addon_keyboard.js" file):
c_keyboard={
'Menu1' : [
123, // Hotkey ('',keyCode)
'shiftKey', // HotkeyModifierKey(s) ('','single','multiple|multiple|...')
'nextPageLink' // EscapeToElement ('','nextPageLink','JavaScript_expression')
]
// You can configure keyboard access for another menu tree too like this:
// ,'Menu2' : [ 122, 'ctrlKey', 'document.getElementById("myInputField")' ]
};
Here is a quick explanation of the configuration options:
HotkeykeyCode value of the hotkey - this is the key that when hit by the user would directly send focus to the first link in the given main menu. It is recommended to use some of the functions keys (F1 through F12) as detecting them is best supported across different browsers. Their corresponding keyCode values are from 112 to 123 (i.e. F1, F2, ... F11, F12 == 112, 113, ... 122, 123). You can also leave this field empty (i.e. '') - this means that the users will only be able to reach the menu by normal tabbing through the links on the page, however, once they focus a link in the menu, they will still be able to use the arrow keys (and Escape) to explore all other menu links.HotkeyModifierKey(s)ctrlKey, altKey, shiftKey and metaKey. In general, it is recommended to use a modifier key to avoid preventing imprortant default browser features from working properly in some browsers. Namely shiftKey is best supported across different browsers so maybe it is the best option - all others have issues in certain browsers (mainly Opera). The less supported modifier key across different browsers is the metaKey which is only available on Macintosh (and is not even perfectly supported in all Mac browsers) - this is the Command key - so it is not recommended to use it unless you know what you are doing. You can leave this field empty (i.e. ''), set a single modifier key (e.g. 'shiftKey') or set multiple modifier keys (e.g. 'ctrlKey|altKey|shiftKey').EscapeToElementnextPageLink' keyword or a custom JavaScript expression that evaluates to a valid element on the page (e.g. 'document.getElementById("myInputField")' or 'document.getElementById("myLink")'). The keyword 'nextPageLink' is predefined in the add-on script and means that the focus would be sent to the first link on the page that is located in the source after the menu tree. If there is no such link, nothing would happen.This add-on is supported in all browsers that are fully supported by the SmartMenus 6 script with the following exceptions:
You can download the complete example or just see the configuration file and the images used for it.
