Navegar Metro UI Css Sidebar con teclado (Keypressjs)

Solo opera si el foco lo tiene la caja de búsqueda

by Alejandro Hernández

HTML

<script src="https://cdn.rawgit.com/dmauro/Keypress/master/keypress.js"></script>
<input type="text" id="search" />
<!-- Sidebar -->
<div class="metro" style="width: 50px">
  <nav class="sidebar busqueda">
    <ul>
      <li class="title">Items Group 1</li>
      <li class="ooo"><a href="#"><i class="icon-home"></i>Dashboard</a></li>
      <li class="stick bg-red"><a href="#"><i class="icon-cog"></i>Layouts</a></li>
      <li class="">
        <a class="dropdown-toggle" href="#"><i class="icon-tree-view"></i>Sub menu</a>
        <ul class="dropdown-menu" data-role="dropdown">
          <li><a href="">Subitem 1</a></li>
          <li><a href="">Subitem 2</a></li>
          <li><a href="">Subitem 3</a></li>
          <li class="divider"></li>
          <li><a href="">Subitem 4</a></li>
          <li class="disabled"><a href="">Subitem 4</a></li>
        </ul>
      </li>
      <li class="stick bg-green"><a href="#">Thread item</a></li>
      <li class="disabled"><a href="#">Disabled item</a></li>

      <li class="title">Items Group 2</li>
      <li><a href="#">Other Item 1</a></li>
      <li><a href="#">Other item 2</a></li>
      <li><a href="#">Other item 3</a></li>
      <li>
        <a class="dropdown-toggle" href="#">Sub menu 2</a>
        <ul class="dropdown-menu" data-role="dropdown">
          <li><a href="">Subitem 1</a></li>
          <li><a href="">Subitem 2</a></li>
          <li><a href="">Subitem 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>

</div>

<div id="resultado">resultado</div>

CSS

.busqueda {
  min-width: 200px;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

html,
body,
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
}

a:hover,
a:active,
.tile:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  vertical-align: top;
}

input[type=text]::-ms-clear,
input[type=email]::-ms-clear,
input[type=url]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear,
input[type=time]::-ms-clear {
  display:...

JavaScript

var i = -1;
var cajaBusqueda = document.getElementById("search");
var listener = new window.keypress.Listener(cajaBusqueda);
listener.simple_combo("down", function() {
  var $opciones = $("nav.sidebar.busqueda ul li:has(a):visible:not(.disabled)");
  $opciones.filter(".active").removeClass("active");

  if (i === $opciones.size() - 1) {
    i = 0;
  } else {
    i++;
  }

  $opciones.eq(i).addClass("active");
});

listener.simple_combo("up", function() {
  var $opciones = $("nav.sidebar.busqueda ul li:has(a):visible:not(.disabled)");
  $opciones.filter(".active").removeClass("active");

  if (i <= 0) {
    i = $opciones.size() - 1;
  } else {
    i--;
  }

  $opciones.eq(i).addClass("active");
});

listener.simple_combo("enter", function() {
  var $opcion = $("nav.sidebar.busqueda ul li.active:has(a):visible:not(.disabled)");
  $("#resultado").html($opcion.find('a:first()').text());
});