Keyboard Navigation Widget

keyboard.css

#key-tip {
    background:#EEE;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-62.5px;
    margin-left:-119px;
    height:125px;
    width:138px;
}
    
#key-tip .close {
    background:url("../images/close.png") no-repeat center center #D1D3D4;
    display:block;
    position:absolute;
    right:0;
    top:0;
    height:17px;
    padding:0;
    text-indent:-9999px;
    width:17px;
}
    
#key-tip a:hover,
#key-tip a:focus {
    background-color:#FFF;
}
    
#key-tip .key {
    background:#FFF;
    color:#1E1E1E;
    display:block;
    height:25px;
    line-height:24px;
    margin:0;
    padding:0;
    position:absolute;
    text-align:center;
    text-decoration:none;
    width:25px; 
}
    
#key-tip span.key {
    text-indent:-9999px;
}
   
#key-tip a:hover {
    background:#FF5800;
    color:#FFF;
    text-decoration:none;
}
    
#key-tip .u {
    top:20px;
    left:50%;
    margin-left:-12.5px;
}  

#key-tip .d {
    top:47px;
    left:50%;
    margin-left:-12.5px;
}   

#key-tip .r {
    top:47px;
    right:0;
    margin-right:29px;
}  

#key-tip .l {
    top:47px;
    left:0;
    margin-left:30px;
}   

#key-tip h3 {
    bottom:10px;
    color:#1E1E1E;
    font-family:Verdana, Geneva, sans-serif;
    font-size:10px;
    font-weight:normal;
    left:10px;
    letter-spacing:normal;
    position:absolute;
    text-align:center;
    text-transform:uppercase;
    width:118px;
}

keyboard.html

<script type="text/javascript" src="keyboard.js"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

<div id="key-tip">
    <a href="#" title="Close" class="close">Close</a>
    <span class="key u"><strong>&uarr;</strong></span>
    <a href="#" class="key r"><strong>&rarr;</strong></a>
    <span class="key d"><strong>&darr;</strong></span>
    <a href="#" class="key l"><strong>&larr;</strong></a>
    <h3>Use yor <strong>L</strong> & <strong>R</strong> keyboard arrows</h3>
</div>

keyboard.js

$('.close').click( function(){
	$(this).parent().fadeOut();
});

$(document).keydown( function(e){
							   
	console.log('Key Pressed: '+e.keyCode);
	
	if (e.keyCode == 39) {
		$('#key-tip').find('.r').css({
			'color' : '#FFF',
			backgroundColor : '#FF5800'
		});
		// function r
	}
	
	if (e.keyCode == 37) {
		$('#key-tip').find('.l').css({
			'color' : '#FFF',
			backgroundColor : '#FF5800'
		});
		// function l
	}
	
	if (e.keyCode == 38) {
		$('#key-tip').find('.u').css({
			'color' : '#FFF',
			backgroundColor : '#FF5800'
		});
		// function u
	}
	
	if (e.keyCode == 40) {
		$('#key-tip').find('.d').css({
			'color' : '#FFF',
			backgroundColor : '#FF5800'
		});
		// function d
	}
	
});

$(document).keyup(function(e) {
	$('#key-tip span').attr('style','');
});