Path Style Round Menu Plugin with jQuery and CSS3 - FerroMenu

FerroMenu is a responsive and customizable jQuery menu plugin for creating a draggable menu button that will popup a Path style round menu interface with custom transition effects.

Features:

• Responsive and touch enabled.
• Allows to drag the menu button around the screen.
• Customizable CSS3 transitions.

See also:

• jQuery Plugin For Path-like Wheel Menu Button - Wheel Menu
• Customizable Circle Menu Plugin with jQuery

Basic Usage:

1. Include the latest version of jQuery javascript library and jquery.ferro.ferroMenu.min.js script in your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.ferro.ferroMenu-1.0.min.js" type="text/javascript"></script>

2. Include required jQuery FerroMenu stylesheet to style the menu.

<link rel="stylesheet" href="jquery.ferro.ferroMenu.css" />

3. Include Font Awesome CSS for font icons.

<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.css" />

4. Create a menu using Html unordered list.

<ul id="nav">
<li><a href="javascript:void(0);"><i class="icon-camera"></i></a></li>
<li><a href="javascript:void(0);"><i class="icon-user"></i></a></li>
<li><a href="javascript:void(0);"><i class="icon-map-marker"></i></a></li>
<li><a href="javascript:void(0);"><i class="icon-music"></i></a></li>
<li><a href="javascript:void(0);"><i class="icon-comment-alt"></i></a></li>
<li><a href="javascript:void(0);"><i class="icon-moon"></i></a></li>
</ul>

5. Call the plugin. That's it.

<script type="text/javascript">
$(document).ready(function() {
$("#nav").ferroMenu();
});
</script>

6. Options to customize your path-like menu.

<script type="text/javascript">
$(document).ready(function() {
$("#nav").ferroMenu({
position    : "left-center", // initial position of the menu in one of the 9 anchor points
delay       : 50, // items' animation starting delay in milliseconds
rotation    : 720, // rotation in degrees performed by the menu items at opening / closing
margin      : 20, // menu margin in pixels from the edges of the viewport
drag        : true, // enable / disable menu dragging around the screen
easing      : 20, // animation easing. You can use every HTML5 compliant easings
radius      : 50, // radius in pixels of the items distance from the menu controller
closeTime   : 500, // menu colsing time speed in milliseconds
openTime    : 500, // menu openining time speed in milliseconds
});
});
</script>

---

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