JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="selection" class="button"><p>TV</p></div>
    <div id="tv" ></div>
    <div id="vod" class="button"></div>
    <div id="settings" class="button"></div>
</div>

CSS

#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-image:url("https://dl.dropbox.com/u/20956652/samsung/960x540/speg_background_transparent.png");
    background-color:#888;
}

#tv,#vod,#settings{
    position:fixed;
    top:325px;
    width:253px;
    height:70px;
    float: left;
    display:none;
}
#tv{
    left:98px;
}
#vod{
    left:351px;
}
#settings{
    left:604px;
}

#selection{
    position:absolute;
    left:98px;
    top:217px;
    width:253px;
    height:98px;
    float: left;
    background-color: #E87505;
    color:white;
    font:bold 28px "Verdana";
    text-align:center;
    display: table;
}
#selection p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}

#tv{
    background-image : url("https://dl.dropbox.com/u/20956652/samsung/960x540/TV_sel_3.png");
}
#vod{
    background-image : url("https://dl.dropbox.com/u/20956652/samsung/960x540/Vod_sel_3.png");
}
#settings{
    background-image : url("https://dl.dropbox.com/u/20956652/samsung/960x540/settings_sel_3.png");
}

JavaScript

var menu = [ {id:'tv', name:"ТВ"}, {id:'vod', name:"Видеотека"}, {id:'settings', name:"Настройки"} ];

jQuery(document).ready(function($) {

    var selected = 0;
    var selectMax = 2;
    $("#"+menu[selected].id).show();
    
    $(".button").click(function(){ 
        $("#"+menu[selected].id).fadeOut('fast');
        
        var offset = 253;
        var operation = '+=';
        var left = parseInt( $(this).css('left').replace(/[^-\d\.]/g, ''));
        if( left > 500 ){  operation = "-=";offset = 506; }
        if( selected +1 < menu.length ) selected++;
        else selected = 0;
        
        $("p", this).fadeOut(500, function(){
            $(this).text( menu[selected].name );
        });
        $(this).animate({
            left: operation + offset
          }, 500, function() {
            $("p", this).fadeIn();
              $("#"+menu[selected].id).fadeIn(500);
          });
    });
});