🌸 AwesomeMenu made with CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
example
gif-preview
logo
src
.gitignore
LICENSE.md
README.md
gulpfile.js
package-lock.json 1.1.1 Apr 3, 2018
package.json

README.md

blooming-menu


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

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 9+ ✔ Latest ✔ 8.0+ ✔

Donating

If you found this library useful and are willing to donate, transfer some bitcoins to 1BqqKiZA8Tq43CdukdBEwCdDD42jxuX9UY or through the URL https://www.coinbase.com/caiogondim

Or via PayPal.me https://www.paypal.me/caiogondim.

Credits


caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim