Hubeleke jQuery Circle Rotate Menu Buy now (Only $9)

Hubeleke jQuery Circle Rotate Menu is a circle shaped menu that rotates and retrives its content on click. The plugin generates circle shape with CSS3 properties. That's because only modern browsers will support it. When you click on a menu item, the menu will rotate until the clicked menu item reaches to the bottom. Meanwhile its content will be shown/loaded in the content wrapper with an animation.

Features

Installing Files

Installing the jQuery Rotate Menu is so easy. Just add these following codes inside <head> of your web page.

<link href="css/jquery.rotate.menu.css" rel="stylesheet" />
<script src="js/jquery.rotate.menu.js" type="text/javascript"></script>

You need to load all these files to install the plugin properly. Also Hubeleke jQuery Circle Rotate Menu requires jQuery 1.7 or later to work.

Usage

For the HTML markup, you'll need two basic elements. First is a div with an id for the menu items which contains the links. You can add links as much as fits in to the menu circle. Second is the content wrapper. By default settings, your content wrapper is the next div of your menu. With plugin options you can set a custom div as your content wrapper and you can place it wherever you want in your page.

The plugin loads the content in two ways: Tabs(default) and Ajax. In tabs mode, you'll need to write all menu contents in required format in your content wrapper. For all menu items there must be a content div in the content wrapper in same order as menu items. They will be automatically matched. In ajax mode an empty content wrapper will be enough. The plugin will insert content in the content wrapper dynamically.

Each menu item has attributes to customize plugin. The attributes are data-image, data-image-href, data-image-class and data-ajax. At the bottom of page, you can find attribute details.

The basic markup with four menu items:

<div id="rotate-menu"> <-- Id will be used as selector -->
    <a>LOREM</a>
    <a>IPSUM</a>
    <a>DOLOR</a>
    <a>SIT AMET</a>
</div>

<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, veniam!</div> <-- For LOREM -->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum exercitationem quas!</div> <-- For IPSUM -->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat!</div> <-- For DOLOR -->
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur laborum porro velit.</div> <-- For SIT AMET -->
</div>

		

How to Initialize

The basic initialization:

<script type="text/javascript">
    $(function() {
	$(selector).rMenu();
    });
</script>

		

You can use these options to customize plugin properties:

<script type="text/javascript">
    $(function() {
	$(selector).rMenu({
	    menuSize			: 300,
	    menuRotateDuration		: 500,
	    linkColor			: '#333',
	    linkSize			: 16,
	    linkPadding			: 20,
	    border			: true,
	    borderColor			: '#999',
	    borderSize			: 2,
	    image			: true,
	    imageSize			: 240,
	    imageBorderSize		: 2,
	    imageBorderColor		: '#999',
	    imageBgColor		: '#ddd',
	    imageOverlayBgColor		: '#fff',
	    imageOverlayDuration	: 100,
	    contentWrapper		: '',
	    contentType			: 'tabs',
	    contentAjaxLoader		: 'ajax/index.php',
	    onBeforeLoad		: function() {},
	    onAfterLoad			: function() {},
	    onMenuClick			: function() {}
	});
    });
</script>

		

This is the basic initialization:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab facere natus nisi sequi voluptatum! Culpa cupiditate dignissimos dolorem ex quasi recusandae saepe sint voluptates voluptatibus. A aliquid consectetur cum dignissimos est harum obcaecati ratione reprehenderit!

Examples

The plugin formed in four parts: Menu items(links), menu border, image(center) box and content wrapper. Menu links and content wrapper is required, the others are optional.

No image box

You can disable the inner image box by giving false value to plugin's image option

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab facere natus nisi sequi voluptatum! Culpa cupiditate dignissimos dolorem ex quasi recusandae saepe sint voluptates voluptatibus. A aliquid consectetur cum dignissimos est harum obcaecati ratione reprehenderit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?
<script type="text/javascript">
$(function() {
    $('#example-1').rMenu({
	menuSize	: 200,
	image		: false,
	linkPadding	: 5,
	contentWrapper	: '.example-1'
    });
});
</script>

No border

You can disable the outer border by giving false value to plugin's border option

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.
<script type="text/javascript">
$(function() {
    $('#example-2').rMenu({
	menuSize	: 200,
	border		: false,
	imageSize	: 150,
	contentWrapper	: '.example-2'
    });
});
</script>

