Path-style Animated Radial Menu – BloomingMenu.js

Preview:

Description:

BloomingMenu.js is a standalone JavaScript library intended to create a CSS3 animated radial menu as you seen on Path.com.

How to use it:

Place the blooming-menu.min.js anywhere on your web page.

<script src="js/blooming-menu.min.js"></script>

Create a new instance and render a radial menu into the target container (document body by default).

var bloomingMenu = new BloomingMenu({
    // OPTIONS HERE
    })
bloomingMenu.render()

Add menu items to the radial menu.

.blooming-menu__item-btn {
  transition: box-shadow .28s cubic-bezier(.4, 0, .2, 1),  opacity .28s cubic-bezier(.4, 0, .2, 1);
  background-size: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.8;
}
.blooming-menu__item:nth-of-type(1) .blooming-menu__item-btn { background-image: url(img/language.svg); }
.blooming-menu__item:nth-of-type(2) .blooming-menu__item-btn { background-image: url(img/accessibility.svg); }
.blooming-menu__item:nth-of-type(3) .blooming-menu__item-btn { background-image: url(img/favorite.svg); }
.blooming-menu__item:nth-of-type(4) .blooming-menu__item-btn {
  background-image: url(img/find-in-page.svg);
  background-size: 40%;
}
.blooming-menu__item:nth-of-type(5) .blooming-menu__item-btn {
  background-image: url(img/get-app.svg);
  background-size: 35%;
}
.blooming-menu__item:nth-of-type(6) .blooming-menu__item-btn { background-image: url(img/grade.svg); }
.blooming-menu__item:nth-of-type(7) .blooming-menu__item-btn { background-image: url(img/home.svg); }
.blooming-menu__item:nth-of-type(8) .blooming-menu__item-btn {
  background-image: url(img/lock.svg);
  background-size: 35%;
}
.blooming-menu__item-btn:hover {
  box-shadow: 0 8px 17px 0 rgba(0,0,0,.2);
  opacity: 1;
}

Possible options.

{
  itemsNum: 5,
  startAngle: 90,
  endAngle: 0,
  radius: 80,
  itemAnimationDelay: 0.04,
  animationDuration: 0.4,
  fatherElement: document.body,
  itemWidth: 50,
  CSSClassPrefix: 'blooming-menu__',
  mainContent: '+',
  injectBaseCSS: true
}

Methods.

var bloomingMenu = new BloomingMenu({
    // OPTIONS HERE
})
// Attachs the instance to the DOM and binds all event listeners.
bloomingMenu.render()
// Removes all DOM elements and event listeners.
bloomingMenu.remove()
// Opens the menu programmatically.
bloomingMenu.open()
// Closes the menu programmatically.
bloomingMenu.close()
// Select programatically the num item of the menu.
bloomingMenu.num()

Changelog:

v1.1.1 (07/19/2018)

• Update