I've got a site with a jQuery "mega menu".

Right now the menu sub flows outside the layout (as shown below). This is a problem if the available chrome isn't wide enough to see the menu.



What I want it to do instead:



I need to come up with a jQuery function that detects the width of the drop-down, checks to see if that width is larger than the remaining amount to space to the right. If it is then move the menu to the left instead of the right.

I'm just new to jQuery so I'm a bit lost.

I don't know if there's a fonction that is prepackaged in jquery that you can call upon. I know you could write something in java, but I would be of no help in that field. Why don't you try sticking a "class" on that <ul> that is in the far right and move it with css?

Maybe you can put a container div around the menu to force sub items to stay inside the container (not sure if it will work)

a rough sketch of the script:

//max width
var maxWidth = 800;
//Width of menu
var menuWidth = $("#topnav").width();

var spaceAvailable = maxWidth - menuWidth;

//Get width of last submenu, (ul of last li)
var lastSubWidth = $("#topnav ul li:last lu").width()

//Get width of last li
var lastLiWidth = $("#topnav ul li:last").width()

if(lastSubWidth -lastLiWidth > spaceAvailable)
{
var spaceToLeft = lastSubWidth - lastLiWidth ;

//Postition last ul more to the left with negative value;
$("#topnav ul li:last lu").css("left", 0 - spaceToLeft);
}

I assume maxWith is known because it's the container of the menu. Just a rough sketch, needs debugging testing etc.

Nice menu ! I will try it when i have time.
I hope this helps you in the right direction.

Thanks to jazpur's help and hints I got it!