Material-style JQuery plugin for a floating action button & menu panel
A small JQuery plugin for a floating action button which displays a small menu panel. Features options for open duration, close duration, and rotate. st-action-panel is a lightweight jQuery plugin used to create a Material Design inspired sticky action button that slides out a floating panel when clicked. It can be used to show/hide any element.
Libraries
Include following libraries on page.
<link rel="stylesheet" type="text/css" href="css/st.action-panel.css" /> <script src="js/st.action-panel.js"></script> |
HTML
Create the action button and floating panel by adding following html.
div class="st-actionContainer right-bottom"> <div class="st-panel"> <div class="st-panel-header"><i class="fa fa-bars" aria-hidden="true"></i> Menu</div> <div class="st-panel-contents"> Put some contents here! </div> </div> <div class="st-btn-container right-bottom"> <div class="st-button-main"><i class="fa fa-bars" aria-hidden="true"></i></div> </div> </div> |
JS
Call plugin
$('st-actionContainer').launchBtn( { openDuration: 500, closeDuration: 300 } ); |
See live demo and download source code.
DEMO | DOWNLOAD
This awesome plugin is developed by dlenhart. Visit their official github repository for more information and follow for future updates.