Material Floating Action Button In JavaScript – Bubbler

Bubbler is a small JavaScript library helps you create a Material Design style floating button which expands a vertical popup menu on hover. No 3rd library and framework required.

How to use it:

Download and include the Bubbler’s files on the html page.

<link rel="stylesheet" href="bubbler.min.css">
<script src="bubbler.min.js"></script>

Include the Font Awesome iconic font for the menu icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

Create the custom menu items in the JavaScript.

var options =
[
  {
    icon:'1',
    label: 'Run alert function',
    callback: function() {
      alert('dasd');
    }
  },
  {
    icon:'<i class="fa fa-id-card" aria-hidden="true"></i>',
    label: 'Test Element 2'
  },
  {
    icon:'3',
    label: 'Test Element 3',
    display: {
      color: 'blue',
      background: 'red'
    }
  }
];

Initialize the bubbler and done.

var context = new Bubbler(options);