Material-style JQuery plugin for a floating action button & menu panel

jquery-floating-button

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.
jquery-floating-button

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">
	
="st-panel">

="st-panel-header">="fa fa-bars" aria-hidden="true">> Menu

>

="st-panel-contents"> Put some contents here!

>
>
="st-btn-container right-bottom">

="st-button-main">="fa fa-bars" aria-hidden="true">>

>
> >

See live demo and download source code.

Leave a Reply

Your email address will not be published. Required fields are marked *

Top