Reveal Animation
[SmartMenus 6 add-on]
This sample demonstrates how you can apply various reveal animation effects (cross-browser) for opening the sub menus.
For the purpose you need to use a small add-on script.
SmartMenus 6 Add-on: Reveal Animation
Example
Use the following select box to apply and see the different reveal effects you could use.
Usage
Using the Reveal Animation add-on is really simple - just link the small JS file on your page after the link to the SmartMenus script core (c_smartmenus.js) file. This is all you need to do - the add-on script will automatically apply the chosen reveal animation effect to all sub menus you may have on the page.
Customization
You will find the following variables that could be used to customize the reveal animation effect in the add-on (the "c_addon_fx_slide.js" file):
c_reveal_steps=10;
c_reveal_speedGain=0.2; // with each step (pixels)
c_reveal_direction=3; // Possible values:
// 1-auto-vertical/horizontal, 2-auto-diagonal, 3-box-inside-out,
// 4-top-bottom, 5-bottom-top, 6-left-right, 7-right-left,
// 8-diagonal-bottom-right, 9-diagonal-bottom-left,
// 10-diagonal-top-right, 11-diagonal-top-left
When c_reveal_direction is set to 1 or 2 (i.e. "auto-vertical/horizontal" or "auto-diagonal") the script will automatically detect the reveal direction for each sub menu.
Browser support
This add-on is supported in all browsers that are fully supported by the SmartMenus 6 script with the following exceptions:
- Old Gecko prior to 20020530 (Mozilla<1.0)
- Opera<7.5
- Internet Explorer on Macintosh
Notes
Please note the following:
- You can use this add-on in combination with any other add-on except the "Slide Animation" add-on.
Download this sample
You can download the complete example or just see the configuration file and the images used for it.
