Author: | nobitagit |
---|---|
Views Total: | 9,193 views |
Official Page: | Go to website |
Last Update: | November 11, 2016 |
License: | MIT |
Preview:

Description:
A Material Design inspired floating popup menu which comes with 4 animations and can be placed anywhere on the webpage.
The open/close action is performed by toggling an attribute on the menu main element.
Basic usage:
Place the Material floating button’s style sheet and JavaScript in the html page.
<link href="dist/mfb.css" rel="stylesheet"> <script src="dist/mfb.js"></script>
Or install it via NPM.
npm install mfb --save
Create the floating popup menu following the html markup as follows:
- mfb-component–br: position classes: mfb-component–tl, mfb-component–br, mfb-component–tr, mfb-component–bl
- mfb-zoomin: animations: mfb-zoomin, mfb-slidein, mfb-slidein-spring and mfb-fountain
- data-mfb-toggle=”hover”: toggle event. Change to click to open the menu by click instead.
<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>