Pie Menu (like Path menu ) using jquery and CSS3
by nikesh on 20/05/12 at 6:43 pm
Today I am going to show you , one of my plugin (written in jquery) . This plugin is useful for all those who wants to show there menu item in Pie shape or better to say same as Path menu. I have used jquery and CSS3 in this plugin , so chances for running this plugin on older browser are very odd (CSS3 is not supported).
Below I have attached the snapshot , to view the original output please visit DEMO.
*(In demo the Plus button is draggable )
In the demo , i have given Starting Angle , Desplacement Angle and Radius of the circle as input field .Try to chance those value and see the difference. For better understanding of those value , below I have attached a spanshot which shows what those value are…
How to use
1) Download the Zip file from Git Repo and extract it.
2) Add piemenu.css and query.menu.js file along with jquery.js in your code.
3) Use div structure like (use .menu_button for the button and .menu_option for item’s container)
<div id="outer_container" class="outer_container">
<a class="menu_button" title="Toggle" href="#"><span>Menu Toggle</span></a>
<ul class="menu_option">
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
</ul>
</div>
4) now just add …
$('#outer_container').PieMenu({
'starting_angel':0(Starting Angle in degree),
'angel_difference' : 90(Displacement angle in degree),
'radius':100 (circle radius in px),
});
5) Thats it..
To view the original output please visit DEMO.
If you want to try / download this plugin please go to my github repository.
Do not forget to drop your comments.
Pie Menu using jquery and CSS3 | mintik
Aug 11th, 2012
[...] Nikesh Hayaran‘ın jQuery için hazırladığı drag and drop özellikli çok güzel bir menü eklentisi. Ekranda görülen + işaretine tıklanınca oval bir şekilde menü düğmeleri animasyonlu bir şekilde çıkıyor. [...]
Rahul
Aug 11th, 2012
Good
Garth Holmes
Aug 30th, 2012
Do you have any additional information on how to go about modifying the icons for each of the links?
It currently sources only the usr.png file for all icons, but i would like to use different icons for each link.
I have a rudimentary knowledge of CSS and have figured out how to resize the main button, change the color, modify starting location etc… but I am unable to do much else to customize it more.
nikesh
Sep 3rd, 2012
its actually pretty simple and a lot ways to do it ….
the simplest way is to change “..usr.png” with your image .. or add new classes for different images.
munchi112
Apr 2nd, 2013
hi nikesh, nice menu.. i’m working on a menu system from a template.. how difficult would it be to adjust and make the menu an oval instead of a perfect circle? Thanks
irfan
Apr 27th, 2013
nice.thanx
irfan
Apr 27th, 2013
nice.thanx
Karess
Aug 26th, 2014
Your story was really inoetmarivf, thanks!
Rod
May 9th, 2013
Still trying to figure out how to change each individual icon. Anyone have the answer? I tried creating a class for the span but didn’t have any luck when setting the background-image.
nikesh
Jun 6th, 2013
Thanks for all the wonderful comments.
Dönerek açılan animasyonlu menü yapımı | Mintik.com
Apr 27th, 2014
[…] Nikesh Hayaran‘ın jQuery için hazırladığı drag and drop özellikli çok güzel bir menü eklentisi. Ekranda görülen + işaretine tıklanınca oval bir şekilde menü düğmeleri animasyonlu bir şekilde çıkıyor. […]
collinslenjo
Oct 23rd, 2015
nice.thanx