Bootstrap navbar dropdown focus control menu after click

Question

Situation

• I have a navbar on my site, and in it I have several dropdown menus / megamenus.
• I need that when clicked on this dropdown, the user has the option to "scroll" the page up and down with the arrow keys on the keyboard.
• With the mouse scroll this already works
• But not the keyboard... even if you set the focus (using the .Focus() of jquery) on some element that is outside the navbar.

Jsfiddle is here, resize the screen if the dropdown does not appear.

Then try pressing up and down on the keyboard, in this case it won’t work (the screen won’t go down or up)... only works with the mouse scroll, and I would need it to work with the keyboard as well

Answer 1

Daniel, here’s a suggestion: http://jsfiddle.net/Lqdxf/

$('.navbar-collapse').keyup(fazerScroll);

function fazerScroll(event) {
    if (!$('.navbar-collapse').is(':visible')) return;
    var navBar = document.querySelector('.navbar-collapse');
    var scrollAtual = navBar.scrollTop;

    var incremento = event.keyCode == 40 ? 100 : event.keyCode == 38 ? -100 : 0;
    if (!incremento) return;
    $(navBar).stop().animate({
        scrollTop: scrollAtual + incremento
    }, 500);
}

This code calls the function fazerScroll() each time a key is pressed inside the nav-bar. When the function opens it checks if the dropdown is visible, otherwise it stops. Then measure the current position to scroll and increment 100px in case the pressed key is up and -100px in case it is down. Before animating to the final position, check if there is an increment to avoid running the function .animate(). Note that I used the .stop() to allow Animate to run in another direction if you press the quick keys, or it would accumulate instructions and have a strange behavior

Answer 2

I don’t know if this is what you need, but you can create a keyup event bind and check if the user pressed the up or down arrows and scroll the screen:

$(document).keyup(function(event) {
  if(event.keyCode == 38) { // codigo da seta pra cima
    // faça a rolagem pra cima
  } else if(event.keyCode == 40) { //codigo da seta pra baixo
    // faça a rolagem pra baixo
  }
});

To scroll the screen to some element you can use the jquery scrollTop method:

$('html, body').animate({
    scrollTop: ($('seletor-do-elemento').offset().top)
},500);

Answer 3

So guys, I ended up finding an answer.

Click here to see jsfiddle

I ended up capturing the onclick event from the menu.

I avoid the spread of this event.

And I control the opening and closing of the menu in the hand.

For this, I had to remove the attribute data-toggle menu.

Thanks for the help.