Inside Technique : DHTML Vertical Menus : Styling Menus

The menu's appearance is defined using a stylesheet. In the downloadable sample, we define the style sheet in a linked style sheet names style.css.

The first CSS rule in this style sheets positions the overall menu (the DIV that contains the menu). In our opening page, we used the CSS float property to float the content at the left of the screen. Rather than float the menu bar, you can also absolutely position the menu on the screen by setting the CSS position property to absolute and specifying a top and left position. In all cases, you must always specify a width for the menu. Without a width, any content to the right of the menu may not be accessible.

.menu {float: left; width:100pt; z-index:1; visibility:visible}

Next, you can change the appearance of the menu by modifying the style sheet applied to the menu's definition tables. The current values within this stylesheet render black menus displayed in a white 9pt Trebuchet MS font. When the user mouses-over the text, the text’s background highlight is a dark blue.

.menu TABLE.menubar {position:relative; font:menu; 
   cursor:auto; background:transparent}
.menu TABLE.menubar .root {cursor:hand; 
   background:transparent; padding: 1pt}
.menu TABLE.menubar TABLE {font: 9pt Trebuchet MS, Arial; color:#ffffff; 
   line-height:12pt; margin:0pt; padding:0pt; background:#000000; 
   border:2px #eeeeee solid 2px 2px gray solid 2px gray solid #eeeeee solid; 
   display:none; position:absolute}
.menu TABLE.menubar A.text {font: 9pt Trebuchet MS, Arial; 
   color:#ffffff; line-height:12pt; text-decoration:none;}
.menu TABLE.menubar TABLE TD {padding:0pt 15pt 0pt 10pt; margin:0pt;
   color:#ffffff}
.menu TABLE.menubar .highlight {color: white; background:#0000dd}
.menu TABLE.menubar .disabledhighlight {background: navy; color: gray}
.menu TABLE.menubar #break, #menubar .disabled {color: gray}
.menu TABLE.menubar #break {padding: 0pt; margin: 0pt}
.menu TABLE.menubar .more {position: relative; 
   left:14pt; top:2pt; width:.8em;
   margin:0pt; padding:0pt;float:right}
.menu TABLE.menubar .left {margin-left: -11pt}

You have now seen how to define and format your vertical menus. We recommend you download the menus.zip file and look at the sample menu. If you are interested in a horizontal menubar, be sure to check out our Menu Toolkit. The Menu Toolkit also includes a simple wizard for building your menu.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.