🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. jQuery Plugins
  3. Material Floating Menu With Action Buttons - jQuery FAB Button

Material Floating Menu With Action Buttons - jQuery FAB Button

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

Floating-Action-Button
Download Tutorial

Documentation

jQuery FAB Button

A small module for jQuery and Javascript based in MaterializeCSS one day I was looking for some alternative to floating action buttons but with no result and the floating action buttons that I thought were either incomplete or not feasible I remembered that I used MaterializeCSS and I decided to adapt only the floating action button to be used separately from framework.

Resources

Future Updates

  • More animations.
  • Tooltips.
  • Modal generator.
  • Badges with animations for notifications that are received.
  • Color palette to be used directly in the FAB using data attributes.

Table of Resources

Getting Started

  1. Clone the repository using url
$ git clone https://github.com/smachs/jquery-fab-button

CDN

  1. Copy all dependencies from directory
$ cd /js or /css
  1. Add to your template
<!-- Add in HEAD -- > <link href="../css/jquery-fab-button.css" rel="stylesheet"> <!-- Add After BODY -- > <script src="../jss/jquery-fab-button.min.js"></script>
  1. Change to color you want
<li>     <a id="first-fab" class="btn-floating" data-fabcolor="#YourHEX">         <i class="material-icons">insert_chart</i>     </a> </li>
  1. Add FAB to your template
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">     <a class="btn-floating btn-large red">         <i class="large material-icons">mode_edit</i>     </a>     <ul>         <li>             <a id="first-fab" class="btn-floating" data-fabcolor="#45d1ff">                 <i class="material-icons">insert_chart</i>             </a>         </li>         <li>             <a id="second-fab" class="btn-floating" data-fabcolor="#7345ff">                 <i class="material-icons">format_quote</i>             </a>         </li>         <li>             <a id="third-fab" class="btn-floating" data-fabcolor="#0084ff">                 <i class="material-icons">publish</i>             </a>         </li>         <li>             <a id="fourth-fab" class="btn-floating" data-fabcolor="#ff7345">                 <i class="material-icons">attach_file</i>             </a>         </li>     </ul> </div>

Contributing

Thanks for your interest in contributing! Read up on our guidelines for contributing and then look through our issues with a help wanted label 😋

You May Also Like

jQuery Plugins

AngularJs Plugins