JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
JavaScript.CoolDev.Com is home of the best JavaScript drop down menu, JavaScript tree and outlook bar
COOLjsMenu Samples

Standard:

item sizing
item positioning
border & pseudo-shadow
multiple levels
styles & colors
multiple instances
tips and status bar
IE filters
IE transitions

Professional:

popups
cross-frame
relative positioning
icons
arrows
advanced borders
z-index

Graphically Rich:

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9

COOLjsMenu - JavaScript menu: order now!

Rate It!

If you like COOLjsMenu
vote for it!

ScriptSearch.com

HotScripts.com

Border and pseudo-shadow

COOLjsMenu and COOLjsMenu Professional allow you to specify borders and shadows for your menus. Each submenu and each item can be configured separately via styles (see "Styles" example for details).

var color = { border:"#666666", shadow:"#DBD8D1", bgON:"white", bgOVER:"#B6BDD2" };
var css = { ON:"styleOn", OVER:"styleOver" };
var STYLE = { border:1, shadow:2, color:color, css:css };

In the color variable field "shadow" is the color of the shadow, and field "border" is the color of the border. Size of the border is controlled by field "border" of the STYLE variable (0 means no border, 1 - one pixel wide, 2 - two pixels wide, etc.), and size of the shadow (i.e. displacement) is controlled by field "shadow" of the STYLE variable (0 means no shadow, 1 - one pixel displacement, 2 - two pixels displacement, etc.). Be sure to take in account border size when calculating item's height and width.

COOLjsMenu Professional allows some additional manipulations with border (here is an example).