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.

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

1. Load the Material Icons for the menu icons.

<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.

<link href="css/jquery-fab-button.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="js/jquery-fab-button.js"></script>

3. Create the HTML for the floating action buttons.

<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 class="btn-floating bg-indigo">
        <i class="material-icons">insert_chart</i>
      </a>
    </li>
    <li>
      <a class="btn-floating bg-indigo">
        <i class="material-icons">format_quote</i>
      </a>
    </li>
    <li>
      <a class="btn-floating bg-indigo">
        <i class="material-icons">publish</i>
      </a>
    </li>
    <li>
      <a class="btn-floating bg-indigo">
        <i class="material-icons">attach_file</i>
      </a>
    </li>
  </ul>
</div>

This awesome jQuery plugin is developed by smachs. For more Advanced Usages, please check the demo page or visit the official website.