CODEWITHSUNDEEP
jquery-uimenupositionsubmenu
code.tweetie
code.tweetie

Reputation: 624

How to reposition submenu in jquery ui menu?

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 ?

Upvotes: 1

Views: 1906

Answers (1)

code.tweetie
code.tweetie

Reputation: 624

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" });
            }
        }
    )

});

Upvotes: 3

Related Questions