Customizable Material FAB Plugin For jQuery - fab.js

Yet another jQuery FAB plugin used to generate customizable, mobile-compatible, horizontal (or vertical) floating action buttons inspired by Google Material Design.

Tap (touch device) or hover over (desktop) the menu toggle button to reveal all the action buttons with fade in & fade out animations.

More features:

• Custom styles, icons, actions.
• 4 position options: "top-left", "top-right", "bottom-left", "bottom-right".
• onOpen and onClose callback functions.

How to use it:

1. Create a container element to hold the floating action button.

<div id="cont"></div>

2. Insert jQuery library and the jQuery FAB plugin's files into the document.

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

3. Create a new FAB instance and customize the action buttons as follows:

var fab = new Fab({

    // container element
    selector: "#cont",

    // button options
    button: {
      style: "large teal",
      html: ""
    },

    // custom styles of the floating menu toggle button
    icon:{
      style: "amazon icon",
      html: ""
    },

    // "top-left" || "top-right" || "bottom-left" || "bottom-right"
    position: "bottom-lef",

    // "horizontal" || "vertical"
    direction: "vertical",

    // an array of custom action buttons
    buttons:[
      {
        button: {
          style: "small yellow",
          html: ""
        },
        icon:{
          style: "hdd icon",
          html: ""
        },
        onClick: function(){
          console.log("fire");
        }
      },
      {
        button: {
          style: "small red",
          html: ""
        },
        icon:{
          style: "book icon",
          html: ""
        },
        onClick: function(){
          console.log("ice");
        }
      }
    ],

    // callback functions
    onOpen: function(){},

    onClose: function(){}
    
});

---

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