Material-style Floating Button & Panel Plugin For jQuery - st-action-panel
File Size: | 8.58 KB |
---|---|
Views Total: | 8143 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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 (e.g. feedback form, contact form, page navigation, etc) with a subtle sliding effect.
How to use it:
1. Load the Font Awesome 4 for the icons.
<link rel="stylesheet" href="font-awesome.min.css">
2. Load jQuery library and the jQuery st-action-panel plugin's JS/CSS files in the webpage.
<link rel="stylesheet" href="css/st.action-panel.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="js/st.action-panel.js"></script>
3. Create the action button and floating panel following the markup structure like this:
<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 menu or icon links here!<br /><br /> Or make a grid: </div> <div class="grid"> <a href="#" class="gridChild"><i class="fa fa-cubes" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-database" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-send" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-tag" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-trophy" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-user" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-file" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-table" aria-hidden="true"></i></a> <a href="#" class="gridChild"><i class="fa fa-eject" aria-hidden="true"></i></a> </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>
4. In this case, the action button & floating panel will be placed at the 'Bottom Right' of the webpage. You can place them at the 'Left Bottom' of the webpage by replacing the 'right-bottom' with 'left-bottom'.
<div class="st-actionContainer left-bottom">
5. Initialize the plugin by calling the function on the top container.
$('st-actionContainer').launchBtn();
6. Override the default open/close animation speeds.
$('st-actionContainer').launchBtn({ openDuration: 600, closeDuration: 200, });
7. Disable the rotation when you click on the action button.
$('st-actionContainer').launchBtn({ rotate: true });
Changelog:
2018-11-30
- JS improvement.
2018-11-29
- Fix icon not aligned issue on some pages
This awesome jQuery plugin is developed by dlenhart. For more Advanced Usages, please check the demo page or visit the official website.