Shadow Effect
[SmartMenus 6 add-on]
Update:
This add-on was written back in the days when CSS3 features like box-shadow weren't supported by any browser and is meant to add drop shadow effect for (almost) all old browsers that are fully supported by the SmartMenus script. However, you can, of course, use box-shadow nowadays if you like with the SmartMenus script. For example, add the following in the style array for the sub menus "SM" in section 2 of the configuration file (c_config.js):...
'box-shadow:3px 3px 3px rgba(0,0,0,0.15);-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.15);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.15);' // Custom additional CSS for the menu box (valid CSS)
..
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, 2-bottom
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
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:
- 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.
