mobile menu draggable

by mrjordy

HTML

<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="mobileMenuContainer" id="draggable">
  <div class="mobileMenu">
    <div class="mobileMenuNucleus">
      <div class="mobileMenuXandIII">
        <div class="firstI styleI">I</div>
        <div class="secondI styleI">I</div>
        <div class="thirdI styleI">I</div>
      </div>
    </div>
    <div class="mobileMenuCell" id="stopLoadAnimation">
      <a href="#"><div class="MobileMenuItem MobileHome"><i class="fa fa-home" aria-hidden="true"></i></div></a>
      <a href="#"><div class="MobileMenuItem MobileContact"><i class="fa fa-comments" aria-hidden="true"></i></div></a>
      <a href="#"><div class="MobileMenuItem MobileAbout"><i class="fa fa-info-circle" aria-hidden="true"></i></div></a>
      <a href="#"><div class="MobileMenuItem MobilePortfolio"><i class="fa fa-folder-open" aria-hidden="true"></i></div></a>
      <div class="Separator TLSeparator"></div>
      <div class="Separator TRSeparator"></div>
      <div class="Separator BRSeparator"></div>
      <div class="Separator BLSeparator"></div>
    </div>
  </div>
</div>

CSS

.mobileMenuContainer {
  position: absolute;
  margin-left: calc(100% - 340px);
  margin-top: 120px;
/*}

@media screen and (max-width: 640px) {
  .mobileMenuContainer {*/
    transform: scale(3) !important;
  }
/*}*/

.mobileMenu {
   width: 0;
   height: 0;
}

.mobileMenuNucleus {
  background: radial-gradient(#ff67a5 70%, #ff277f 100%);
  border-radius: 40px;
  height: 40px;
  width: 40px;
  position: relative;
  cursor: pointer;
  z-index: 15;
}

.mobileMenuNucleus:hover {
  background: radial-gradient(#ff5198 70%, #ff277f 100%);
}

.mobileMenuNucleus:active {
  background: radial-gradient(#fa5e9e 47%, #857676 100%);
  box-shadow: inset 5px 5px 13px rgb(255, 0, 212);
}

.styleI {
  color: white;
  font-size: 30px;
  font-family: kalinga;
  text-shadow: 1px 0px 1px rgba(255, 0, 104, 0.5);
}

.firstI,
.secondI,
.thirdI {
  transform: rotate(90deg);
  position: absolute;
  transition: .3s;
}

.firstI {
  margin-top: -9px;
}

.secondI {
  margin-top: -3px;
  opacity: 1;
}

.thirdI {
  margin-top: 4px;
}

.mobileMenuXandIII {
  padding-top: 0px;
  padding-left: 13px;
}

.mobileCenterOpen > .mobileMenuXandIII > .firstI {
  margin-top: 0;
  margin-left: 1px;
  transform: rotate(45deg);
}


/*
  .mobileCenterOpen > .mobileMenuXandIII > .firstI {margin-top: -5px; margin-left: 5px; transform: rotate(225deg);}
  */

.mobileCenterOpen > .mobileMenuXandIII > .secondI {
  opacity: 0;
}

.mobileCenterOpen > .mobileMenuXandIII > .thirdI {
  margin-top: 0;
  margin-left: 6px;
  transform: rotate(-45deg);
}

.mobileMenuCell {
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 60px;
  border: 1px solid #ff277f;
  margin-left: 5px;
  margin-top: -34px;
  animation: CellShrink .3s;
  visibility: hidden;
  overflow: hidden
}

.mobileMenuCellOut {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ff277f;
  border-radius: 60px;
  margin-left: -32px;
  margin-top: -72px;
  animation: CellExpand .3s...

JavaScript

$('.mobileMenuNucleus').click(function() {
  $('.mobileMenuNucleus').toggleClass('mobileCenterOpen');
  $('.mobileMenuCell').toggleClass('mobileMenuCellOut');
});
window.setTimeout(function() {
  document.getElementById('stopLoadAnimation').style.visibility = 'visible';
}, 500);
$(function() {
  $("#draggable").draggable();
});