Navegação utilizando as teclas de direção

by Elton Pongilo

HTML

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<p>* Clique em algum box para expandir e navegue usando as teclas de direção</p>

CSS

section {
  width: 200px;
  height: 230px;
  overflow: auto;
  border: 1px solid #eee;
  position: relative;
}

div {
  width: 100px;
  height: 30px;
  background-color: #eee;
  border: 1px solid #ccc;
  margin: 5px auto;
  cursor: pointer;
  -webkit-transition-duration: .4s;
  -webkit-transition-timing-function: ease;
  transition-duration: .4s;
  transition-timing-function: ease;
}

.selecionado {
  background-color: #aaa;
  width: 110px;
  height: 100px;
}

p {
  margin-top: 50px;
  font-family: sans-serif;
  font-size: 12px;
  color: #888;
}

JavaScript

$(document).ready(function() {
  $('div').click(function() {
  	$('div').removeClass('selecionado'); // Remove todos com a classe 'selecionado'
    $(this).toggleClass('selecionado');
  });

  $(document).keypress(function(e) { //Se houver interação com o teclado
    e.preventDefault(); // Cancela o comportamento padrão do evento
    var $selecionado = $(".selecionado"); //Armazena .selecionado em uma variavel
    if (e.which == 38 || e.keyCode == 38) { //Se precionado a tecla Up
      $selecionado = $selecionado.prev(); //Seleciona a div anterior a div.selecionada
      $("div").removeClass('selecionado'); //Remove todos as div.selecionada
      $selecionado.addClass('selecionado'); //Adiciona .selecionada na div anterior
    } else if (e.which == 40 || e.keyCode == 40) { //Se precionado a Tecla Down
      $selecionado = $selecionado.next(); //Seleciona a div seguinte a div.selecionada
      $("div").removeClass('selecionado'); //Remove todos as div.selecionada
      $selecionado.addClass('selecionado'); //Adiciona .selecionada na div seguinte
    } else if (e.which == 27 || e.keyCode == 27) { //Se precionado a Tecla ESC
      $("div").removeClass('selecionado'); //Remove todos as div.selecionada
    }
  });
});