10 Best Circle Menu Plugins In jQuery And Pure JavaScript/CSS

by jQueryScript,

What is circle menu:

A circle menu (also known as radial menu, round menu, circular menu) is a creative menu design concept that arranges the sub-menu items around a circle or arc style menu toggle button. 

In this post you will find the 10 best circle menus implemented in jQuery, vanilla JavaScript, and Pure CSS/CSS3 that helps developers create awesome site/app navigation for better user experience. Have fun!

Table of contents:

jQuery Circle Menu Plugins:

Animated Circle Menu with jQuery and CSS3

A jQuery plugin that makes uses of CSS3 transitions and transforms to create an animated circle menu around the toggle button.

Animated Circle Menu with jQuery and CSS3

[Demo] [Download]


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.

Path Style Round Menu Plugin with jQuery and CSS3 - FerroMenu

[Demo] [Download]


Material Design Styled Pie Menu with jQuery and CSS3

A Google Material Design styled navigation button that expands into a radial/pie/semicircle menu when clicked or tapped.

Material Design Styled Pie Menu with jQuery and CSS3

[Demo] [Download]


Animated Radial Menu with jQuery and CSS3 Transitions

An animated radial navigation that reveals menu items one by one when triggered, built using some CSS3 and jQuery.

Animated Radial Menu with jQuery and CSS3 Transitions

[Demo] [Download]


Ferris Wheel-style Rotating Menu with jQuery and CSS3

An awesome Ferris Wheel-style menu concept that creates a rotating circle menu with a floating trigger button utilizing jQuery and CSS3 animations.

Ferris Wheel-style Rotating Menu with jQuery and CSS3

[Demo] [Download]


Vanilla JS Circle Menu Plugins:

Radial Popup Menu With JavaScript And CSS3 – circleMenu

circleMenu is a simple, lightweight, dependency-free JavaScript library that helps you create a radial popup menu with a fullscreen overlay for your web applications.

Radial Popup Menu With JavaScript And CSS3 – circleMenu

[Demo] [Download]


Path-style Animated Radial Menu – BloomingMenu.js

BloomingMenu.js is a standalone JavaScript library intended to create a CSS3 animated radial menu as you seen on Path.com.

Path-style Animated Radial Menu – BloomingMenu.js

[Demo] [Download]


Lightweight JavaScript Round Menu Library – radial.js

radial.js is a simple lightweight JavaScript library to create a radial menu from an array of items that appears around the toggle button when toggled.

Lightweight JavaScript Round Menu Library – radial.js

[Demo] [Download]


Pure CSS Circle Menus:

Animated Round Popup Menu With Pure CSS

An animated circle menu that popups around the menu toggle, built using CSS3 transitions and transforms.

Animated Round Popup Menu With Pure CSS

[Demo] [Download]


Cool Radial Toggle Menu with Gooey Effect

A pure CSS radial menu concept which comes with a cool gooey effect based on SVG filters and several CSS3 properties.

Cool Radial Toggle Menu with Gooey Effect

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome circle menus on the web & mobile? Check out the jQuery Circle Menu and JavaScript/CSS Circle Menu sections.

See also: