JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
   <div id="mainview"></div>
    <div id="mainbar">
        <div id="entry" class="menuentry entry_back">ОБЩИЕ</div>
        <div id="entry" class="menuentry entry_back">KARTINA TV</div>
        <div id="entry" class="menuentry entry_back">СЕТЬ</div>
        <div id="entry" class="menuentry entry_back">ДЕТИ</div>
        <div id="entry" class="menuentry entry_back">ПОМОЩЬ</div>
        
        <div id="entry" class="menuentry entry_back">ИНФОРМАЦИЯ</div>
        
    </div>
<div id="maintop">
            <div class="top_time"></div>
            <div class="top_week"></div>
            <div class="top_date"></div>
    </div> 
    <input id="anchor" type="hidden" value="" />
</div>

CSS

@font-face
{
    font-family: NeoSans;
    src: url('http://mywidget.tv/ktv/kartina/font/NeoSansPro-Regular.ttf');
}

#main{
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:720px;
    width:1280px;
    #border: 0px solid red;
    background-color:#111;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
}
.top_week{
    position:absolute;
    left:650px;
    color:white;
    font-size:2em;
    font-family: NeoSans;
    color:#FF7F00;
}
.top_date{
    position:absolute;
    left:650px;
    top:40px;
    color:white;
    font-size:2em;
    font-family: NeoSans;
}
.top_time{
    position:absolute;
    left:450px;
    color:white;
    width:200px;
    #background-color:red;
        font-size:4em;
    font-family: NeoSans;
}

#mainview{
    position:fixed;
    top:90px;
    margin:0;
    padding:0;
    height:540px;
    width:1280px;
    #border: 1px solid black;
    background-color:#666;
    box-shadow:inset 0px 0px 20px #000;
    
}



#maintop{
    position:fixed;
    top:0px;
    margin:0;
    padding:7px;
    height:85px;
    width:1266px;
    #border: 1px solid black;
    background-color:#111;
    box-shadow:inset 0px 0px 20px #000;
    text-align:center;
    color:white;
    background-image:url(http://dl.dropboxusercontent.com/u/20956652/samsung/kartina/settings_top_left.png);
    background-repeat:no-repeat;
     box-shadow:0px 10px 20px #000;
}

#mainbar{
    position:absolute;
    top:-90px;
    left:0;
    margin:0;
    padding:0;
    height:70px;
    width:1278px;
    border: 1px solid #000;
    background-color:#000;
    box-shadow:0px 10px 20px #000;
    clear:both;
    overflow:hidden;
}

.menuentry{
    #position:absolute;
    margin:3px;
    padding:15px;
    height:40px;
    width:235px;
    #background-color:#222;
    color:#777;
    font-size:2em;
    font-family: NeoSans;
    #font-weight: bold;
    #text-shadow:0px 0px 2px #000;
    display:none;    
    float:left;
}
.entry_back{
   ...

JavaScript

bartimer = null;
entries = 6;
selected = 0;
loaded = false;

jQuery(document).ready(function($) {
    
    
    showTime();
    /*
    $("#mainview").click( function(){
        select();
        if( bartimer )
           clearTimeout(bartimer);
        $("#mainbar").stop(true)
        .animate({left:'0px'}, 1000);        
        //bartimer=setTimeout(hideBar,15000);
    });*/
    
    
    $(document).on('keyup', function(event){
        var keycode = event.which || event.keyCode; // Ex : 112
        //alert( keycode );
        switch( keycode ){
            case 37: // left
                select(-1);                
                break;
            case 39: // right
                select(1);    
                break;
            case 38: // up
                hideBar();
                break;
            case 40: // down
                showBar();
                break;
            default:
                break;                
        }
    
    }).click( function(){
        if( loaded ) return false;
         loaded = true;
         select(0);
         showBar(1);
    });
    
});

function showBar( first ){
    if( first ){
        var realwidth = ($(".menuentry").length) * $(".menuentry").eq(0).width() + 220;
        //alert( realwidth );
        $("#mainbar").width(realwidth + "px").animate({top:'100px'}, 1000, function(){
            slideEntry(0)
        });  
    }else
    {
         $("#mainbar").animate({top:'100px'}, 500);  
    }
}

function hideBar(){
     //alert( realwidth );
    $("#mainbar").animate({top:'-100px'}, 500, function(){
        //$(".menuentry").hide();
    });  
    
}

function slideEntry( idx ){
    $(".menuentry").eq(idx).delay(100).slideDown( 'slow', function(){
        var next = idx+1;
        //alert( next );
        slideEntry ( next );        
    });
}

function select( pos ){
   $(".menuentry").eq( selected )
   .removeClass("entry_back_sel")
   .addClass("entry_back")
   .css({"color":"#777"});
    selected+=pos;
...