With image in image box

For adding images, add data-image attribute to links and set value the path of your image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab facere natus nisi sequi voluptatum! Culpa cupiditate dignissimos dolorem ex quasi recusandae saepe sint voluptates voluptatibus. A aliquid consectetur cum dignissimos est harum obcaecati ratione reprehenderit!
<script type="text/javascript">
$(function() {
    $('#example-3').rMenu({
	menuSize	: 200,
	imageSize	: 150,
	linkPadding	: 10,
	linkSize	: 14,
	contentWrapper	: '.example-3'
    });
});
</script>

Colors and Size

You can easly customize your plugin's appearance. You can set menu size, link font size, link color, link padding, border size and color, image box's size, border size, background and ovelay colors. Also you can set the rotate speed and image toggle speed.

LOREM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque eligendi enim facere labore nihil numquam pariatur, recusandae sunt vero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ipsam itaque magnam magni quae suscipit tempore totam veniam veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab facere natus nisi sequi voluptatum! Culpa cupiditate dignissimos dolorem ex quasi recusandae saepe sint voluptates voluptatibus. A aliquid consectetur cum dignissimos est harum obcaecati ratione reprehenderit!

IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor eligendi impedit nemo porro quo? Ea eaque eligendi fugiat illum quo reiciendis sapiente sunt, totam? Culpa expedita fugiat quae repellendus vitae! Esse exercitationem fuga minus, necessitatibus officiis perspiciatis porro praesentium quaerat quam totam. Ab animi consequatur cumque eius ipsa nemo nostrum unde velit, voluptatibus! Cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.

DOLOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam dicta dignissimos dolores, ea incidunt iure libero nobis, numquam pariatur perspiciatis repudiandae sed totam voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at beatae eos ipsum nam neque nisi, placeat possimus provident quia tempore! A magni numquam quas qui quo quos veniam.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?

JS CODES
<script type="text/javascript">
$(function() {
    $('#example-4').rMenu({
	menuSize		: 420,
	menuRotateDuration	: 1500,
	borderColor		: '#ff5d60',
	imageSize		: 320,
	imageBorderColor	: '#ff5d60',
	imageOverlayBgColor	: '#ff5d60',
	linkSize		: 18,
	contentWrapper		: '.example-4',
    });
});
</script>

Ajax Mode

In ajax mode you have to use data-ajax attribute on your menu items. It's the post value which will be sent to ajax file. This file will be used to get your content by using the post value. Any platform can be used(ex: php, aspx etc.).

Combine with Other Plugins

You can use the data-image-href and data-image-class to customize your image box. You can set a custom class or a href with these attributes. In this example first three image boxes have fancybox class in data-image-class and zoom image paths in data-image-href attributes. So fancybox can use the image boxes and runs on click event. The last image box has a direct link which is given with data-image-href attribute.

LOREM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque eligendi enim facere labore nihil numquam pariatur, recusandae sunt vero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ipsam itaque magnam magni quae suscipit tempore totam veniam veritatis!

IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cumque, delectus dolor dolorum eius eligendi et explicabo iusto libero mollitia nesciunt nihil nostrum optio pariatur praesentium, provident reprehenderit sunt totam?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor eligendi impedit nemo porro quo? Ea eaque eligendi fugiat illum quo reiciendis sapiente sunt, totam? Culpa expedita fugiat quae repellendus vitae! Esse exercitationem fuga minus, necessitatibus officiis perspiciatis porro praesentium quaerat quam totam. Ab animi consequatur cumque eius ipsa nemo nostrum unde velit, voluptatibus! Cumque.

DOLOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam dicta dignissimos dolores, ea incidunt iure libero nobis, numquam pariatur perspiciatis repudiandae sed totam voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at beatae eos ipsum nam neque nisi, placeat possimus provident quia tempore! A magni numquam quas qui quo quos veniam.

JS CODES
<script type="text/javascript">
$(function() {
    $('#example-6').rMenu({
	menuSize		: 350,
	imageSize		: 250,
	imageBorderSize		: 7,
	imageBorderColor	: '#7ac504',
	imageOverlayBgColor	: '#eee',
	borderColor		: '#73008c',
	linkColor		: '#416a00',
	contentWrapper		: '.example-6'
    });
});
</script>

