blooming-menu

BloomingMenu

A configurable and animated radial menu. BloomingMenu is a port of AwesomeMenu for the web.

Preview

Install

You can install through npm and use browserify to make it run on the browser.

npm install --save blooming-menu

Or just download the minified version here.

Usage

Create a new BloomingMenu object:

var menu = new BloomingMenu({
  itemsNum: 8
})

Render it:

menu.render()

And now you can attach event listeners to the items of the menu, just like a regular DOM element.

menu.props.elements.items.forEach(function (item, index) {
  item.addEventListener('click', function () {
    console.log('Item #' + index + 'was clicked')
  })
})

API

constructor new BloomingMenu(opts)

Options object passed on instantiation time, e.g.:

var menu = new BloomingMenu({
  startAngle: 60,
  endAngle: 0
})

• opts.itemsNum
  • Type: Number
  • Required: true
• opts.startAngle
  • Type: Number
  • Default: 90
• opts.endAngle
  • Type: Number
  • Default: 0
• opts.radius
  • Type: Number
  • Default: 80
• opts.itemAnimationDelay
  • Type: Number
  • Default: 0.04
• opts.animationDuration
  • Type: Number
  • Default: 0.4
• opts.fatherElement
  • Type: HTMLElement
  • Default: document.body
• opts.itemWidth
  • Type: Number
  • Default: 50
• opts.CSSClassPrefix
  • Type: String
  • Default: 'blooming-menu__'
• opts.mainContent
  • Type: String
  • Default: '+'
• opts.injectBaseCSS
  • Type: Boolean
  • Default: true

Every method below is an instance method.

obj.render

Attachs the instance to the DOM and binds all event listeners.

obj.remove

Removes all DOM elements and event listeners.

obj.open

Opens the menu programmatically.

obj.close

Closes the menu programmatically.

obj.selectItem(num)

Select programatically the num item of the menu.

Support

Latest ✔	Latest ✔	9+ ✔	Latest ✔	8.0+ ✔

Credits

• Project icon by Chamaquito Pan de Dulce
• Menu items by Google Material Design
• Base16 Ocean color scheme
• This lib is a port in JavaScript of the Objective-C lib AwesomeMenu