material floating menu action buttons - Free Download Material Floating Menu With Action Buttons - jQuery FAB Button

Free Download Material Floating Menu With Action Buttons – jQuery FAB Button

Posted on

This time I will share jQuery Plugin and tutorial about Material Floating Menu With Action Buttons – jQuery FAB Button, hope it will help you in programming stack.

material floating menu action buttons - Free Download Material Floating Menu With Action Buttons - jQuery FAB Button
File Size: 8.14 KB
Views Total: 6288
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery based floating action button plugin which expands a floating button to a horizontal menu bar when toggled.

Inspired by Material Design. Smooth animations based on the velocity.js.

How to use it:

1. Load the Material Icons for the menu icons.

1 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Load jQuery JavaScript library and the jQuery FAB Button plugin’s files in the page.

1 <link href="css/jquery-fab-button.css" rel="stylesheet">
2 <script src="/path/to/cdn/jquery.min.js"></script>
3 <script src="js/jquery-fab-button.js"></script>

3. Create the HTML for the floating action buttons.

01 <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
02   <a class="btn-floating btn-large red">
03     <i class="large material-icons">mode_edit</i>
04   </a>
05   <ul>
06     <li>
07       <a class="btn-floating bg-indigo">
08         <i class="material-icons">insert_chart</i>
09       </a>
10     </li>
11     <li>
12       <a class="btn-floating bg-indigo">
13         <i class="material-icons">format_quote</i>
14       </a>
15     </li>
16     <li>
17       <a class="btn-floating bg-indigo">
18         <i class="material-icons">publish</i>
19       </a>
20     </li>
21     <li>
22       <a class="btn-floating bg-indigo">
23         <i class="material-icons">attach_file</i>
24       </a>
25     </li>
26   </ul>
27 </div>

Changelog:

2020-11-21

  • Updated JS and CSS