Live Chat Options Popup

index.html

<ul class="webchat">
  <li><a href="#">Email</a></li>
  <li><a href="#">Live Chat</a></li>
  <li><a href="#">Call Back</a></li>
  <li><a class="show" href="#">Chat Options</a></li>
</ul>

live-chat-options-popup.markdown

Live Chat Options Popup

A Pen by Welington Maposa on CodePen.

License.

script.js

jQuery(".show").click(function(e){
  e.preventDefault();
  let items = jQuery(this).parent().siblings();
  
  if (jQuery(this).parent().parent().hasClass("open")) {
    jQuery("ul.webchat").removeClass("open");
    
    for (let i = 0; i < items.length; i++) {
      jQuery(items[i]).css("transform", "translateY(0%)");
    }
  }
  else {
    jQuery("ul.webchat").addClass("open");
    for (let i = 0; i < items.length; i++) {
      let multiplier = items.length - i;
      let percentOffset = -100 * multiplier + '%';
      let marginOffset = 15 * multiplier + 'px';

      //console.log("translateY(calc(" + percentOffset + " - " + marginOffset + "))");

      jQuery(items[i]).css("transform", "translateY(calc(" + percentOffset + " - " + marginOffset + "))");
    }
}
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

ul.webchat {
  display: table;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: sans-serif;
}

ul.webchat > li:not(:last-child) {
  position: absolute;
  z-index: -1;
  opacity: 0;
  transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);  
}

ul.webchat.open > li:not(:last-child) {
  position: absolute;
  opacity: 1;
  z-index: -1;
}

ul.webchat li a {
  display: block;
  height: 48px;
  line-height: 48px;
  text-decoration: none; 
}

ul.webchat li a:before {
  content: "";
  display: block;
  float: left;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 15px;
  background: crimson;
}