Shadow Effect

[SmartMenus 6 add-on]

This sample demonstrates how you can apply a shadow effect to the sub menus (cross-browser).

For the purpose you need to use a small add-on script.

SmartMenus 6 Add-on: Shadow Effect

Usage

Using the Shadow Effect 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 shadow effect to all sub menus you may have on the page.

Customization

The shadow can be fully customized. You will find the following variables that could be used to customize the shadow in the add-on (the "c_addon_fx_shadow.js" file):

c_shadow_offset=2; // pixels
c_shadow_color="#C0C0C0";
c_shadow_opacity=60; // 0-100 percent
c_shadow_direction=0; // 0-right, 1-left

Browser support

This add-on is supported in all browsers that are fully supported by the SmartMenus 6 script with the following exceptions:

The opacity setting (i.e. c_shadow_opacity) is not supported in most older browsers - in these browsers the shadow appears fully opaque regardless of this setting.

Notes

Please note the following:

  1. You can use this add-on in combination with any other add-on.

Download this sample

You can download the complete example or just see the configuration file and the images used for it.

Configuration file