Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
</head>
<body>
  <div class="leftmenu">
    <div class="leftmenu-spacer"></div>
    <ul>
      <li id="Belethor" class="leftmenu-item leftmenu-nameitem" onclick="populaterightmenu('',this)">Belethor
        <audio id="sound1" src="audio/Belethor.ogg" preload="auto"></audio>
      </li>
      <li id="Apparel" class="leftmenu-item" onclick="populaterightmenu('ApparelList',this)">Apparel</li>
      <li id="Weapons" class="leftmenu-item" onclick="populaterightmenu('WeaponsList',this)">Weapons</li>
      <li id="Misc" class="leftmenu-item" onclick="populaterightmenu('MiscList',this)">Misc</li>
    </ul>
​
  </div>
  <div class="rightmenu" id="rightmenu">
    <ul id="ApparelList">
      <li class="rightmenu-item" onclick="getitem(this)" >item a1</li>
      <li class="rightmenu-item">item a1</li>
    </ul>
    <ul id="WeaponsList">
      <li class="rightmenu-item" onmouseout="hideItem()" onmouseover="showItem(this, false)" onclick="showItem(this, true)"
        data-link="https://www.aliexpress.com/item/32993125061.html?spm=a2g0o.productlist.0.0.3d3dbe31OlLHKV&algo_pvid=3a6b0c11-38f8-4429-b330-92e6e4d95228&algo_expid=3a6b0c11-38f8-4429-b330-92e6e4d95228-15&btsid=1e3bd92b-faa9-408e-88c3-022e421e77c1&ws_ab_test=searchweb0_0,searchweb201602_7,searchweb201603_52"
        data-title="My Axe"
        data-description="Have my axe. and my bow. and my taco."
        data-image="https://ae01.alicdn.com/kf/HTB1ZZdINYPpK1RjSZFFq6y5PpXa9/Medieval-sheep-head-axe-cosplay-Halloween-ball-props-PU-simulation-children-s-toy-weapons.jpg_220x220xz.jpg_.webp">
        item b1</li>
      <li class="rightmenu-item">item a1</li>
    </ul>
    <ul id="MiscList">
      <li class="rightmenu-item">item c1</li>
    </ul>
  </div>
  <div class="itempanel">
    <div class = "itemcontainer">
      <div id="itemdisplay" class="itemdisplay">
        <img id="itemimg" class="itemimg" src=""></img>
        <div id="itemdesc" class="itemdesc">
          <div id="itemtitle" class="itemtitle"></div>
          <div id="itembody" class="itembody"></div>
          <a id="itemclick" class="itemclick" href="">Click To Place Order</a>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
 
function populaterightmenu(menuname, object){
  var rightlist = ['ApparelList','WeaponsList','MiscList'];
  for (i = 0, len = rightlist.length; i < len; i++) {
    document.getElementById(rightlist[i]).style.display = "none";
  }
​
  var leftlist = ['Apparel', 'Weapons','Misc', 'Belethor'];
  for (i = 0, len = leftlist.length; i < len; i++) {
    var list = document.getElementById(leftlist[i]);
    if (list.id != 'Belethor')
      {list.className = "leftmenu-item";}
    else
      {list.className = "leftmenu-item leftmenu-nameitem";}
  }
​
  document.getElementById("rightmenu").style.display = "none";
  if (object.id != 'Belethor'){
    document.getElementById("rightmenu").style.display = "flex";
    object.className = "leftmenu-item-highlight";
  }
  else{
    object.className = "leftmenu-item leftmenu-nameitem";
    var snd = document.getElementById("sound1");
    snd.play();
  }
​
  document.getElementById(menuname).style.display = "block";
​
  wasClicked = false;
  hideItem();
​
}
​
var wasClicked;
function showItem(object, clicked){
​
  var itemdisplay = document.getElementById("itemdisplay");
  var itemtitle = document.getElementById("itemtitle");
  var itembody = document.getElementById("itembody");
  var itemclick = document.getElementById("itemclick");
  var itemimg = document.getElementById("itemimg");
  var itemdesc = document.getElementById("itemdesc");
​
  itemimg.src = object.dataset.image;
  itemimg.style.display = "block";
  itemtitle.innerHTML = object.dataset.title;
  itemtitle.style.display = "block";
  itembody.innerHTML = object.dataset.description;
  itembody.style.display = "block";
  itemclick.href = object.dataset.link;
  itemclick.style.display = "block";
​
  itemdesc.style.display = "flex";
  itemdisplay.style.display = "flex";
​
  wasClicked = clicked;
}
​
function hideItem(){
  if (wasClicked) return;
  var itemdisplay = document.getElementById("itemdisplay");
  var itemtitle = document.getElementById("itemtitle");
  var itembody = document.getElementById("itembody");
  var itemclick = document.getElementById("itemclick");
  var itemimg = document.getElementById("itemimg");
  var itemdesc = document.getElementById("itemdesc");
​
  itemimg.style.display = "none";
  itemtitle.style.display = "none";
  itembody.style.display = "none";
  itemclick.style.display = "none";
  itemdisplay.style.display = "none";
  itemdesc.style.display = "none";
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bulsatarpro
0viewers