UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
The Auto-sizing Menus extension does exactly what it says on the tin - it sizes the menus automatically, so that each is just wide enough for its longest link, without text-wrapping. You can also use it to make the first-level menus of a horizontal navbar match the width of their parent link.
View the demo to see it in action - all the menus are perfectly the right size for their content.
Download the
Auto-sizing Menus script,
copy it into your udm-resources folder,
and add the script include to the body section:
<!-- auto-sizing menus extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-autosizing.js"></script>
At the top of the script is a control array with four parameters:
var autosizing = [
'0', // leeway space ["n" pixels]
'auto', // max-width ["px"|"auto"]
'auto', // min-width ["px"|"auto"]
'no', // size first-level submenus to parent link ["yes"|"no"]
];
["n" pixels]"0" for none.
This allows you to 'loosen' the menu sizing,
as it were, so it doesn't crop so close.
["px"|"auto"]
Specify the maximum menu width, as an integer in pixels,
or "auto" for no restriction.
Menus which would otherwise come out larger
will be constrained to this value, wrapping any
over-long lines.
This defines the total (menu-border-box) width - including any leeway space and accounting for box-model differences.
["px"|"auto"]
Specify the minimum width, as an integer in pixels,
or "auto" for no restriction.
Menus which would otherwise come out smaller
will be constrained to this value.
This defines the total (menu-border-box) width - including any leeway space and accounting for box-model differences.
["yes"|"no"]
If this is set to "yes",
each of the first-level menus
will have the same width as its parent link.
This is designed to be used with a horizontal navbar,
where the effect is most appropriate; but you can use it
with either orientation.
If you do use this setting, ensure that the content of those menus does actually fit. Any text which doesn't fit and cannot wrap (ie. long, single words) may hang outside the menu [in compliant browsers], or force it to over-expand without compensating the other links [Internet Explorer]. You might want to take manual control of the navbar item widths, which you can do by addressing them from external CSS.
This extension cannot be used at the same time as the Scrolling Menus extension, because the scrolling script needs the width of each menu to be predictable.
This extension relies on white-space:nowrap, which
isn't supported in Win/IE5.0
- so I've had to come up with a comparable hack; it involves temporarily
surrounding the link-text with <nobr> tags, on the fly.
But it isn't completely successful - occasionally, a single
orphaned character or word still wraps onto a new line, or a
submenu-indicator arrow may be slightly mispositioned on the first time
of opening a menu.
You might also get the slight arrow mispositioning in Opera 7 and 8, on the first time of opening a menu; the reason for this is, as yet, unknown.
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
