This plugin requires jQuery! floatingMenu is a global-dynamic plugin which means you dont have to worry about dynamically added/created elements.
For performance reasons the plugin clears its own initiation events when not visible.
icons (optional) - you can use your favourite font package, just provide the icon class in the icon parameter.
note! the demo is using ionicons
Example usage
$.floatingMenu({
selector: 'your-selector',
items: [
{
icon : 'ion-social-youtube',
title : 'Youtube',
action : 'https://youtube.com/',
blank : true, // open url in new tab (optional, defaults to false)
close : false, // dont close the menu after and action has happened (optional, defaults to true)
},
{
title : 'google',
action : 'https://google.com/',
close : false, // no effect since there is a redirect (optional)
},
{
title : 'Insert',
action : function(event) {
alert('insert');
},
blank : true, // no effect since action is not a url (optional, defaults to false)
close : false, // dont close the menu after and action has happened (optional, defaults to true)
},
{
title : 'Edit',
action : function(event)
{
alert('edit');
},
},
{
title : 'Remove',
action : function(event) {
alert('remove');
},
},
]
});
**Events**: beforeAction, afterAction, beforeShow, afterShow, beforeChangePosition, afterChangePosition, beforeHide, afterHide
var $fm = $.floatingMenu({ ... });
$fm.on('afterShow', function(event)
{
// your code here
});
TODO:
option whether url opens in new window or same windowoption whether menu closes after clicking an item- Theming best practices