home / documentation / reference / slideoutto

SlideOutTo

Description:

The direction to which a sliding menu should be slid out of view.

Value:

null; one of top, right, bottom, or left; or a JavaScript expression that returns one of these values.

Applies To:

Menus.

Browser Compatibility:

SlideOutTo is not supported in Netscape 4.x, Internet Explorer 4.x, or earlier Gecko browsers (Netscape 7.02 and earlier, Mozilla 1.2 and earlier).

Comments:

You may specify only null (no sliding) or one of the special keywords top, right, bottom, or left for SlideOutTo. Keywords are case-sensitive and must be specified as lower case. Keywords must be quoted.

SlideOutTo is part of the custom transition routines included in the HM_Loader.js file and discussed in detail in the Custom Transitions Mini-Tutorial. In order to apply a sliding effect to a menu hide, you must include this key SlideOutTo parameter, as well as register the custom functions with the HierMenus setTrans and killTrans menu event hooks:

ScrollEnabled:1,
SlideOutTo:"left",
setTrans:HM_f_SetSlide,
killTrans:HM_f_KillSlide,

For reasons having to do with the sliding effect itself, all sliding menus must be ScrollEnabled.

SlideOutTo represents the sliding effect that will be applied to the menu when it is hidden. SlideInFrom represents the sliding effect that will be applied to the menu when it is made visible.

Applying both SlideInFrom and SlideOutTo to the same menu is not recommended; the excessive movement of the menus can be distracting and annoying to your visitors. Also, SlideOutTo menus to the right or bottom, where their parent menus (or they themselves) are positioned to the right or bottom of the browser window, are generally not recommended. Even though the menu itself is mostly hidden while the sliding effect is being processed, when you slide a menu out to the edge of a browser window, some of the invisible portion of the menu may be offscreen as it is being moved to its ultimate destination. If this portion of the menu happens to be off the right side or bottom of the screen window, then most browsers will adjust their scrollbars to accommodate them--even if the portion that is off screen cannot be seen. The result is often the appearance (and, consequently, a relayout of the page itself) of a horizontal or vertical scroll bar where none is actually necessary. This constant adjustment of the scrollbars (in Internet Explorer the scrollbars remain in their extended state until you reload the page; in Gecko the scrollbars are readjusted dynamically as the menu is moved) can be confusing and distracting to your site visitors.

Examples:

// Ok:
SlideOutTo:"top", 
SlideOutTo:"left",
SlideOutTo:null,
SlideOutTo:(window.HM_IE55)?null:"left", 
   // No sliding in IE5.5+

// Incorrect:
SlideOutTo:top,     // must quote keywords
SlideOutTo:"null",  // do not quote null
SlideOutTo:'(window.HM_IE55)?null:"left"', 
   // no quoted expressions

Default:

undefined

See Also:

SlideInInterval, SlideOutInterval, SlideInPercent, SlideOutPercent, SlideInFrom, setTrans, killTrans, Custom Transitions Mini-Tutorial