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">
        <i class="fa fa-facebook-square"></i> Facebook
        <i class="fa fa-twitter-square"></i> Twitter
        <i class="fa fa-google-plus-square"></i> Google+
        <i class="fa fa-instagram"></i> Instagram

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;
} {
  background: white;
  border: 1px solid #ccc;
  width: 165px;
  height: 138px;
  border-radius: 2px;
} .menu__button {
  color: #999;
  transform: rotate(45deg);
} .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__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 = () => {
button.addEventListener("click", function() {
let interactionPreview = setInterval(() => {
}, 2000)

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

See Demo And Download

Official Website(chriscoyier): Click Here

This superior jQuery/javascript plugin is developed by chriscoyier. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…