index.html

<h2>Click <a href="http://mexxio.pl" target="_blank"><span>here</span></a> and visit my website.</h2>

<div class="key-wrapper">
  <ul class="row">
    <li class="key k81">q</li>
    <li class="key k87">w</li>
    <li class="key k69">e</li>
    <li class="key k82">r</li>
    <li class="key k84">t</li>
    <li class="key k89">y</li>
    <li class="key k85">u</li>
    <li class="key k73">i</li>
    <li class="key k79">o</li>
    <li class="key k80">p</li>
  </ul>

  <ul class="row">
    <li class="key k65">a</li>
    <li class="key k83">s</li>
    <li class="key k68">d</li>
    <li class="key k70">f</li>
    <li class="key k71">g</li>
    <li class="key k72">h</li>
    <li class="key k74">j</li>
    <li class="key k75">k</li>
    <li class="key k76">l</li>
  </ul>

  <ul class="row">
    <li class="key k90">z</li>
    <li class="key k88">x</li>
    <li class="key k67">c</li>
    <li class="key k86">v</li>
    <li class="key k66">b</li>
    <li class="key k78">n</li>
    <li class="key k77">m</li>
    <li class="key k188">,</li>
  </ul>
  <ul class="row">
    <li class="key k37">left</li>
    <li class="key k38">up</li>
    <li class="key k40">down</li>
    <li class="key k39">right</li>
  </ul>

  <ul class="row">
    <li class="key k32">space</li>
  </ul>
</div>

Navigate-With-Keyboard.markdown

Navigate With Keyboard

Visit my portfolio: http://mexxio.pl

A Pen by MEXXIO on CodePen.

License.

script.js

$(window).keydown(function(e) {
	key = (e.keyCode) ? e.keyCode : e.which;
	$('.key.k' + key).addClass('active');
	console.log(key);
  });
$(window).keyup(function(e) {
	key = (e.keyCode) ? e.keyCode : e.which;
	$('.key.k' + key).removeClass('active');
});

style.css

html {
  background: #222;
  color: #444;
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a {
	color:#444;
	text-decoration:none;
}

h2 {
  position: absolute;
  margin: -200px 0 0;
  top: 60%;
  width: 100%;
  color: #444;
  text-align: center;
}

span {
  padding: 0 0 2px;
  border-bottom: 1px dotted #444;
  cursor: pointer;
  -webkit-transition: .5s;
		 -moz-transition: .5s;
			 -o-transition: .5s;
			-ms-transition: .5s;
			  	transition: .5s;
}

span:hover {
  color: #0784C6;
}

.key-wrapper {
  position: absolute;
  top: 45%;
  left: 50%;
  margin: -100px -294px;
}

.row {text-align: center;}

.key {
  margin: 3px 1px;
  width: 50px;
  height: 50px;
  border: 2px solid #333;
  border-radius: 5px;
  display: inline-block;
  line-height: 52px;
  text-align: center;
  text-transform: uppercase;
 	-webkit-transition: .5s;
		 -moz-transition: .5s;
			 -o-transition: .5s;
			-ms-transition: .5s;
			  	transition: .5s;
}

.k32 {
  width: 346px;
}

.active {
  border: 2px solid #0784C6;
  color: #0784C6;
  -webkit-transition: 0s;
		 -moz-transition: 0s;
			-ms-transition: 0s;
			  	transition: 0s;
}