UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
The Sliding Menus extension adds a cross-browser sliding transition effect to the menus, with independently controllable open and close animations.
View the demo to see it in action. The demo includes a control panel where you can preview the effect at various settings.
Download the
Sliding Menus script,
copy it into your udm-resources folder,
and add the script include to the body section:
<!-- sliding menus extension -->
<script type="text/javascript"
src="/udm-resources/udm-x-sliding.js"></script>
At the top of the script is a control array with five parameters:
var sliders = [
'200', // duration ["milliseconds"]
'20', // resolution ["frames"]
'tlbr', // opening transition ["ltr"|"rtl"|"ttb"|"btt"|"tlbr"|"trbl"|"bltr"|"brtl"|"cve"|"che"|"ctc"|"rnd"|"none"]
'brtl', // closing transition [same choices]
'no', // allow cross transitions ["yes"|"no"]
];
["milliseconds"]
The length of each complete transition, in milliseconds.
The value you set here affects what the the optimum
resolution is -
the fastest possible Timeout speed of a
Windows NT-based computer is 10 milliseconds, so transitions
with a ratio greater than one frame every
10 milliseconds will not go as fast
as specified, indeed they may go more slowly.
You will also get smoother movement if the ratio is an integer - such as 20 frames in 200 milliseconds.
["frames"]["ltr"|"rtl"|"ttb"|"btt"|"tlbr"|"trbl"| "bltr"|"brtl"|"cve"|"che"|"ctc"|"rnd"|"none"]"ltr"), Right to Left ("rtl"),
Top to Bottom ("ttb"), Bottom to Top ("btt"),
Top-Left to Bottom-Right ("tlbr"), Top-Right to Bottom-Left ("trbl"),
Bottom-Left to Top-Right ("bltr"), Bottom-Right to Top-Left ("brtl"),
Center to Vertical Edges ("cve"), Center to Horizontal Edges ("che"),
Center to Corners ("ctc"), Randomly selected ("rnd") or
no effect ("none").
[same choices]"ltr") or inverse transitions
("ltr" open, "rtl" closed). Note that the two center-edge
transitions are somewhat misnamed here -
I thought it would be less confusing to use the same abbreviation
for equivalent transitions, even though they don't
perfectly scan - so "cve" is Vertical-Edges
to Center, and "che" is Horizontal-Edges to Center.
["yes"|"no"]"yes")
or only one at a time ("no").
Having cross transitions is a nicer visual effect, but it means
there are two timers going at the same time, which may result in slower
or jerkier animation, particularly for people
on older machines with low amounts of
RAM. I recommend leaving this
at the default "no" setting.
The transitions work by animating the CSS clip property, which is only possible for absolutely-positioned elements. Therefore you cannot use this extension with an expanding menu because its submenus are not absolutely positioned.
Transition effects do not happen when navigating with the keyboard, only when using a mouse. This is deliberate, for the sake of better usability.
They might also be quite slow for people on older machines or with low amounts of RAM.
This extension is not supported in Opera versions earlier than 7.5 (because of a now-fixed issue with its implementation of clip), or in Mozilla Gecko browsers earlier than 1.3, Konqueror or Mac/IE5 (because of unpleasant rendering artifacts).
In supported Mac browsers the resolution will be half what you specify, because the function seems to take much longer to loop around, so a lower resolution ensures it runs at a useable speed (although it does mean the animation won't look quite as smooth).
UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.
