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. Notice that Opera does not support the UI part of CSS2 and therefore the look and feel of this page will vary. Another thing to notice is that the menus use fix position and size so if a system has a too large font then the menus might look a bit off.

The Menu

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

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

Menu Items

The cursor of a menu item should always be defaul. The border should be 0 and the color for selected items should use highlight and highlighttext

.webfx-menu a {
   display:         block;
   width:           expression("100%"); /* should be ignored by mz and op */
   text-decoration: none;
   color:           buttontext;
   height:          18px;
   vertical-align:  center;
   padding-left:    5px;
   padding-right:   0px;
   cursor:          default;
   font:            menu;
   overflow:        hidden;
}

.webfx-menu a:visited {
	color: buttontext;
}

.webfx-menu a:hover {
   color:      highlighttext;
   background: highlight;
}	

Menu Separator

Not much here, just some color changes.

/* separator */
.webfx-menu div {
   height:          0;
   height:          expression(2);
   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:       menu;
}

.webfx-menu-bar a,
.webfx-menu-bar a:visited {
   color:           buttontext;
   border:          1px solid buttonface;
   text-decoration: none;
   padding:         1px;
   padding-left:    5px;
   padding-right:   5px;
}

.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;
}

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

Author: Erik Arvidsson