Events

The plugin has four events: onBeforeLoad(), onAfterLoad(), onMenuClick() and onAjaxLoaded(). In this example each event generates console logs in console when triggered. You can see logs via pressing F12 and choosing console tab on the developer window.

LOREM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet consequatur, facilis illo laborum nam neque non odio possimus quis reprehenderit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam dicta dignissimos dolores, ea incidunt iure libero nobis, numquam pariatur perspiciatis repudiandae sed totam voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque eligendi enim facere labore nihil numquam pariatur, recusandae sunt vero.

IPSUM

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio dolor eligendi impedit nemo porro quo? Ea eaque eligendi fugiat illum quo reiciendis sapiente sunt, totam? Culpa expedita fugiat quae repellendus vitae! Esse exercitationem fuga minus, necessitatibus officiis perspiciatis porro praesentium quaerat quam totam. Ab animi consequatur cumque eius ipsa nemo nostrum unde velit, voluptatibus! Cumque.

DOLOR

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, atque blanditiis consequuntur deserunt esse illum incidunt ipsum itaque quae similique suscipit voluptates! Hic, ipsam, nemo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquam dicta dignissimos dolores, ea incidunt iure libero nobis, numquam pariatur perspiciatis repudiandae sed totam voluptatem.

SIT AMET

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab facere natus nisi sequi voluptatum! Culpa cupiditate dignissimos dolorem ex quasi recusandae saepe sint voluptates voluptatibus. A aliquid consectetur cum dignissimos est harum obcaecati ratione reprehenderit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dolorem fuga illum iusto molestias mollitia, obcaecati ratione saepe sint voluptatum.

JS CODES
<script type="text/javascript">
$(function() {
    $('#example-7').rMenu({
	menuSize		: 300,
	imageSize		: 150,
	imageBorderColor	: '#025c6f',
	imageOverlayBgColor	: '#eee',
	borderColor		: '#025c6f',
	linkColor		: '#025c6f',
	contentWrapper		: '.example-7',
	onBeforeLoad		: function() {
	    console.log('Example-7 started loading')
	},
	onAfterLoad		: function() {
	    console.log('Example-7 finished loading')
	},
	onMenuClick		: function() {
	    console.log('Menu item clicked on example-7')
	}
    });
});
</script>

Configuring Options

Option Default Value Data Type Description
menuSize300Number Size(px) of the circle menu.
menuRotateDuration500Number The rotate duraion of menu in milisecond format.
linkColor#333String Color of menu items(links) in hex or text format.
linkSize16Number Font size(px) of menu items(links).
linkPadding20Number The padding value between menu items(links) and border.
bordertrueBoolean The option to enable/disable border.
borderColor#999String The color of border in hex or text format.
borderSize2Number The border size(px) of border.
imagetrueBoolean The option to enable/disable image box.
imageSize240Number Size(px) of the image box.
imageBorderSize2Number Border size(px) of the image box.
imageBorderColor#999String Border color of the image box in hex or text format.
imageBgColor#dddString The background color of image box in hex or text format. If you set it to "transparent", image box will have no background.
imageOverlayBgColor#fffString The overlay color of image box in hex or text format.
imageOverlayDuration100Number Overlay's appear/dissaper duration in milisecond format.
contentWrapperemptyStringString Selector for the wrapper of the contents. If not set content wrapper will be the next div of your circle menu.
contentTypetabsString The option to set how the contents will be loaded. It can be tabs or ajax.
contentAjaxLoaderajax/index.phpString The path value of ajax content loader file. Only available in ajax mode.
onBeforeLoadNullFunction Function that triggers before the plugin starts initializing.
onAfterLoadNullFunction Function that triggers after the plugin finishes initializing.
onMenuClickNullFunction Function that triggers when a menu item is clicked.
onAjaxLoadedNullFunction Function that triggers when an ajax content is loaded.

Menu Item Attributes

Attribute Element Description
data-image a The current menu item's image path for the image box. You can set an image for each menu item.
data-image-href a The href value for the image box. If you want to set a link to image box, you can use this attribute.
data-image-class a The call value of image box. You can give custom styles by giving classes to image box with this attribute.
data-ajax a The value which will be posted to ajax content loader file.