Changing the look and feel

There are two places that needs to be changed for the layout of the menus to work correctly. The first thing to change is the css file.

To show how to do all this I'm going to update the current menu to give it a Windows look and feel.

The Menu

Menus in windows have a 2px outset border and a menu background color.

.webfx-menu {
   position:   absolute;
   z-index:    100;
   visibility: hidden;
   width:      100px;
   background: Menu;
   border:     2px outset Menu;
   padding:    1px;
}

Menu Items

The cursor of a menu item should always be default. The border should be 0 and the color for selected items should use Highlight and HighlightText.

.webfx-menu a {
   display:         block;
   width:           expression(constExpression(ieBox ? "100%" : "auto"));
   text-decoration: none;
   color:           MenuText;
   height:          expression(constExpression("1px"));
   vertical-align:  center;
   padding:         2px;
   padding-left:    3px;
   padding-right:   3px;
   cursor:          default;
   font:            Menu;
   border:          0;
}

.webfx-menu a:visited {
   color:  MenuText;
   border: 0;
}

.webfx-menu a:hover,
.webfx-menu a:visited:hover {
   color:      HighlightText;
   background: Highlight;
   border:     0;
}

Menu Separator

Not much here, just some color changes.

/* separator */
.webfx-menu div {
   height:        0;
   height:        expression(constExpression(ieBox ? 2 : 0));
   border-top:    1px solid ButtonShadow;
   border-bottom: 1px solid ButtonHighlight;
   overflow:      hidden;
   margin:        0;
   margin-top:    2px;
   margin-bottom: 2px;
   font-size:     0mm;
}

Menu Bar

Just some color changes and a font change.

.webfx-menu-bar {
   background:  ButtonFace;
   padding:     2px;
   font-family: Verdana, Helvetica, Sans-Serif;
   font-size:   11px;

   /* IE5.0 has the wierdest box model for inline elements */
   padding:     expression(constExpression(ie50 ? "0px" : "2px"));
}

.webfx-menu-bar a,
.webfx-menu-bar a:visited,
.webfx-menu-bar a:visited:hover {
   color:           ButtonText;
   border:          1px solid ButtonFace;
   text-decoration: none;
   padding:         1px;
   padding-left:    5px;
   padding-right:   5px;

   /* IE5.0 Does not paint borders and padding on inline elements without a height/width */
   height:          expression(constExpression(ie50 ? "17px" : "auto"));
   white-space:     nowrap;
}

.webfx-menu-bar a:hover {
   color:           ButtonText;
   background:      ButtonFace;
   border-left:     1px solid ButtonHighlight;
   border-right:    1px solid ButtonShadow;
   border-top:      1px solid ButtonHighlight;
   border-bottom:   1px solid ButtonShadow;
}

JS Constants

We should also set the default js constants so that the menus can be positioned to fit the style sheet that we have created.

webfxMenuDefaultBorderLeft    = 2;
webfxMenuDefaultBorderRight   = 2;
webfxMenuDefaultBorderTop     = 2;
webfxMenuDefaultBorderBottom  = 2;

webfxMenuDefaultPaddingLeft   = 1;
webfxMenuDefaultPaddingRight  = 1;
webfxMenuDefaultPaddingTop    = 1;
webfxMenuDefaultPaddingBottom = 1;

webfxMenuDefaultShadowLeft    = 0;
webfxMenuDefaultShadowRight   = 0;
webfxMenuDefaultShadowTop     = 0;
webfxMenuDefaultShadowBottom  = 0;

Introduction & Browser Issues
Usage
Implementation
API
Look & Feel
Hover Menu

Author: Erik Arvidsson