Sliding Menus extension

Version 1.1

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"


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"]
duration ["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.

resolution ["frames"]
The number of stages to each complete transition - higher values give smoother movement but are more work for the browser, and hence may put a drag on the overall transition speed, depending on its set duration.
opening transition ["ltr"|"rtl"|"ttb"|"btt"|"tlbr"|"trbl"| "bltr"|"brtl"|"cve"|"che"|"ctc"|"rnd"|"none"]
Set the opening transition effect. The choices are: Left to Right ("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").
closing transition [same choices]
The same choices as for the opening transition - you may like parallel transitions (eg, both "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.
allow cross transitions ["yes"|"no"]
This controls whether open and close transitions can happen simultaneously ("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.

Implementation notes

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.

Browser notes

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).


We would like your feedback! Take the UDM4 Survey!

UDM 4 is valid XHTML, and in our judgement, meets the criteria for WAI Triple-A conformance.