Morphing Popup Menu Toggle with JavaScript And CSS3

Menu Toggle Thing is a toggle menu built with JavaScript and CSS3 that turns a toggle button into a popup when clicked. Based on transformations and transitions in CSS3.

pop up animation examples, morphing modal window, modal popup example, css modal popup animation, morph button codepen, animated modal popup using jquery

How to make use of it:

1. Create HTML for the popup.

<div class="menu">
  
  <div class="menu__button">+</div>
  <div class="menu__content">
    <h4 class="menu__title">Social Share</h4>
    <ul class="menu__content__list">
      <li>
        <i class="fa fa-facebook-square"></i> Facebook
      </li>
      <li>
        <i class="fa fa-twitter-square"></i> Twitter
      </li>
      <li>
        <i class="fa fa-google-plus-square"></i> Google+
      </li>
      <li>
        <i class="fa fa-instagram"></i> Instagram
      </li>
    </ul>
    ...
  </div>
</div>

2. Add the following CSS/CSS3 snippets to your page.

.menu {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 17px 15px;
  width: 50px;
  height: 50px;
  font-size: 13px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  white-space: nowrap;
  color: #464448;
  overflow: hidden;
  background: #366CC8;
  border-radius: 50%;
  box-shadow: 0 3px 10px -2px rgba(0, 0, 0, 0.25);
  transition: 0.2s;
}
.menu.open {
  background: white;
  border: 1px solid #ccc;
  width: 165px;
  height: 138px;
  border-radius: 2px;
}
.menu.open .menu__button {
  color: #999;
  transform: rotate(45deg);
}
.menu.open .menu__content {
  opacity: 1;
  visibility: visible;
}
.menu__button {
  font-weight: 400;
  border: 0;
  background: none;
  color: white;
  position: absolute;
  top: 18px;
  right: 15px;
  font-size: 34px;
  padding: 0;
  width: 20px;
  height: 20px;
  line-height: 12px;
  transition: 0.2s;
  user-select: none;
}
.menu__title {
  font-size: 12px;
  margin: 0 0 13px 0;
}
.menu__content {
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}
.menu__content__list { list-style: none; }
.menu__content__list li {
  margin: 0 0 3px 0;
  transform: translateX(20px);
  transition: 0.2s;
}
.menu__content__list li:nth-child(1) { transition-delay: 0.08s; }
.menu__content__list li:nth-child(1) svg { fill: #42A5F5; }
.menu__content__list li:nth-child(2) { transition-delay: 0.12s; }
.menu__content__list li:nth-child(2) svg { fill: #66BB6A; }
.menu__content__list li:nth-child(3) { transition-delay: 0.16s; }
.menu__content__list li:nth-child(3) svg { fill: #FF8F00; }
.menu.open .menu__content__list li { transform: translateX(0); }
.menu__content__list svg {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

3. The main javascript to enable conversion popup menu.

let menu = document.querySelector(".menu");
let button = document.querySelector(".menu__button");
toggleMenu = () => {
  menu.classList.toggle("open");
}
button.addEventListener("click", function() {
  clearInterval(interactionPreview);
  toggleMenu();
});
let interactionPreview = setInterval(() => {
  toggleMenu();
}, 2000)

morphing popup menu, menu toggle thing Plugin/Codepen, pure css popup, popup animation css