Material-style Floating Button & Panel Plugin For jQuery - st-action-panel

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.