Typps supports this item


This author's response time can be up to 2 business days.

69 comments found.

Found it! No need to answer my post.


np BR, thanks for purchase :)


http://atropos.me/ is my site.

bezierCurve = {“x0”: 170, “y0”: 45, “x1”: 107, “y1”: 75, “x2”: 75, “y2”: 75,”x3”: 75 };

but the menu does not move away from icon. I use 128×128 main menu. have read radius doesn affect on bezier menus.

CSS #pathmenu6 .captionlabel { background:white; color:black; background-color:rgba(255,255,255,0.0); }

pathmenu6 .menu{

width: 128px; height:128px; }

pathmenu6 .item {

width: 50px; height:50px; }

br P

By the way, if you look at page 17 in the documentation, you can see a portion of the code is highlighted. This is how you set the bezier curve.

ahh! it seems you are using the wordpress plugin but commenting on the standalone version! Please comment on the proper version if you need further assistance ;)


Before purchasing this code. Can you tell me if it relatively easy to implement on my site http://www.mobilregning.dk ? I’m not good with coding, therefore I will fail if it needs some tweaking to work out.

Hope you can give an answer from the source code.

Best regards

Included you’ll find code samples and documentation. If you find yourself hitting a wall, contact me through my profile. I’ll help you get up and running asap :)

Thanks for the interest!


Can I use ‘PathMenu.ExpandPattern.lineRight’ with leftBottomFixed style?

I want to use fixed ‘main button’ to left bottom position that items are sliding to right.


Starnations, That’s not possible. lineRight is an inline expand pattern and does not dock automatically like the Arc style patterns. If you would like to dock it in the bottom left area like the Arc style menu, you’ll have to do so using regular css and markup.

Thanks for purchase!


can i use retina icon??

in mycase,i use this amazing menu to my mobile webapp.

but,it’s not clear image to show.. so i use retina.js to my webapp

how can i use retina img??

I’ve taken a look at retina.js and it appears you can. Try the LESS example provided and set it in css.

The Path Style Menu allows you to set your icons 2 ways. It can be passed as arguments in the constructor in JavaScript or it can be done in CSS. You’ll have to go the CSS route. There is a section in the documentation that explains how to apply icons in CSS. You’ll have to glimpse that section to get a feel of how this is done.

Condensed example for a single menu item, after looking at retina.js should look as follows :

.menu1 .path .item {
   /*All menu item buttons*/
   width: 40px;
   height: 40px;

#menu1_menuitem0 {
   background: url('../images/photo.png') no-repeat;

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
   .menu1 .path .item {
    /*All menu item buttons*/
    width: 80px;
    height: 80px;

   #menu1_menuitem0 {
    background: url('../images/photo@2x.png') no-repeat;
   /*evry other menu item go below*/

Many thanks for purchase.

See comments in WP version. Thanks!

Yup, responded, no worries :)


I want to trigger lightbox modals using this, but the functionality is somewhat limited to a simple #ref.

How can i change it so that I can use something like the following for each icon?

<a class=”preview-button” data-width=”800” data-height=”450” data-src=”http://www.youtube.com/watch?v=this” href=”#”> icon goes here </a>

hi, you have a js tab in the admin area of the Path Style Menu where you can insert a conditional switch statement in js that will trigger your lightbox.

hi, the spinning is done in css3 so you will need to remove the transition from the .class that targets the main menu icon.

could you dumb this down a bit for me?

Hi, try to add the following css in your page. Should stop the spin as it overrides the transform which allows the main menu item to rotate in and out :

.path .menu.rotatein
, .path .menu.back.rotatein
, .path .menu.rotateout
, .path .menu.back.rotateout {
    -webkit-transform: rotate(0deg) !important;
  -moz-transform: rotate(0deg) !important;
  -o-transform: rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;