[SmartMenus 6 add-on]
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.
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.
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_opacity=60; // 0-100 percent
c_shadow_direction=0; // 0-right, 1-left, 2-bottom
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)
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.
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.
Shortcuts and Related
Bookmark / Share
← Previous Sample | Online Samples Home | Next Sample →