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.