The Drop Shadows plugin helps you create pretty, sophisticated drop shadows for your menus. To make this plugin work, you must include one extra JavaScript libary found in the js/ directory. Your code should look something like this if you need to use this plugin:

<script src="../js/core.WebDDM.compressed.js"></script>
<script src="../js/dropshadows.WebDDM.compressed.js">
	<!-- For WebDDM drop-shadow plugin -->
</script>

The WebDDM Drop Shadow plugin offers three types of shadows: smooth, flat image, and flat color.
The menu that is always visible above (Home, More Info, JavaScript Calls) has a smooth shadow. The "More Info" submenu has a flat image, and the "JavaScript Calls" submenu has a flat color.
Below, we give some example code and descriptions for configuring each shadow type. Then, at the very end of this page, we will go over the configuration needed for ALL shadows. A smooth shadow is made up of one image, which the drop shadow plugin dynamically tiles to create a continuous, smooth, and beautiful shadow. See the image for the shadow we have.
If you want a smooth shadow, put this array in your 'items' array (and as always, use our example menu code as a reference):

// Smooth Shadow
'drop-shadow':{
	'smooth':{
		'image-body':'path/to/smooth_shadow.png',
		'image-width':485,
		'image-height':485,
		'image-border-size':12
	},
	'shadow-offset-x':3,
	'shadow-offset-y':3,
	'shadow-extra-width':7,
	'shadow-extra-height':7
},

Configuration for smooth shadows:

• image-body: path to the image to be used for the shadow. All 4 sides and corners will be used to create the shadow effect.
• image-width: the total width, in pixels, of the image.
• image-height: the total height, in pixels, of the image.
• image-border-size: the size, in pixels, of the shadow image's border. The border is the area from the edge of the image to the first inner pixel.

A flat image shadow is simply made up of one image, scaled by your browser to the appropriate width and height. See the image we use for the flat image shadow on this page.
If you want a flat image shadow, put this array in your 'items' array (and as always, use our example menu code as a reference):

// Flat Image Shadow
'drop-shadow':{
	'flat':{
		'image':'path/to/flat_shadow.png'
	},
	'shadow-offset-x':4,
	'shadow-offset-y':4,
	'shadow-extra-width':4,
	'shadow-extra-height':4
},

Configuration for flat image shadows:

• image: the path to an image to use for the shadow

A flat color shadow is simply made up of one color, filling up an area that you define.
If you want a flat color shadow, put this array in your 'items' array (and as always, use our example menu code as a reference):

// Flat Color Shadow
'drop-shadow':{
	'flat':{
		'color':'#777777'
	},
	'shadow-offset-x':4,
	'shadow-offset-y':4,
	'shadow-extra-width':4,
	'shadow-extra-height':4
},

Configuration for flat color shadows:

• color: the color (in any valid CSS format) of the shadow

The following configuration is needed for every shadow type:

• shadow-offset-x: The offset on the X axis of the left side of the shadow from the left side of the parent 'items' object
• shadow-offset-y: The offset on the Y axis of the top side of the shadow from the top side of the parent 'items' object
• shadow-extra-width: Normally, the shadow is exactly as wide as the parent 'items' object. If you want it to be wider, enter a number here. If you want it to be less wide, enter a negative number.
• shadow-extra-height: Normally, the shadow is exactly as high as the parent 'items' object. If you want it to be higher, enter a number here. If you want it to be less high, enter a negative number.

View CSS file - View JavaScript file. Plugins: Last - Next