Pie Menu (like Path menu ) using jquery and CSS3

by 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>

4) now just add …

        '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.

12 Responses to “Pie Menu (like Path menu ) using jquery and CSS3”

  1. 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. [...]

  2. Rahul

    Aug 11th, 2012


  3. 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.

  4. 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

  5. irfan

    Apr 27th, 2013


  6. irfan

    Apr 27th, 2013


  7. 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.

  8. nikesh

    Jun 6th, 2013

    Thanks for all the wonderful comments.

  9. 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. […]

  10. collinslenjo

    Oct 23rd, 2015


Leave a Reply to Rahul