ShowUsYour<Blog>

ContextMenu - how the styles work (for now)

One other thing that I've not mentioned about the ContextMenu server control is how the styles are handled. Presently, and for the initial release of the control there will be classnames hard-coded into the control itself; they are:

• MarkItUp_ContextMenu_MenuTable : Controls the styles on the outer html table of a menu.
• MarkItUp_ContextMenu_MenuItemBar : The area around the text of a menu item.
• MarkItUp_ContextMenu_MenuItemBar_Over : Allows a hover style to be applied when the user mouses over an item.
• MarkItUp_ContextMenu_MenuItem : The style to apply to the text of a menu item.

Once I get more time I might look to change this and map the class names through to the control so that they can be set from the designer - but that won't be for a while yet. So, looking at the following graphic:

Here is the stylesheet that produced that look and feel:

.MarkItUp_ContextMenu_MenuTable {
    border:      1 black solid ;
    padding:     1 1 1 1 ;
    shadow:      4 4 4 4 ;
    z-index:     99 ;
    background:  white;
    filter:      progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=4) alpha(Opacity=90);
}
.MarkItUp_ContextMenu_MenuItemBar {
    border:      1px solid White;
    width:       100% ;
    cursor:      default  ;
}
.MarkItUp_ContextMenu_MenuItemBar_Over {
    background:  rgb(234,242,255);
    border:      1px solid rgb(120,172,255);
    width:       100% ;
    cursor:      hand ;
}
.MarkItUp_ContextMenu_MenuItem {
    font-family: Verdana ; 
    font-size:   smaller ;
    color:       black;
    text-decoration: none ;
}