CodePen Embed - Pure CSS Menu

<body>
  <div class="container">
    <input type="checkbox" id="myinput">
    <label for="myinput">+</label>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="bomb"></div>
  </div>
</body>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

body {
  overflow: hidden;
  height: 100vh;
  width: 100%;
}

.container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #333344;
}

.container > * {
  position: absolute;
  top: 50%;
  left: 50%;
}

input {
  visibility: hidden;
}

label {
  display: block;
  z-index: 2;
  height: 100px;
  width: 100px;
  margin: -50px 0 0 -50px;
  cursor: pointer;
  background-color: #1111ff;
  font-size: 90px;
  font-weight: bold;
  color: white;
  text-align: center;
  border-radius: 50%;
  -webkit-transition: transform 0.8s ease 0.8s;
  -moz-transition: transform 0.8s ease 0.8s;
  -o-transition: transform 0.8s ease 0.8s;
  transition: transform 0.8s ease 0.8s;
}

label:active {
  background-color: #0000aa;
  font-size: 85px;
}

.circle1,
.circle2 {
  float: left;
  z-index: 1;
  height: 200px;
  width: 200px;
  opacity: 0;
  border-radius: 50%;
}

.circle1 {
  margin: -100px 0 0 -300px;
  border: 2px solid #333344;
}

.circle2 {
  margin: -100px 0 0 -100px;
  border: 2px solid #1111ff;
}

ul {
  z-index: 1;
  height: 100px;
  width: 340px;
  margin: 500px 0 0 -60px;
  list-style-type: none;
}

li {
  float: left;
  height: 100px;
  width: 100px;
  margin-left: 10px;
  cursor: pointer;
  opacity: 0;
  border-radius: 50%;
  -webkit-transition: transform 1s ease, opacity 2s 2s;
  -moz-transition: transform 1s ease, opacity 2s 2s;
  -o-transition: transform 1s ease, opacity 2s 2s;
  transition: transform 1s ease, opacity 2s 2s;
}

li:hover {
  box-shadow: 0 0 1px 1px white;
}

li:nth-child(1) {
  background-size: 100% 100%;
  -webkit-transition-delay: 0.8s;
  -moz-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
  background: url("https://images.pexels.com/photos/1214259/pexels-photo-1214259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center;
  background-size:cover;
}

li:nth-child(2) {
  background-size: 100% 100%;
  -webkit-transition-delay: 0.9s;
  -moz-transition-delay: 0.9s;
  -o-transition-delay: 0.9s;
  transition-delay: 0.9s;
  background: url("https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center;
  background-size:cover;
}

li:nth-child(3) {
  background-size: 100% 100%;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  background: url("https://images.pexels.com/photos/863963/pexels-photo-863963.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500") no-repeat center;
  background-size:cover;
}

.bomb {
  z-index: 0;
  height: 100px;
  width: 100px;
  margin: -50px 0 0 -50px;
  background-color: #1111ff;
  border-radius: 50%;
  -webkit-transition: transform 0.8s ease 0.8s;
  -moz-transition: transform 0.8s ease 0.8s;
  -o-transition: transform 0.8s ease 0.8s;
  transition: transform 0.8s ease 0.8s;
}

input:checked + label {
  transform: translateX(-200px) rotate(-405deg);
}

input ~ .circle1 {
  -webkit-animation: myan1 1s;
  -moz-animation: myan1 1s;
  -o-animation: myan1 1s;
  animation: myan1 1s;
}

input:checked ~ .circle1 {
  -webkit-animation: myan2 1s;
  -moz-animation: myan2 1s;
  -o-animation: myan2 1s;
  animation: myan2 1s;
}

input:checked ~ .circle2 {
  -webkit-animation: myan1 1s;
  -moz-animation: myan1 1s;
  -o-animation: myan1 1s;
  animation: myan1 1s;
}

input:checked ~ ul li {
  opacity: 1;
  transform: translateY(-550px);
}

input:checked ~ .bomb {
  transform: scale(50);
}


/*******************************************************************************************************************************/


/*******************************************************************************************************************************/

@media screen and (max-width: 550px) {
  .circle1 {
    margin: -300px 0 0 -100px;
  }
  ul {
    margin-left: -170px;
  }
  input:checked + label {
    transform: translateY(-200px) rotate(-405deg);
  }
}


/*******************************************************************************************************************************/


/*******************************************************************************************************************************/

@-webkit-keyframes myan1 {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

@-moz-keyframes myan1 {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

@-o-keyframes myan1 {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes myan1 {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

This Pen is owned by Ehsan Amiri on CodePen.

See more by @ehsanamiri9214 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.