Material design inspired floating popup menu that comes with 4 animations and can be placed anywhere on the web page. The opening/closing action is performed by switching an attribute in the main menu item.
radial popup menu, floating draggable menu, floating action button web, floating menu button html, floating action button pure css, fab menu css, floating menu js
How to Add Floating Whatsapp Chat Button In HTML | venom-button
How to make use of it:
1. Place a floating material button style sheet and javascript on the HTML page.
<link href="dist/mfb.css" rel="stylesheet"> <script src="dist/mfb.js"></script>
2. Or install it via NPM.
npm install mfb --save
3. Create a floating popup after HTML markup.
<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>
Material Inspired Floating Popup Menu Plugin/Github, floating button website example
See Demo And Download
Official Website(nobitagit): Click Here
This superior jQuery/javascript plugin is developed by nobitagit. For extra Advanced Usages, please go to the official website.
Be First to Comment