Dynamic Menu Adjustment (moved To Css Forum)

[justinbriggs1]

Hello everyone, I have a JavaScript question if you don't mind.The site in question is www.adcuda.comI have been trying to get the dynamic navigation bar on the main page to expand to the width of the longest entry. In this case, it is the one under Solutions-->Additional Services that reads "Extra long page name to test menu wrap". By default it wraps, but I would like it to expand. Trial and error doesn't seem to be getting a lot of results. Can anyone help me out? Thanks,JW

[justsomeguy]

You've got the widths defined in the CSS, so they aren't going to automatically stretch. They're going to obey the CSS. So the first thing to do would be to remove the widths defined on the various nav UL and LIs. It's not going to be easy to have it look decent without a set width though, if each item was inline then the right edges wouldn't line up, each item would only be as long as it needed to be. It lines up nice because each of them have the same width set. So you need a width if you want them all to line up. That means that you need a way to determine how long a given piece of text is. There's not really a good way to do that, browsers may use their own fonts or sizes or whatever, so it's hard to calculate what the bounding box for a piece of text is. About the closest you can get is to set the font to a certain pixel size, and then count the characters and use a formula that takes the number of characters and the font size and tries to estimate about how long it's going to be. That's not even going to be strictly accurate, because different characters are different sizes in most fonts. So the best you can do is to estimate about how long the text is going to be, and then set the widths on all of the LIs to that value. Since your menu is on the right side, you'll also need to detect if the menu is going to go off the right side of the screen and either shorten it or move it to the left.So, it's not a real easy thing to do.