FerroMenu jQuery Plugin
February, 17 2014
Version 1.2.3
Requirements:
Compatibility : firefox chrome safari internet explorer opera android ios
Downloaded 12655 times
This plugins allows you to create animatable bubble menus in a cool way and drag them through the screen.
The final effect is similar to Dolphin's or Path's menu.
You can position the menu in 9 different anchor points of the screen, as we'll see, and you can drag it from an anchor point to another.
The menu items can point whatever you want: anchors, external links, javascript functions and so on.
FerroMenu is really simple to use, due to the multiple available plugin's options.

If you like this plugin, find it useful and want to contribute to it's development , please donate with paypal:


For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com, or use the comments section.
Features
FerroMenu allows you to:
How to use
1. Include necessary JS files
You need to include FerroMenu's css and source javascript file.
Obviously you need to include jQuery library.

2. Create an HTML list
Create a list that will be arranged as menu, e.g. : 
<ul id="nav">
	<li><a href="<link_path>">item 1</a></li>
	<li><a href="<link_path>">item 2</a></li>
	<li><a href="<link_path>">item 3</a></li>
	<li><a href="<link_path>">item 4</a></li>
	<li><a href="<link_path>">item 5</a></li>
	<li><a href="<link_path>">item 6</a></li>
</ul>

3. Let's rock!!!
Fire plugin using jQuery selector. 
$(document).ready(function() {
	$('#nav').ferroMenu();
});
The initialization is called giving the jQuery selector of the list that contains the menu items.
If the initialization is called as above, the plugin will use it's default values, otherwise you can give some custom parameters, e.g. : 
$(document).ready(function() {
	$("#nav").ferroMenu({
		position 	: "left-center",
		delay 		: 50,
		rotation 	: 720,
		margin		: 20
	});
});
Read the Options section for a deeper explanation of custom parameters.
Options
The available parameters for this plugin are the following:

Parameter Available values Default value Description
closeTime number 500 menu colsing time speed in milliseconds
delay number 0 items' animation starting delay in milliseconds
drag true | false true enable / disable menu dragging around the screen
easing string cubic-bezier(0.680, -0.550, 0.265, 1.550) animation easing. You can use every HTML5 compliant easings
margin number 10 menu margin in pixels from the edges of the viewport
position 'left-top' | 'center-top' | 'right-top' | 'right-bottom' | 'center-bottom' | 'left-bottom' | 'right-center' | 'left-center' | 'center-center' 'left-bottom' initial position of the menu in one of the 9 anchor points
radius number 100 radius in pixels of the items distance from the menu controller
rotation number 0 rotation in degrees performed by the menu items at opening / closing
opened true | false false initial state of menu: if true the menu is opened, otherwise (default) is closed
openTime number 500 menu opening time speed in milliseconds

Multiple menus
From version 1.2, FerroMenu supports multiple menus on the same page. Every menu will behave independently from the others. To create multiple menus simply initialize them like so: 
$(document).ready(function() {
	$(<id_of_first_ul>).ferroMenu({
		// options...
	});
	
	$(<id_of_second_ul>).ferroMenu({
		// options...
	});
	
	$(<id_of_third_ul>).ferroMenu({
		// options...
	});
	
	...
});
See demo number 4 for a real working example with two menus.
Going mobile
Thank to CSS3 transitions, FerroMenu permforms smoothly on mobile devices.
You can use the menu simply touching and dragging it with your fingers.
Public functions
FerroMenu provides only two public methods that can be called from outside:
Function Parameter Description
$.fn.ferroMenu.toggleMenu(id) id of the menu list open / close the menu. The id parameter must be in the jQuery style (e.g. "#nav").
$.fn.ferroMenu.refreshMenu() - Refresh menu items positions. Useful when the menu is absolute positioned.
Events
FerroMenu provides some custom events:
These events add an object, called menustatus to the jQuery $.event object, which has two simple informations: To catch this events, you can do like this: 
$(document).ready(function() {
	$(document).on("menuready",function(){
		//do stuff
	});
	
	$(document).on("menuopened",function(){
		//do stuff
	});
	
	$(document).on("menuclosed",function(){
		//do stuff
	});
	
	$(document).on("menudragstart",function(){
		//do stuff
	});
	
	$(document).on("menudrag",function(){
		//do stuff
	});
			
	$(document).on("menudragend",function(){
		//do stuff
	});
});
For a more detailed example, see demo number 3. If you check the source code you will see the handling of 3 events: menuready, menudrag and menudragend;
Demos
Here are three simple examples of different FerroMenu configurations. Note that in these examples I use Font Awesome Webfont to make the menu items a little bit nice.
As you can see in the 2nd demo, menu items point to a javascript function.
  1. no custom attributes, everything's default;
  2. customized position, delay, rotation angle and margin;
  3. customized position, delay, rotation angle, margin, opened at start, events handling;
  4. two ferroMenus together;

Download
Get the latest version of FerroMenu: download FerroMenu 1.2.3 .
Contacts
For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com.

   

Changelog
Comments
Leave a comment here if you want.

Name

Comment


Send comment