A Pen by Gino Farías Milla.

A-Pen-by-Gino-Farías-Milla.markdown

A Pen by Gino Farías Milla

A Pen by Gino Farías Milla on CodePen.

License.

index.html

<ul>
  <li><a href="#w" class="tecla" data-number="87">w</a></li>
  <li><a href="#a" class="tecla" data-number="65">a</a></li>
  <li><a href="#s" class="tecla" data-number="83">s</a></li>
  <li><a href="#d" class="tecla" data-number="68">d</a></li>
  <li><a href="#c" class="tecla" data-number="">c</a></li>
  <li><a href="#m" class="tecla" data-number="">m</a></li>
</ul>
<div class="content-mod">
  <div id="w">Content W</div>
  <div id="a">Content A</div>
  <div id="s">Content S</div>
  <div id="d">Content D</div>
  <div id="c">Content C</div>
  <div id="m">Content M</div>
</div>

script.js

/*$( "a" ).click(function(event) {
  event.preventDefault();
});*/
$(document).ready(function(){
    $(".content-mod div").css("display","none");
    $("#w").css("display","block");
    $(".tecla").click(function(e){
      e.preventDefault();
      todo($(this).attr("data-number"));
    });
});
$(document).keydown(function(event) {
  todo(event.keyCode);
});
function todo(codigo){
  switch (parseInt(codigo)) {
		case 87: showViaKeypress("#w"); break; 
		case 65: showViaKeypress("#a"); break;
		case 83: showViaKeypress("#s"); break;
		case 68: showViaKeypress("#d"); break;
	}
}
function showViaKeypress(element_id){
    $(".content-mod div").css("display","none");
    $(element_id).fadeIn(100);
}

style.less

body {
  background: #CCC;
}
ul {
  float: left;
  margin: 0;
  padding: 0;
  width: 300px;
  height: 300px;
  outline: 1px solid red;
  
  li {
    float:left;
    list-style: none;
    
    a {
      display: block;
      width: 100px;
      height: 150px;
      background: #333;
      color: #FFF;
      text-align: center;
      text-decoration: none;
      font-size: 32px;
      outline: 1px solid #999;
      
      &:hover {
        background: #999;
      }
    }
  }
}
.content-mod {
  width: 400px;
  height: 300px;
  float: left;
  overflow:hidden;
  outline: 1px solid #333;
  
  div {
    width: 400px;
    height: 300px;
  }
}