Navegar Metro UI Css Sidebar con teclado (Mousetrap)

by Alejandro Hernández

HTML

<script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js?9d308"></script>
<!-- Sidebar -->
<div class="metro" style="width: 50px">
    <nav class="sidebar test ">
    <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>

CSS

.test {
    position: absolute;
    left: 0;
    top: 0;
    max-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:...

JavaScript

var i = -1;
Mousetrap.bind('down', function() {
    var $lis = $("nav.sidebar ul li:has(a):visible:not(.disabled)");
    $lis.filter(".active").removeClass("active");
    
    if (i === $lis.size()-1){
        i = 0;
    }
    else { 
        i++;
    }
    
    $lis.eq(i).addClass("active");
});

Mousetrap.bind('up', function() {
    var $lis = $("nav.sidebar ul li:has(a):visible:not(.disabled)");
    $lis.filter(".active").removeClass("active");
    
    if (i <= 0){
        i = $lis.size()-1;
    }
    else {
        i--;
    }
    
    $lis.eq(i).addClass("active");
});