SOURCE

(function () {
  function Suspend (direction, distance) {
    this.distance = distance || 20
    this.direction = direction || 'right'
    this.btn = document.querySelector('.suspend-btn')
    this.item = document.querySelectorAll('.suspend-item')
    this.activeClass = ' suspend-btn-open'
    this.btnWidth = this.btn.offsetWidth

    this.btn.addEventListener('click', () => {
      if (this.contains(this.btn.className, this.activeClass)) {
        this.btn.className = this.btn.className.replace(this.activeClass, '')
        this.suspendClose()
      } else {
        this.btn.className += this.activeClass
        this.suspendOpen()
      }
    })

    Suspend.prototype.contains = function (str1, str2) {
      if (str1.indexOf(str2) !== -1) {
        return true
      }
      return false
    }

    Suspend.prototype.getSpace = function (i) {
      let sapce
      switch (this.direction) {
        case 'top':
          space = { x: 0, y: (-this.btnWidth - this.distance) * i }
          break
        case 'right':
          space = { x: (this.btnWidth + this.distance) * i, y: 0 }
          break
        case 'bottom':
          space = { x: 0, y: (this.btnWidth + this.distance) * i }
          break
        case 'left':
          space = { x: (-this.btnWidth - this.distance) * i, y: 0 }
          break                              
      }
      return space
    }

    Suspend.prototype.suspendOpen = function () {
      for (let i = 0; i < this.item.length; i++) {
        let space = this.getSpace(i + 1)
        this.setTransform(this.item[i], `translate(${space.x}px, ${space.y}px)`)
      }
    }

    Suspend.prototype.suspendClose = function () {
      for (let i = 0; i < this.item.length; i++) {
        let space = (distance + this.btnWidth) * (i + 1)
        this.deleteTransform(this.item[i])
      }
    }    

    Suspend.prototype.setTransform = function (element, animation) {
      element.style.webkitTransform = animation;
      element.style.mozTransform = animation;
      element.style.oTransform = animation;
      element.style.msTransform = animation;
      element.style.transform = animation;      
    }

    Suspend.prototype.deleteTransform = function (element, animation) {
      element.style.webkitTransform = '';
      element.style.mozTransform = '';
      element.style.oTransform = '';
      element.style.msTransform = '';
      element.style.transform = '';      
    }
  }
  window.Suspend = Suspend
} ())
new Suspend()

<div class="suspend">
	<span class="suspend-btn">
  	<span></span>
    <span></span>
    <span></span>
  </span>
  <span class="suspend-item">a</span>
  <span class="suspend-item">b</span>
  <span class="suspend-item">c</span>
</div>

.suspend {
  position: relative;
}
.suspend-btn,
.suspend-item {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: rgba(49, 183, 148, 1);
  border-radius: 100%;
  text-align: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}
.suspend-btn {
  z-index: 999;
}
.suspend-btn span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 3px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 99;
}
.suspend-btn span:nth-child(1) {
  margin-top: -8px;
}
.suspend-btn span:nth-child(3) {
  margin-top: 8px;
}

.suspend-btn span,
.suspend-item {
  transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.suspend-btn-open span:nth-child(1) {
  margin: 0;
  transform: translate(-50%, 0) rotate(45deg);
}
.suspend-btn-open span:nth-child(2) {
  transform: translate(-50%, 0) scale(0);
}
.suspend-btn-open span:nth-child(3) {
  margin: 0;
  transform: translate(-50%, 0) rotate(-45deg);
}