Menú radial animado estilo de ruta-BloomingMenu. js

Vista prévia

Descripción

BloomingMenu. js es una biblioteca JavaScript independiente destinada a crear un menú radial animado CSS3 como se ve en Path.com.

Funcionamiento

Coloque el Blooming-menu. min. js en cualquier lugar de su página web.

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

Cree una nueva instancia y represente un menú radial en el contenedor de destino (cuerpo del documento de forma predeterminada).

var bloomingMenu = new BloomingMenu({


// OPTIONS HERE


})
bloomingMenu.render()

Añada elementos de menú al menú radial.

.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;
}

Opciones posibles.

{

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
}

Métodos.

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

Registro de cambios

v1.1.1 (07/19/2018)

• actualizar