So you want...

A Tabbed Menu

To swap out the horizontal band-type menu in Zen Intranet, for a tabbed approach as above, please follow the directions below.

PLEASE NOTE: you will need to use Zen's Brand Designer for modifying the brand. (Don't know what we're talking about? Look here.)

First, change the menu's settings.

1. In the brand designer, select MENU in the left-hand column list of options
2. Change the BORDER RADIUS to something like 12px (you can increase or decrease the top corners' curves as you like here.)
3. Remove the BORDER LEFT settings
4. Remove the BORDER FIRST "none" settings

Then, remove the background color from the menu.

This is achieved through some custom CSS, so you will need to

1. Open the brand designer
2. Find the CSS file named site-design.css (toward the bottom of the list on the left)
   
3. Remove the last line (which brings in a background image)
4. Replace $zenPrimaryColor with $zenWhiteColor (two places for this) 

BEFORE

#zen-menu {
  background-color: $zenPrimaryColor;
  width: 100%;
  z-index: 1;
}
#zen-header-back #wrapper #header {
  background-color: $zenPrimaryColor;
  background: $zenPrimaryColor url($zenDirectURL/designs/brands/$zenBrandName/images/gradients/header.png) repeat-x top left;
}

AFTER

#zen-menu {
  background-color: $zenWhiteColor;
  width: 100%;
  z-index: 1;
}
#zen-header-back #wrapper #header {
  background-color: $zenWhiteColor;
}

Finally, make any desired changes to the colors of the menu tabs.

1. Back in the brand designer, and still in the MENU area...
2. Simply change the BACKGROUND COLOR of the Tabs and the BACKGROUND HOVER COLOR (this will also set the color of a selected menu item.)
3. Still not what you're after? Try adding a gradient as a BACKGROUND IMAGE to the menu items (the Zen Button images are good ones to start playing with)
4. If you would like a BORDER on the tabs, you can set that as well.*

PLEASE NOTE: We have a setting coming in Zen 5.2.8 that allows for the setting of menu tab HOVER and CURRENT borders. Until then, you can add the following css to set the color of that border option (with $zenDarkColor changed to whatever color you'd like there):

#zen-menu ul li:hover,
#zen-menu ul li.current,
#zen-menu ul li.ancestor-link {
border: 1px solid $zenDarkColor;
border-bottom: none;
}

Were you looking for a menu more like this?

Simple. Follow only STEP TWO as just described (don't set a radius and leave the border settings as is, though you might want to lighten up the color of that divider (BORDER LEFT) against the white.)

Then, set the BACKGROUND COLOR and BACKGROUND HOVER COLOR to white. 

(You'll need to also then change the COLOR and HOVER COLOR settings, so the menu items show up against the white.)