Tooltip-style Floating Menu Plugin With jQuery - floatingMenu

floatingMenu is a jQuery plugin which lets you create a tooltip-like dynamic floating menu / toolbar appending to any elements. You're able to customize the menu titles, icons and actions in the JavaScript when initializing the plugin.

How to use it:

1. Load the floating-menu.css in the header that will provide the primary CSS styles for the floating menu.

<link rel="stylesheet" href="floating-menu.css">

2. Create an element where you want to append the floating menu to. The data-fm-floatTo attribute is used to specify the menu position you prefer. Accepted values: 'top', 'bottom', 'right', and 'left'.

a href='javascript:void(null);' data-fm-floatTo='bottom'> Clicm Me </a>

3. Initialize the plugin and add dynamic menu items with custom titles, icons & actions as follows:

$.floatingMenu({
  selector: 'a',
  items: [
    {
      icon : '', // icon classes
      title : 'Facebook',
      action : 'http://www.facebook.com/jqueryscript'
      },
      {
        title : 'Insert',
        action : function(event) {
          alert('insert');
        }
      },
      ...
  ]
});

Change log:

2016-07-23

• Fixed toggle event

---

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