Trait Menu

by roomyrooms

HTML

<div id='trait_tab_container'>
  <div class='trait_tab' id='trait_feats'>
    <span class='trait_tab_text'>
      Feats
    </span>
  </div>
  <div class='trait_tab active' id='trait_quirks'>
    <span class='trait_tab_text'>
      Quirks
    </span>
  </div>
  <div class='trait_tab' id='trait_flaws'>
    <span class='trait_tab_text'>
      Flaws
    </span>
  </div>
</div>

<div id='trait_container'>
  <div id='trait_scroll'>

    <div class='trait_contents' id='trait_feats_contents'>
      
      <span class='trait_list_title'>
        Items
      </span>
      <div class='trait_list_container'>
        <div class='trait_item'>
          <img class='trait_icon' src='https://i.gyazo.com/e70c529e4e5fd8f92d15700a3b05d45d.png'>
          <span class='trait_section'>Family Heirloom</span> <span class='trait_cost_plus'>[-1]</span>
          <br>
          <span class='trait_desc'>You spawn in with a powerful heirloom weapon that you may, later in life, take on as your own.</span>
        </div>
        <div class='trait_item'>
          <img class='trait_icon' src='https://i.gyazo.com/e70c529e4e5fd8f92d15700a3b05d45d.png'>
          <span class='trait_section'>Well Equipped</span> <span class='trait_cost_plus'>[-1]</span>
          <br>
          <span class='trait_desc'>You spawn in with a set of Uncommon Rings, an Uncommon Amulet, and an Uncommon Spellblade.</span>
        </div>
      </div>
      
      <br>
      <span class='trait_list_title'>
        Specialties
      </span>
      <div class='trait_list_container'>
        <div class='trait_item'>
          <img class='trait_icon' src='https://i.gyazo.com/e70c529e4e5fd8f92d15700a3b05d45d.png'>
          <span class='trait_section'>Natural Fortitude</span> <span class='trait_cost_plus'>[-1]</span>
          <br>
          <span class='trait_desc'>+10 Constitution. Your body is naturally durable!</span>
        </div>
        <div class='trait_item'>
          <img class='trait_icon'...

CSS

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


.trait_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;
}
.trait_tab.active {
  filter: none;
}
.trait_tab_text {
  color: #eee;
  font-size: 14px;
  top: 20%;
  position: relative;
  text-shadow: 1px 1px #000;
}




#trait_container {
  z-index: 1;
  position: relative;
  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;
  width: 600px;
}

#trait_scroll {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-left: 2px;
  width: 100%;
  position: relative;
}


.trait_list_title {
  font-size: 12px;
  font-family: Verdana;
  margin-left: -2px;
}

.trait_list_container {
  border: 1px solid grey;
  border-radius: 4px;
  padding: 5px;
  margin-left: -2px;
  width: 70%;
  padding-bottom: 0px;
}

.trait_cost_plus {
  color: #00cc00;
  font-size: 11px;
  font-family: Verdana;
  text-decoration: none;
}

.trait_contents {
  color: #ddd;
  display: none;
  text-shadow: 1px 1px #000;
  font-size: 14px;
}

.trait_item {
}

.trait_icon {
  position: absolute;
}

.trait_section {
  font-size: 12px;
  font-weight: 600;
  margin-left: 36px;
  margin-top: 1px;
  display: inline-block;
  font-family: Verdana;
  text-decoration: underline;
}

.trait_desc {
  font-size: 11px;
  color: #bbb;
  text-shadow: 1px 1px #000;
  margin-left: 35px;
  margin-bottom: 5px;
  display: inline-block;
  font-family: Verdana;
}

.trait_input {
  background-color: #333;
  padding-left: 4px;
  padding-right: 4px;
  margin-top: 2px;
  border: 1px solid #555;
  border-radius: 5px;
  display: inline-block;
  width:...

JavaScript

var coll = document.getElementsByClassName("trait_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";
      }
    }
    var newColl = document.getElementsByClassName("trait_tab");
  	this.classList.add("active");
    for (var x = 0; x < newColl.length; x++) {
    	if (newColl[x] != this) {
 		 		newColl[x].classList.remove("active");
      }
    }
  });
  coll[0].click();
}