Material inspirado flotante menú emergente

Vista prévia

Descripción

A material Design inspirado menú emergente flotante que viene con 4 animaciones y se puede colocar en cualquier lugar de la Página Web.

La acción abrir/cerrar se realiza mediante la alternancia de un atributo en el elemento principal del menú.

¿Cómo funciona?

Coloque la hoja de estilos del botón flotante material y JavaScript en la página HTML.

<link href="dist/mfb.css" rel="stylesheet">
<script src="dist/mfb.js"></script>

O instalarlo a través de NPM.

npm install mfb --save

Cree el menú emergente flotante siguiendo el marcado HTML de la siguiente manera:

• MFB-componente – br: clases de posición: MFB-componente – TL, MFB-Component – br, MFB-componente – TR, MFB-Component – BL
• MFB-Zoomin: animaciones: MFB-Zoomin, MFB-SlideIn, MFB-SlideIn-Spring y MFB-Fountain
• Data-MFB-Toggle = "hover": evento de alternancia. Cambie para abrir el menú haciendo clic en su lugar.

<ul id="menu" class="mfb-component--br mfb-zoomin" data-mfb-toggle="hover">

<li class="mfb-component__wrap">


<a href="#" class="mfb-component__button--main">



<i class="mfb-component__main-icon--resting ion-plus-round"></i>



<i class="mfb-component__main-icon--active ion-close-round"></i>


</a>


<ul class="mfb-component__list">



<li>




<a href="#" data-mfb-label="Child Button 1" class="mfb-component__button--child">





<i class="mfb-component__child-icon ion-social-github"></i>




</a>



</li>



<li>




<a href="#" data-mfb-label="Child Button 2" class="mfb-component__button--child">





<i class="mfb-component__child-icon ion-social-octocat"></i>




</a>



</li>




<li>




<a href="#"





 data-mfb-label="Child Button 3" class="mfb-component__button--child">





<i class="mfb-component__child-icon ion-social-twitter"></i>




</a>



</li>


</ul>

</li>
</ul>