Universal menu sizing

Hello,

We are working on fairly complex Firefox-only solution, using PHP for XML generation, Javascript and DOM for real-time element manipulation, AJAX for transport. There’s a good reason to write an universal menu with such Win32-like features:
* Unlimited vertical submenu’s nesting;
* Variable vertical submenu’s width – by that I mean: every single submenu (made with UL/LI), should have to adjust its width to its widest item’s caption’s width – *in the realtime*, i.e. when new menu item is added via Javascript function, a vertical menu bar should recalculate width and, if it has increased due to the latest addition, adjust accordingly.

The example of above conditions may be any Win32 or Linux menu.

So-called “pure CSS menu” hardly fits there; it needs additional CSS definitions with :hover and selectors for *every* new submenu level, and that is not compatible with “realtime adjust” philosophy. We need to create unlimited menu sublevels with plain javascript function calls!

Most of the plentiful examples on the Web deal with one, two, sometimes – three submenu levels… all of them hard-coded with CSS…

I’ve managed to create variable-width submenus. Put the menu item’s text in an inline DIV; the DIV tightly wraps around the text. Then – wrap the inline DIV with another DIV, block-level. It stretches to the limits of UL/LI. The end-result looks as it should – menu width is the same as its widest item’s.

BUT.

Usually a submenu is attached to it’s parent item by setting child UL’s position to ‘relative’ and shifting UL by some -5 pixels up and [parent_menu_item’s_length] pixels to the right; then it stands to the very right of parent menu item and can be seen side-to-side with the original.

But here I can’t find “[parent_menu_item’s_length]”.

This “parent_menu_item’s_length” is determined strictly at runtime, by selecting the widest of all menu items. FireFox does this automatically by tight-fitting a inline DIV on item’s text. Yet however I try, “DOM Inspector” (in the Calculated Style Rules part) shows DIV, LI or even UL width to be “auto”. Makes sense, but doesn’t turn my life easier. Can’t find a way to obtain menu bar’s width IN PIXELS in order to properly shift submenu’s UL to the right.

Ok, I’ve tried to think in a Win32 way. Maybe there’s Javascript/DOM function which returns width of a string, rendered with certain font attributes. No good. Didn’t find any. Google is silent.

So, my question would be: how to measure a width in pixels of some text string with certain font attributes applied?
Or, maybe my line of thinking is totally flawed, and there’s a way simpler solution to the whole universal menu problem?

Sorry for errors, English is not my native tongue ? I come from C++/Java background and don’t have much experience with Javascript, which frustrates to no end. Any ideas or links would be greatly appreciated.

Regards,
Tomas Zilinskas.

Also in #JavaScript _↴