LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.App {
  position:relative;

}

.flex-col {
  display:flex;
  flex-direction:column;
}
.flex-row {
  display:flex;
  flex-direction:row;
}

.play_field {
margin:auto;
width:95vmin;
height:95vmin;
background-color:red;
border:2px solid;
}

.menuBut {
  position:absolute;
  width:50px;
  height:50px;
  bottom:40px;
  left:40px;
  
}

.menu__container {
  background-color:background: rgba( 255,255,255); 
  position:absolute;
  top:0px;
  width:100%;
  height:100%;
  display:flex;
}


.menu {
  display:flex;
  margin:auto;
  width:60vmin;
  min-height:60vmin;
  justify-content:center;
  align-items:center;
  border:2px solid;
  background-color:blue;
}

.stat {
  display: none;
  margin:auto;
  width:60vmin;
  min-height:60vmin;

  border:2px solid;
  background-color:green;
}
.menu__item {
  margin:10px;
}
.tabs_container > div
.tabs_container > input { 
  display: none; 
}

.tabs_container label { 
  padding: 5px;
  border: 1px solid #aaa;
  line-height: 28px; 
  cursor: pointer; 
  position: relative; 
  bottom: 1px; 
  background: #fff; }
.tabs_container input[type="radio"]:checked + label {
   border-bottom: 2px solid #fff;
}

.tabs_container > input:nth-of-type(1):checked ~ div,
.tabs_container > input:nth-of-type(2):checked ~ div,
.tabs_container > input:nth-of-type(3):checked ~ div,
.tabs_container > input:nth-of-type(4):checked ~ div {
  display:none;
}
.tabs_container > input {                   position: absolute;
  left: -9999px; 
}
.tabs_container > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.tabs_container > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.tabs_container > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.tabs_container > input:nth-of-type(4):checked ~ div:nth-of-type(4){
   display: block; padding: 5px; border: 1px solid #aaa; }
JS
function onclickMenu () {
  if (document.querySelector(".menu__container").style.display==="none") { document.querySelector(".menu__container").style.display="flex";
 document.querySelector(".menu").style.display="flex";  document.querySelector(".stat").style.display="none";                                                                         
   }
  else {  document.querySelector(".menu__container").style.display="none";
       
       }
                   }
function onclickStat () {
  if (document.querySelector(".stat").style.display==="none") {
    document.querySelector(".menu").style.display="none";  document.querySelector(".stat").style.display="flex";                 
                                                              }
  else { document.querySelector(".stat").style.display="none";
  document.querySelector(".menu").style.display="flex";      
       }
                   }
Term
Wed, 12/27/2017 - 07:00

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv