Pure CSS Circle Menu with CSS3 Transitions & Transforms

Preview:

Description:

A pure CSS solution made by VincentCostentin to popup a circle (radial menu) around the toggle button, based upon CSS3 transitions and transforms.

Basic Usage:

Create a menu with a hamburg toggle button as follows.

<input type="checkbox" id="menu_opener_id" class="menu_opener">
  <label for="menu_opener_id" class="menu_opener_label"></label>
  <div class="barre_hamburger"></div>
  <a href="#" class="link_one link_general"></a>
  <a href="#" class="link_two link_general"></a>
  <a href="#" class="link_three link_general"></a>
  <a href="#" class="link_four link_general"></a>
</input>

The core CSS/CSS3 styles

.menu_opener {
  display: none;
}
.menu_opener:checked ~ .link_one {
  top: 65px;
}
.menu_opener:checked ~ .link_two {
  left: 385px;
}
.menu_opener:checked ~ .link_three {
  top: 385px;
}
.menu_opener:checked ~ .link_four {
  left: 65px;
}
.menu_opener:checked ~ .barre_hamburger {
  opacity: 0;
}
.menu_opener:checked ~ .menu_opener_label:after {
  transform: rotate(45deg);
  top: 70px;
}
.menu_opener:checked ~ .menu_opener_label:before {
  transform: rotate(-45deg);
  top: 70px;
}
.menu_opener_label {
  background: #f1c40f;
  width: 150px;
  height: 150px;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  top: 200px;
  left: 200px;
  z-index: 10;
}
.menu_opener_label:after {
  position: absolute;
  top: 50px;
  left: 50px;
  background: #000;
  content: "";
  width: 50px;
  height: 10px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.menu_opener_label:before {
  position: absolute;
  top: 90px;
  left: 50px;
  background: #000;
  content: "";
  width: 50px;
  height: 10px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.barre_hamburger {
  width: 50px;
  height: 10px;
  position: absolute;
  top: 270px;
  left: 250px;
  background: #000;
  z-index: 20;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

The sample  CSS to style the sub menus.

.link_general {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 225px;
  left: 225px;
  background: #ecf0f1;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.link_one {
  ...
}
.link_two {
  ...
}
.link_three {
  ...
}
.link_four {
  ...
}