Keyboard navigation

JavaScript
1

need to navigate the submenu using the up and down arrow aslo navigate back to the main menu using shift+tab
here is the codepen

2

You would want to start by checking from a document-based event handler that the key press occurred while the menu was open. If the menu isn’t open then you should ignore the key press.

3

how it can be done do u have any example?

4

Sure, here’s how it can be done.

function menuKeyPress(keyCode) {
    // function to be implemented
}
function keypressHandler(evt) {
    var menuIsOpen = ... ;
    if (menuIsOpen) {
        menuKeyPress(evt.code);
    }
}
document.body.addEventListener("keypress", keypressHandler);

Do you know how to tell if your menu is open?

5

e.addEventListener(‘focus’, function(event){
if(event.keyCode==9)
event.preventDefault();
event.stopPropagation();
t.openDropdown(e,{keyboardNavigation: true});
});
this is the code for open the menu using keypress

6

Oh good, that looks to be a good place to add the keypress event listener.

7

i tried this

$(document).keydown(
     function (e) {
       console.log(e.shiftKey);
       if (e.keyCode == 40) {
         if ($('li').is(':focus')) {
           $("li:focus").next().focus();
         } else {
           $("li:first-child").focus();
         }

       } else if (e.keyCode == 38) {
         if ($('li').is(':focus')) {
           $("li:focus").prev().focus();
         } else {
           $("li:first-child").focus();
         }
       } else if (e.keyCode == 9 && e.shiftKey) {
         if ($('li').is(':focus')) {
           $("li:focus").prev().focus();
         } else {
           $("li:first-child").focus();
         }
       }
     }
   );

but not working

8

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