Author: | caiogondim |
---|---|
Views Total: | 4,183 views |
Official Page: | Go to website |
Last Update: | July 19, 2018 |
License: | MIT |
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