Bubbler is a pure JavaScript/CSS bubble menu inspired by a Material Design style floating button that expands a vertical popup on hover. No library and third framework are required.

floating action button example, floating action button menu, floating action button css, floating action button android, android floating action button menu

How to make use of it:

1. Download and embed Bubbler files on an HTML page.

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

2. Include the iconic Font Awesome font for menu icons.

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

3. Create custom menu items in 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'
    }
  }
];

4. Create the bubble.

var context = new Bubbler(options);

Floating Menu With Vanilla JS Material Design With Action Buttons

See Demo And Download

Official Website(jonbarrow): Click Here

This superior jQuery/javascript plugin is developed by jonbarrow. For extra advanced usage, please go to the official website.