Radial Popup Menu With JavaScript And CSS3 – circleMenu

Category: Javascript , Menu & Navigation , Recommended | July 12, 2016
Author: callmenick
Views Total: 5,187
Official Page: Go to website
Last Update: July 12, 2016
License: MIT

Preview:

Radial Popup Menu With JavaScript And CSS3 –  circleMenu

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);

You Might Be Interested In:


Leave a Reply