JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div class="div_Principale">
        <div class="div_Menu"></div>
        <div class="div_barraSopra">
            <button id="btnMenu"></button>
        </div>
        <div class="div_Oggetti"></div>
        <div class="div_barraSotto"></div>
    </div>

CSS

html{
    background: url(../img/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

body{
    font-family: 'Roboto', sans-serif;
    background-color: transparent;
}

/***********************************/


.div_Principale{
    margin: auto;
    width: 1024px;
    height: 768px;
    margin-top: 20px;
    display: block;
    background-color: pink;
}

.div_Oggetti{
    position: absolute;
    float: left;
    margin-top : 60px;
    width: 1024px;
    height: 648px;
    background-color: gray;
    margin-left: 0px;
}

.div_barraSopra{
    position: absolute;
    width: 1024px;
    height: 60px;
    margin-top: 0px;
    
    background-color: red;
}

.div_barraSotto{
    position: absolute;
    width: 1024px;
    height: 60px;
    margin-top: 708px;
    background-color: blue;
}

.div_Menu{
    position: absolute;
    margin-top: 60px;
    height: 648px;
    width: 300px;
    margin-left: 0px;   
    
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: pink;
}


/*******************************/

button:focus {outline:0 !important;}

#btnMenu{
background-color: pink;    
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
    margin-left: 5px;
    position: absolute;
    background-color: transparent;
    border: none;
    box-shadow: none;
    text-decoration: none;
}


@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 

    #btnMenu{
         
         background-size: 60px 60px;
    }

}

.menu-livello1{
    width: 300px;
    height: 40px;
    color: #414141;
    font-size: 18px;
    line-height: 40px;
    padding-left: 10px;
    text-transform: uppercase;
    background-color:...

JavaScript

//************************************************************************************
//************************************************************************************
//************************************************************************************

var menuAperto = false;
var menuAbilitato = true;

var initialAmbient = null;
var initialLayer = null;


var JSON = '{"main":[{"initialAmbient":"0","initialLayer":"0","titleColor":"red","hideGuide":"0"}],"ambient":[{"id":"0","name":"HomePage","hide":"0","initial":"0","layer":[{"id":"0","hideList":"1","name":"HomePage","bgImageLayer":"layer/bg1.png","security":"0","layer_obj":[{"obj":"we","top":"365","left":"470","height":"100","width":"100","name":"ooooo","textColor":"white","refresh":{"ind":"1","wt":"1"}},{"obj":"we","top":"365","left":"900","height":"100","width":"100","name":"iiii","textColor":"white","refresh":{"ind":"1","wt":"1"}}]}]},{"id":"1","name":"test","hide":"0","initial":"0","layer":[{"id":"0","hideList":"1","name":"HomePage","bgImageLayer":"layer/bg1.png","security":"0","layer_obj":[{"obj":"we","top":"365","left":"470","height":"100","width":"100","name":"ooooo","textColor":"white","refresh":{"ind":"1","wt":"1"}},{"obj":"we","top":"365","left":"700","height":"100","width":"100","name":"iiii","textColor":"white","refresh":{"ind":"1","wt":"1"}}]}]}]}';

//************************************************************************************
//************************************************************************************
//************************************************************************************

$(document).ready(function() {

  ELABORA_JSON();

  $("#btnMenu").click(function(e){

        if(menuAbilitato){
            menuAbilitato = false;
            if(!menuAperto){

                menuAperto = true;
                $(".div_Oggetti").animate({
                    marginLeft: "300px",
                    width : "724px"
                }, 500);

               ...