FerroMenu – jQuery rounded menu with CSS3

FerroMenu is a responsive and flexible jQuery rounded menu plugin for creating a draggable menu button, with items as popup. Customizable CSS3 transitions.

jQuery rounded menu

A simple, touch-enabled and responsive, powered by HTML5 and CSS3, to use in specific projects. Show bubble menus in a cool way and drag them through the screen!

FerroMenu was developed with mobile first approach. Touch events are handled to give a better user experience, and transitions/animations.

This plugin is higly customizable, with several options you can customize the behaviuor of the details. It can be dragged around the screen, or you can set the transition time, delay and easing.

jQuery rounded menu plugin
jQuery rounded menu plugin

Main features of FerroMenu – jQuery rounded menu with CSS3:

– 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/CSS files:

<link rel="stylesheet" href="/css/jquery.ferro.ferroMenu.css" 
  type="text/css">
<script src="/jquery-1.9.1.min.js" type="text/javascript">
</script>
<script src="/jquery.ferro.ferroMenu-1.2.3.min.js" 
type="text/javascript"></script>

2. Create HTML list, for example:

<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. Run:

$(document).ready(function() {
    $('#nav').ferroMenu();
});

The initialization is called giving the jQuery selector of the list that contains the menu items.

You can adjust parameters:

$(document).ready(function() {
    $("#nav").ferroMenu({
        position    : "left-center",
        delay       : 50,
        rotation    : 720,
        margin      : 20
    });
});

Read the Options section of documentation for a deeper explanation of custom parameters.

Demo:

http://www.alessandroferrini.it/lab/jQueryPlugins/ferroMenu/demos/demo1.html

Download:

ferroMenu-1.2.3.zip

Project homepage:

http://www.alessandroferrini.it/lab/jQueryPlugins/ferroMenu

Enjoy!

Share:Share on Facebook3Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest2