Rotating Circle Hamburger Menu With jQuery And CSS3

Just another fancy circle (radial) menu that arranges the menu items around the hamburger button when toggled. Built with jQuery and CSS3 transforms & transitions.

How to use it:

1. The required HTML structure for the circle menu.

<div class="menu">
  <div class="btn trigger">
    <span class="line"></span>
  </div>
  <div class="icons">
    <div class="rotater">
      <div class="btn btn-icon">
        Menu Item 1
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        Menu Item 2
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        Menu Item 3
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        Menu Item 4
      </div>
    </div>
    <div class="rotater">
      <div class="btn btn-icon">
        Menu Item 5
      </div>
    </div>
    <!-- More Items Here -->
  </div>
</div>

2. The necessary CSS/CSS3 styles.

.menu {
  width: 5em;
  height: 5em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.menu .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  opacity: 0;
  z-index: -10;
  cursor: pointer;
  transition: opacity 1s, z-index 0.3s, transform 1s;
  transform: translateX(0);
}

.menu .trigger {
  opacity: 1;
  z-index: 100;
  cursor: pointer;
  transition: transform 0.3s;
}

.menu .trigger:hover {
  transform: scale(1.2);
}

.menu .line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 60%;
  height: 6px;
  background: #fff;
  border-radius: 6px;
  transition: background-color 0.3s, height 0.3s, top 0.3s;
}

.menu .line:before,
.menu .line:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background: #fff;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.3s;
}

.menu .line:before {
  top: -12px;
  transform-origin: 15% 100%;
}

.menu .line:after {
  top: 12px;
  transform-origin: 25% 30%;
}

.icons .fab {
  font-size: 3em;
  color: #fff;
  transition: color 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.btn:hover .fab {
  color: #000;
}

.menu .rotater {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}

.menu.active .btn-icon {
  opacity: 1;
  z-index: 50;
}

.menu.active .trigger .line {
  height: 0px;
  top: 45%;
}

.menu.active .trigger .line:before {
  transform: rotate(45deg);
  width: 110%;
}

.menu.active .trigger .line:after {
  transform: rotate(-45deg);
  width: 110%;
}

.rotater:nth-child(1) {
  transform: rotate(-22.5deg);
}

.menu.active .rotater:nth-child(1) .btn-icon {
  transform: translateY(-10em) rotate(22.5deg);
}

.rotater:nth-child(2) {
  transform: rotate(22.5deg);
}

.menu.active .rotater:nth-child(2) .btn-icon {
  transform: translateY(-10em) rotate(-22.5deg);
}

.rotater:nth-child(3) {
  transform: rotate(67.5deg);
}

.menu.active .rotater:nth-child(3) .btn-icon {
  transform: translateY(-10em) rotate(-67.5deg);
}

.rotater:nth-child(4) {
  transform: rotate(112.5deg);
}

.menu.active .rotater:nth-child(4) .btn-icon {
  transform: translateY(-10em) rotate(-112.5deg);
}

.rotater:nth-child(5) {
  transform: rotate(157.5deg);
}

.menu.active .rotater:nth-child(5) .btn-icon {
  transform: translateY(-10em) rotate(-157.5deg);
}

.rotater:nth-child(6) {
  transform: rotate(202.5deg);
}

.menu.active .rotater:nth-child(6) .btn-icon {
  transform: translateY(-10em) rotate(-202.5deg);
}

.rotater:nth-child(7) {
  transform: rotate(247.5deg);
}

.menu.active .rotater:nth-child(7) .btn-icon {
  transform: translateY(-10em) rotate(-247.5deg);
}

.rotater:nth-child(8) {
  transform: rotate(292.5deg);
}

.menu.active .rotater:nth-child(8) .btn-icon {
  transform: translateY(-10em) rotate(-292.5deg);
}

3. Enable the hamburger button to toggle the circle menu. Place the following JS snippets after jQuery library and done.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

$(document).ready(function () {
  $(".trigger").click(function () {
    $(".menu").toggleClass("active");
  });
});

---

This awesome jQuery plugin is developed by coding-circulate. For more Advanced Usages, please check the demo page or visit the official website.