Question

I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.

I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image…

I’ve tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.

Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns

Answer 1

Why don’t you do it all only with CSS?

See http://jsfiddle.net/DebVr/8/

Note: the background is blue in order to see the white borders.

Edit:

If you want some functionality, you can add it later, but I think that the basis should be with CSS.

See my code with some functionality here: http://jsfiddle.net/DebVr/11/

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
    function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
    function(){$('#bar1>li>ul').hide();}
);

Edit 2:

If you want to hide again the submenu when clicked, use the following code:

var links=$('#bar1>li>a').each(function(index,obj) {
  obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
    $(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
    $(this).siblings('ul').toggleClass('show');
});

$('#bar1>li>a').blur(function(){
   $(this).siblings('ul').removeClass('show');
});

And CSS:

#bar1>li>ul.show{
    display:block;
}

See it here: http://jsfiddle.net/DebVr/16/

Edit 3:

In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.

The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn’t work on firefox… I’m working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.

Edit 4:

Finally, the fixed code: http://jsfiddle.net/DebVr/18/

It works on Chrome, Firefox and IE.