JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="mainshadow">
</div>
<div id="main">    
</div>
<div id="menubar">   
    <div id="buttonset">
        <div class="mbutton" id="live">Телевидение</div>
        <div class="mbutton" id="vod">Видеотека</div>
        <div class="mbutton" id="settings">Настройки</div>
    </div> 
</div>

CSS

#main,#mainshadow{
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    #border: 0px solid red;
   background-color:#000;
    box-shadow:inset 0px 0px 40px #111,inset 0px 0px 90px #111,inset 0px 0px 40px #111;
    overflow:hidden;
    background-image:url(http://dl.dropboxusercontent.com/u/20956652/samsung/tv/0.jpg);
}
#mainshadow{
    #background-color:#f55;
}

#menubar{
    position:fixed;
    top:400px;
    
    left:0px;
    margin:0;
    padding:0;
    height:80px;
    width:960px;
    #border: 0px solid red;
    background-color:#111;
    
    box-shadow:0px 0px 30px #000;
    overflow:hidden;
}

#buttonset{
    padding:5px;
    margin:0px;
    height:60px;
    width:960px;
    #background-color:#f00;
    overflow:hidden;
}
.mbutton{
    position:relative;
    float:left;
    width:290px;
    height:50px;
    background-color:#111;
    margin:12px;
    text-align:center;
    font-size:2.5em;
    color:#fff;
    font-family: PT;
    text-transform: uppercase;
    #border:1px solid gray;
    box-shadow:inset 0px 0px 30px #444;
    border-radius:5px;
}


@font-face
{
    font-family: PT;
    src: url('http://dl.dropboxusercontent.com/u/20956652/samsung/vod/PT.ttf');
}

JavaScript

var bgpath = "http://dl.dropboxusercontent.com/u/20956652/samsung/";
var type = { 0: "tv/", 1 : "vod/", 2 : "settings/" };
var count = 1;
var selected = 0;
var previous = 1;
var maxselected =2;
var bgtimer = null;
var shadowfree = true;

jQuery(document).ready(function($) {
    activate(); 
    selectMenu();
    $(document).on('keyup', function(event){
        event.preventDefault();
        var keycode = event.which || event.keyCode; // Ex : 112
        //alert( keycode );
        switch( keycode ){
            case 37: // left
                goLeft();
                break;
            case 39: // right
                goRight();                
                break;
            case 38: // up
                goUp();
                break;
            case 40: // down
                goDown();
                break;
            case 13: // enter
                break;
            case 27: // escape
                break;
            default:
                break;                
        }
    
    });    
    
});

function selectMenu(){
    clearTimeout( bgtimer );
    //$("#main,#mainshadow").stop(true);
    $(".mbutton")
        .eq(previous).css(
        {
            "box-shadow":"inset 0px 0px 30px #444",
            "background-color":"#111",
            "color":"white"
        });
    $(".mbutton").eq(selected).css(
        {
            "box-shadow":"inset 0px 0px 50px #111",
            "background-color":"#FFF",
            "color":"black"
        }
    );
    if( true == shadowfree )
        $("#mainshadow").css("background-image", "url(" + bgpath + type[selected] + count + ".jpg)");
    activate(500);
    
}
function goLeft(){
    previous = selected;
    selected--;
    if( 0 > selected ) selected = maxselected;
    selectMenu();
}
function goRight(){ 
    previous = selected;
    selected++;
    if( maxselected < selected ) selected = 0;
    selectMenu();
}    

function goUp(){   
}

function goDown(){   
}

function activate( timems )
{
   ...