Radial Popup Menu With JavaScript And CSS3 – circleMenu

Preview:

Description:

circleMenu is a simple, lightweight, dependency-free JavaScript library that helps you create a radial popup menu with a fullscreen overlay for your web applications.

Click on the navigation toggle icon you will see several menu items popup around the close icon. It uses CSS3 transforms and transitions for smooth menu animations.

How to use it:

Add the stylesheet circle-menu.css and JavaScript circle-menu.js into your html document.

<link href="css/circle-menu.css" rel="stylesheet">
<script src="js/src/circleMenu.js"></script>

The html structure for the radial navigation menu.

<nav class="c-circle-menu js-menu">
  <button class="c-circle-menu__toggle js-menu-toggle">
    <span>Toggle</span>
  </button>
  <ul class="c-circle-menu__items">
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/house.svg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/photo.svg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/pin.svg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/search.svg" alt="">
      </a>
    </li>
    <li class="c-circle-menu__item">
      <a href="#" class="c-circle-menu__link">
        <img src="img/tools.svg" alt="">
      </a>
    </li>
  </ul>
  <div class="c-circle-menu__mask js-menu-mask"></div>
</nav>

Initialize the circleMenu and we’re done.

var el = '.js-menu';
var myMenu = cssCircleMenu(el);