Menu Bar Shadows

Suite and Optimus Suite 5
#1

Hello,

how do I make dhtmlx Menu bars have shadows on the options which pop up on mouse hover as is done, for example, in the Firefox menu bar:


or this site’s menu bar:


It would help in giving menu bars a 3D characteristic making it easier to discern dhtmlx menu and window components from other common ones already found in the background site graphics.

#2

Hello,

You may set box-shadow style in the .dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon class.

.dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon{
-moz-box-shadow: 2px 2px #ebebeb;
-webkit-box-shadow: 2px 2px #ebebeb;
box-shadow: 2px 2px #ebebeb;
}

#3

Neat,

Though it works fine on Firefox, I had to add the following to the same class for it to work on Internet Explorer:

filter:
progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=120,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=135,strength=3)
progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=150,strength=3);

Together, the full class becomes:

div.dhtmlxMenu_dhx_skyblue_SubLevelArea_Polygon {
position: absolute;
background-color: #f0f0ee;
border: #a4bed4 1px solid;
overflow: hidden;
padding-top: 1px;
padding-bottom: 1px;

 /*Menu Shadows - Firefox*/
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.50);

 /*Menu Shadows - Internet Explorer*/
    filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=120,strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=135,strength=3)
    progid:DXImageTransform.Microsoft.Shadow(color=#979797,direction=150,strength=3);

}

Using rgba(0, 0, 0, 0.50) style color syntax allows for enabling shadow transparency by adjusting the fourth decimal parameter between 0 = clear and 1 = completely opaque.