Animated submenu in CSS

Inspired by https://codepen.io/dok/full/LJpegR

by Julien Roche

HTML

<div class="circle">
  <div class="circle circle--blue circle--no-transform"></div>
  <div class="circle circle--green circle--no-transform"></div>
  <div class="circle circle--yellow circle--no-transform"></div>
</div>

CSS

html,
body {
  background-color: white;
  border: none;
  height: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}

.circle {
  background-color: red;
  border: none;
  border-radius: 3rem;
  cursor: pointer;
  height: 3rem;
  width: 3rem;
  transition: all 1s;
  z-index: 20;
}

.circle--no-transform {
  transform: translate(0px, 0px) !important;
}

.circle--blue {
  background-color: blue;
  position: absolute;
  transform: translate(-3rem, -3rem);
  z-index: 15;
}

.circle--green {
  background-color: green;
  position: absolute;
  transform: translate(0rem, -6rem);
  z-index: 15;
}

.circle--yellow {
  background-color: yellow;
  position: absolute;
  transform: translate(3rem, -3rem);
  z-index: 15;
}

Babel + JSX

const cirleRedElement = document.querySelector('.circle');
const cirleBlueElement = document.querySelector('.circle--blue');
const cirleGreenElement = document.querySelector('.circle--green');
const cirleYellowElement = document.querySelector('.circle--yellow');
const circles = [cirleBlueElement, cirleGreenElement, cirleYellowElement];


cirleRedElement.addEventListener('mouseenter', (event) => {
	circles.forEach((circle) => circle.classList.remove('circle--no-transform'));
});

cirleRedElement.addEventListener('mouseleave', (event) => {
	circles.forEach((circle) => circle.classList.add('circle--no-transform'));
});