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:
position menu in one of the 9 anchor points of the screen: top-left, top-center, top-right, center-left, center-center, center-right, bottom-left, bottom-center, bottom-right
move menu simply by dragging it around the screen. When the drag ends, the menu will position itself in nearest anchor point
customize menu aspect simply by changing it's CSS
customize transitions setting their duration, easing, delay of the menu items, rotation angle for the opening/closing action, margin from the edges of the viewport, radius (i.e the distance of the items from the controller)
the items of the menu will be rearranged after each movement, basing on the space available around the menu.
enable / disable dragging feature
encapsulate the sliding contents into a container;
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. :
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. :
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:
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.
For any comment, bug, personalization request or doubt, you can send me an email to madferro@gmail.com.
Changelog
[Sep, 8 2014 - 12:18] : Released ferroMenu 1.2.3 which adds a new public function : refreshMenu.;
[Mar, 18 2014 - 8:15] : Released ferroMenu 1.2.2 with a bugfix again for Firefox. Thanks to Patrick Putz for feedback and support!;
[Feb, 17 2014 - 8:18] : Released ferroMenu 1.2.1 that fixes a boring bug rising with Firefox. Thanks to Dorian Garcia for feedback and support!;
[Feb, 10 2014 - 12:55] : FerroMenu 1.2 released!
This release adds the feature to create multiple menus on the same page....Check it out!;
[Nov, 14 2013 - 13:11] : FerroMenu 1.1 is out!
This release adds a new option to open menu by default at start and 6 custom events: menuready, menuopened, menuclosed, menudragstart, menudrag and menudragend. A new demo will show you the way...Check it out!;
[Oct, 21 2013 - 9:55] : Brand new jQuery plugin FerroMenu is here! Say hello!
FerroMenu is a simple, responsive, customizable and probably useless jQuery menu plugin. Powered by HTML5 and CSS3.;