How to reposition submenu in jquery ui menu?

Question

I need my menu to appear like below :

| Menu 1 | -> | Sub menu of menu 1 - 1 |
| Menu 2 |    | Sub menu of menu 1 - 2 |
| Menu 3 |    | Sub menu of menu 1 - 3 |

| Menu 1 |    | Sub menu of menu 2 - 1 |
| Menu 2 | -> | Sub menu of menu 2 - 2 |
| Menu 3 |    | Sub menu of menu 2 - 3 |

| Menu 1 |    | Sub menu of menu 2 - 1 |    | Sub menu of menu 2 - 2 - 1 |
| Menu 2 | -> | Sub menu of menu 2 - 2 | -> | Sub menu of menu 2 - 2 - 2 |
| Menu 3 |    | Sub menu of menu 2 - 3 |    | Sub menu of menu 2 - 2 - 3 |

I'm using the below position() option of jquery-ui's menu widget but doesn't seem to achieve what I want.

$( "#menu" ).menu({position: { my: "left top", at: "right top" , collision: "flip " } });

Also I'm not sure how to use

$( ".selector" ).menu( "option", "position", { my: "left top", at: "right-5 top+5" } );

(Above line taken from http://api.jqueryui.com/menu/#option-position)

What is not working for me : http://jsfiddle.net/R4Y2E/1/show/

What I'm trying to achieve : http://jsfiddle.net/2zA6A/4/show/ (slightly move away from the links on the li to see that the submenu repositions to the top of the parent menu)

Any help or suggestion as to how to use this method ?

so you've posted what you're trying to achieve but you haven't shown how its failing. Either post that or better yet post a jsfiddle illustrating the problem. :) — Rooster
– Rooster, Commented Feb 28, 2014 at 18:55

code.tweetie · Accepted Answer · 2014-03-03 16:26:34Z

3

I figured out to reposition the submenu using focus & select events (as below) : http://jsfiddle.net/2zA6A/6/

$(function() {

var menuBar;
    menuBar = $("#menu");

    menuBar.menu(
        {
            focus: function (event, ui) {
                 menuBar.menu("option", "position", { of: $(ui.item.parent()), my: "left top", at: "right top" });
            }
        }
    )

});

edited Mar 3, 2014 at 16:26

answered Mar 3, 2014 at 16:16

code.tweetie

6341 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reposition submenu in jquery ui menu?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related