Raphael Round Menu

Last Update
13 July 2012
Regular License
$5
Extended License
$25
Sales
65

Raphael Round Menu About Raphael Round Menu was designed to render a round menu. All menu items are arranged symmetrically inside a circle. (Using blank elements you can created a half circle menu etc.) Script draws menu items and calculates their sizes automatically. You can customize menu radius and styling options. Source HTML list may consist of text nodes and image nodes at the same time. Script will build a menu with different items.

Script uses cross-browser RaphaëlJS library to generate SVG or VML graphics.

Firefox 3.0+

Safari

Chrome

Opera 9.5+

Internet Explorer 6.0+

Installation

Refer to a script files in your web-page header

Create a source list in your web-page.

Create a DIV where you want to render menu.

Register event for a menu init.

Source list example:

<ul class="roundMenu" id="myBeautifulMenu" /> <li><a href="http://example.net">Tooltip<img src="1.png" /></a></li> <li><a href="http://friendship.com">Text item</a></li> <li><a href="http://1.com">One more text item</a></li> <li><a href="http://4.net/">4<img src="2.png" /></a></li> <li><a href="http://coupons.com">Another text item</a></li>

Features

Cross-browser.

Different animation options.

Retina ready. Menu is a scalable vector image.

Fully customizable menu design.

Background may be filled with JPG or PNG image.

You can use PNG images as a menu items.