home / samples / sliding menus

Sliding Menus

Sliding Menus "slide" into view from the top, left, right, or bottom of their intended positions. Optionally, they can slide out of view, too. In the above example menu, notice how the first child menus slide in from the top (they slide downward into position), while the grandchild menus all slide into view from the left (they appear to move toward the right).

As a general rule, we do not recommend the use of menus that both slide in and out of view; the excessive menu movement can be irritating to your site visitors. Also, beware of menus that slide in from the bottom or right, in menus that are at or near the bottom or right edges of your browser window. The reasons for this are described in the reference entries for the SlideInFrom and SlideOutTo configuration parameters.

Sliding menus are an example of a custom transition, a topic dealt with at length in the Custom Transitions Mini-Tutorial.

For further information, check out the reference entries for these configuration parameters:

SlideInFrom
SlideOutTo
SlideInInterval
SlideOutInterval
SlideInPercent
SlideOutPercent
IEShowTransition
IEHideTransition
setTrans
killTrans
Custom Transitions Mini-Tutorial
Menu Event Hooks Mini-Tutorial

Click the link below to have a look at the configuration file we used to generate these sample menus:

sliding.js