Config Menu

by roomyrooms

HTML

<div id='config_tab_container'>
  <div class='config_tab' id='config_profile'>
    <span class='config_tab_text'>
      Profile
    </span>
  </div>
  <div class='config_tab' id='config_game'>
    <span class='config_tab_text'>
      Game
    </span>
  </div>
  <div class='config_tab' id='config_audio'>
    <span class='config_tab_text'>
      Audio
    </span>
  </div>
  <div class='config_dragbar'></div>
</div>

<div id='config_container'>

  <div class='config_contents' id='config_profile_contents'>
    Test 1
  </div>
  
  <div class='config_contents' id='config_game_contents'>
    <span class='config_section'>Chat</span>
    <input type='checkbox' class='config_checkbox'>
  </div>
  
  <div class='config_contents' id='config_audio_contents'>
    Test 3
  </div>

</div>

CSS

#config_tab_container {
  padding-left: 4px;
  padding-top: 4px;
  user-select: none;
}


.config_tab {
  background-image: url('https://i.gyazo.com/0d947d27cd9d766c5a02bcd23c211fda.png');
  filter: brightness(0.7) grayscale(0.4);
  width: 48px;
  height: 32px;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: center;
}
.config_tab.active {
  filter: none;
}
.config_tab_text {
  color: #eee;
  font-size: 14px;
  top: 20%;
  position: relative;
  text-shadow: 1px 1px #000;
}
.config_dragbar {
  display: inline-block;
  width: 77%;
  height: 25px;
  float: right;
  background-image: url(https://i.gyazo.com/2a827a32d033bff17d943bc96075d885.png), url(https://i.gyazo.com/3e7d6cd4268f3b325f4d7005c76cb137.png), url(https://i.gyazo.com/f02e594ee137f1530095f5d49eb38670.png);
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: left bottom, right bottom, center bottom;
}




#config_container {
  z-index: 1;
  position: relative;
  min-height: 300px;
  margin-top: -8px;
  border: 10px solid;
  border-image: url(https://i.gyazo.com/34a29fe2749b507b0ab6e8358baaf798.png) 10 round;
  background: #191919;
  border-radius: 5px;
  padding-left: 2px;
  user-select: none;
}



.config_contents {
   color: #ddd;
   display: none;
}

.config_section {
  display: block;
  text-shadow: 1px 1px #000;
  font-size: 13px;
  font-style: italic;
  padding-top: 2px;
  cursor: pointer;
  color: #ddd;
  width: 100%;
  margin-left: -2px;
}
.config_section:hover {
  color: #fff;
}

.config_checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.config_checkbox {
  
}

JavaScript

var coll = document.getElementsByClassName("config_tab");
var allConfigs = [];
var i;

for (i = 0; i < coll.length; i++) {
	allConfigs.push(coll[i].id);
  coll[i].addEventListener("click", function() {
    for (var y in allConfigs) {
    	var curConfig = allConfigs[y];
      if (curConfig == this.id) {
      	document.getElementById(curConfig+"_contents").style.display = "block";
      } else {
      	document.getElementById(curConfig+"_contents").style.display = "none";
      }
    }
  	this.classList.toggle("active");
    for (var x = 0; x < coll.length; x++) {
    	if (coll[x] != this) {
 		 		coll[x].classList.remove("active");
      }
    }
  });
  coll[1].click();
}