Expanding Menu Panel With CSS Animations

A creative menu system that expands and collapses menu items with smooth CSS3 powered transitions.

Ideal for settings panel, site/app navigation, floating social sharing button, and much more.

How to use it:

1. Code the HTML for the menu panel.

<div class="navigation">
  <span style="--i:0;--x:-1;--y:0;">
    Item Icon Here
  </span>
  <span style="--i:1;--x:1;--y:0;">
    Item Icon Here
  </span>
  <span style="--i:2;--x:0;--y:-1;">
    Item Icon Here
  </span>
  <span style="--i:3;--x:0;--y:1;">
    Item Icon Here
  </span>
  <span style="--i:4;--x:1;--y:1;">
    Item Icon Here
  </span>
  <span style="--i:5;--x:-1;--y:-1;">
    Item Icon Here
  </span>
  <span style="--i:6;--x:0;--y:0;">
    Item Icon Here
  </span>
  <span style="--i:7;--x:-1;--y:1;">
    Item Icon Here
  </span>
  <span style="--i:8;--x:1;--y:-1;">
    Item Icon Here
  </span>
</div>

2. The required CSS/CSS3 styles.

.navigation {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #212532;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.5s;
  transition-delay: 0.8s;
}
.navigation.active {
  width: 200px;
  height: 200px;
  transition-delay: 0s;
}
.navigation span {
  position: absolute;
  width: 7px;
  height: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(calc(12px * var(--x)), calc(12px * var(--y)));
  transition: transform 0.5s, width 0.5s, height 0.5s, background 0.5s;
  transition-delay: calc(0.1s * var(--i));
}
.navigation.active span {
  width: 45px;
  height: 45px;
  background: #333849;
  transform: translate(calc(60px * var(--x)), calc(60px * var(--y)));
}

3. Use JavaScript to toggle CSS classes based on the expand/collapse states.

let navigation = document.querySelector('.navigation');
navigation.onclick = function () {
  navigation.classList.toggle('active')
}