km simple shuffle

by mrjordy

HTML

<div class="ShuffleContainer REL">
  <div class="tempbackground"></div>
  <div id="shuffleKM" class="REL KMTab">
    <div class="ShuffleHandle ABS ROTATESTART KMhandle KmHover" id="kmHandle">Knowledge Management</div>
    <div class="Pane kmPane HIDE"><div class="PaneText">Knowledge Management</div></div>
  </div>
  <div id="shufflePPL" class="REL PeopleTab">
    <div class="ShuffleHandle ABS ROTATESTART PeopleHandle PplHover" id="pplHandle">People</div>
    <div class="Pane pplPane HIDE">
    <div class="PaneText">text here text here text here</div>
    </div>
  </div>
  <div id="shuffleProc" class="REL ProcessesTab">
    <div class="ShuffleHandle ABS ROTATESTART ProcessesHandle ProcHover" id="procHandle">Processes</div>
    <div class="Pane procPane HIDE">text here text here text here</div>
  </div>
  <div id="shuffleTech" class="REL TechnologyTab">
    <div class="ShuffleHandle ABS ROTATESTART TechnologyHandle TechHover" id="techHandle">Technology</div>
    <div class="Pane techPane HIDE">text here text here text here</div>
  </div>
</div>
  <div class="close">
    <div class="leftX">_</div>
    <div class="rightX">_</div>
  </div>

CSS

/*---------- tools ----------*/

.ABS {
  position: absolute;
}

.REL {
  position: relative;
}

.ROTATESTART {
  transform: rotate(-65deg);
}

.ROTATE90 {
  transform: rotate(-90deg);
}

.SHOW {
  display: block;
}

.HIDE {
  display: none;
}


/*---------- CSS ----------*/


/*---------- Transition States ----------*/

.HandlesOutStart {
  left:0;
}
.HandlesOutStepOpacity {
  opacity: .1;
}
#kmHandle.HandlesOutLeft {
  left: -300px;
}
#pplHandle.HandlesOutLeft {
  left: -350px;
  transition-delay: .1s;
}

#procHandle.HandlesOutLeft {
  left: -400px;
  transition-delay: .2s;
}

#techHandle.HandlesOutLeft {
  left: -450px;
  transition-delay: .3s;
}


/*---------- GUI Static ----------*/

.ShuffleContainer {
  position: relative;
  overflow: hidden;
  height: 284px;
  width: 900px;
}

.tempbackground {
  background: url('https://navy.deps.mil/peoeis/sites/nen/res/ENG_Banner_OceanSky.png');
  background-repeat: no-repeat;
  position: absolute;
  height: 279px;
  width: 900px;
  margin-top: 3px;
}

.ShuffleHandle {
  width: 340px;
  height: 40px;
  text-align: center;
  margin-top: 124px;
  margin-left: -7px;
  line-height: 40px;
  color: white;
  font-family: kalinga;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, .3);
  box-shadow: inset 1px -5px 0px rgba(0, 0, 0, 0.1);
  transition: .15s ease-in;
  cursor: pointer;
}

.ShuffleHandle:before {
  content: '';
  display: block;
  position: absolute;
  margin-top: -6px;
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  transform: rotate(180deg);
}

.ShuffleHandle:after {
  content: '';
  display: block;
  position: absolute;
  margin-top: 0px;
  margin-left: 335px;
  width: 0;
  height: 0;
  border-top: 6px solid #333;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  transform: rotate(0deg);
}

.KMhandle {
  background: #F44336;
}

.KMhandle:before,
.KMhandle:after {
  border-top:...

JavaScript

/*---------- GUI Animate Hover ----------*/
$('.KmHover').hover(function() {
  $('#pplHandle, #procHandle, #techHandle').toggleClass('nudgeRight');
});
$('.PplHover').hover(function() {
  $('#kmHandle').toggleClass('nudgeLeft');
  $('#procHandle, #techHandle').toggleClass('nudgeRight');
});
$('.ProcHover').hover(function() {
  $('#kmHandle, #pplHandle').toggleClass('nudgeLeft');
  $('#techHandle').toggleClass('nudgeRight');
});
$('.TechHover').hover(function() {
  $('#kmHandle, #pplHandle, #procHandle').toggleClass('nudgeLeft');
});
/*---------- GUI click ----------*/
$('#kmHandle, #pplHandle, #procHandle, #techHandle').click(function() {
  $('#kmHandle, #pplHandle, #procHandle, #techHandle').addClass("HandlesOutStart ROTATE90").delay(200).queue(function() {
    $(this).addClass("HandlesOutLeft");
    $(this).dequeue();
  });
});
/*---------- GUI close ----------*/
$('.close').click(function() {
  $('#techHandle').removeClass("ROTATE90").delay(1000).queue(function() {
    $(this).removeClass("HandlesOutLeft");
    $(this).dequeue();
  });
});
$('.close').click(function() {
  $('#procHandle').removeClass("ROTATE90").delay(1100).queue(function() {
    $(this).removeClass("HandlesOutLeft");
    $(this).dequeue();
  });
});
$('.close').click(function() {
  $('#pplHandle').removeClass("ROTATE90").delay(1200).queue(function() {
    $(this).removeClass("HandlesOutLeft");
    $(this).dequeue();
  });
});
$('.close').click(function() {
  $('#kmHandle').removeClass("ROTATE90").delay(1300).queue(function() {
    $(this).removeClass("HandlesOutLeft");
    $(this).dequeue();
  });
});