A Corporate Redesign - Part I

As standards become more and more essential in our design, we still seem to find web sites without such a policy. Sites like Amazon.com have already been re-designed during this time of standards, but without any type of valid code. Fellow developers have sought out to quickly re-code some of these sites to show the quick and easiness of it all. Yet the companies themselves have failed to implement the standards. It has been the small-business pioneers of such reformation of the web.

Another such culprit of bad corporate design is Microsoft.com. Their site renders exactly as they wanted it to, only in IE and not in any other browsers. They have used extensive JavaScript to provide their menus, client sniffing, and IE specific code. Their main page cannot even be validated as it is missing a DTD causing the W3C validator to fail it immediately. Adding a DOCTYPE isn't even the beginning of the page's problems.

However, there is good news. The Microsoft site can be simply redesigned, becoming a new page with the same look, accessible to all, and valid to W3C Standards. We’ll start by fixing the vertical menu on the left of the index page. It will look exactly as it does, display in all browsers, but will coded in be valid XHTML and CSS. We're going to do this as an example to how the tools we've been given allow us to do various things that can really spice up a site, without giving up on standards, validation, and accessibility.

XHTML

First, we need to convert the menu to compliant XHTML code. The original markup is an ugly mess of nested tables and thick, unreliable code. This menu, merely a long list of links, should be coded using the UL tag. We will define the UL tag as a part of the "microsoft" class. Then, we will be able to define the style for that class to display it as our menu. I have also added some specific ID's to the menu options that have a submenu display. We will address those later. Here is the code for the main menu:

<ul class="microsoft">
<li><strong>Product Families</strong></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Servers</a></li>
<li><a href="#">Developer Tools</a></li>
<li><a href="#">Games and Xbox</a></li>
<li><a href="#">MSN Services</a></li>
<li><a href="#">Business Solutions</a></li>
<li><a href="#">All Products</a></li>
<li><hr /></li>
<li><strong>Resources</strong></li>
<li><a href="#" id="VsupportActuator">Support 
></a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Windows Update</a></li>
<li><a href="#">Office Update</a></li>
<li><a href="#" id="VlearningActuator">Learning 
Tools ></a></li>
<li><a href="#">Communities</a></li>
<li><a href="#">Security</a></li>
<li><hr /></li>
<li><strong>Information For</strong></li>
<li><a href="#">Home Users</a></li>
<li><a href="#">IT Professionals<br />(TechNet)</a></li>
<li><a href="#">Developers (MSDN)</a></li>
<li><a href="#">Microsoft Partners</a></li>
<li><a href="#" id="VbusinessActuator">Business 
Professionals ></a></li>
<li><a href="#">Educational Institutions</a></li>
<li><a href="#">Journalists</a></li>
<li><hr /></li>
<li><strong>About Microsoft</strong></li>
<li><a href="#">Mission and Values</a></li>
<li><a href="#">Investor Relations</a></li>
<li><a href="#">Windows Update</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">About this Site</a></li>
<li><hr /></li>
<li><strong>Worldwide</strong></li>
<li><a href="#">Microsoft Worldwide</a></li>
</ul> 

Notice that this code is valid XHTML. I used the UL tag with the class "microsoft" to define the style of the menu. I will be defining those styles later. The HR tags also have to be included as an element in the list, with an LI tag, or the code won't validate. The next section of the menu is the three submenus which include some more menu options. They will be coded the same as the main menu, but will have a "submenu" class. Each "submenu" also has an ID attribute that relates to the ID's we used earlier on the main menu. The code looks like this:

<ul class="submenu" id="VsupportMenu">
<li><a href="#">Support Home</a></li>
<li><a href="#">Knowledge Base</a></li>
</ul>
<ul class="submenu" id="VlearningMenu">
<li><a href="#">Training &amp; Certification</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Events</a></li>
</ul>
<ul class="submenu" id="VbusinessMenu">
<li><a href="#">Small Business</a></li>
<li><a href="#">Large Business</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Government</a></li>
<li><a href="#">Service Providers</a></li>
</ul> 

And that, my friend, is the end of the code for our menu. However, it doesn't work very well and it doesn't look good either. Next, we will be added some style, then we can make this menu functional with JavaScript.

(CSS)tyle

Now we need to define our styles for all of the items of the menu. The classes that need to be covered are "microsoft" and "submenu", those classes also include list items, as well as the hover and active pseudo-classes. The "microsoft" UL is the container of all the main menu list items, so we will need to define its properties to look like the shell of the Microsoft menu. Each item on the menu has it's own box, which will allow its button like behavior. Those are all defined here:

.microsoft {
margin-left: 0px;
list-style-type: none;
display: block;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 205px;
padding: 3px;
}
.microsoft li a {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 197px;
padding: 3px;
margin: auto;
text-decoration: none;
}
.microsoft li a:hover {
background-color: #cccccc;
border: 1px solid #999999;
  }
.microsoft li a:active {
background-color: #999999;
border: 1px solid #999999;
}
.microsoft hr {
width: 200px;
color: #999999;
height: 1px;
}
.microsoft strong {
line-height: 20px;
}
.submenu {
visibility: hidden;
display: block;
position: absolute;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #666666;
width: 150px;
padding: 3px;
margin-left: 0px;
list-style-type: none;
}
.submenu li a {
margin-left: 0px;
list-style-type: none;
display: block;
padding: 3px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #000000;
vertical-align: middle;
background-color: #f1f1f1;
border: 1px solid #f1f1f1;
width: 142px;
padding: 3px;
margin: auto;
text-decoration: none;
}
.submenu li a:hover {
background-color: #cccccc;
border: 1px solid #999999;
}
.submenu li a:active {
background-color: #999999;
border: 1px solid #999999;
}

Notice the use of list-style-type attribute, which gets rid of the bullets; and the display attribute, which makes each item it's own block. The rest of the CSS should be self-explanatory if you've ever worked with it.

JavaScript to the Rescue

The submenus will remain hidden until we call upon them to be visible. I used a slight of JavaScript by accessing the power of the DOM. The code is simple, but it allows the power we need. If a user highlights one of the submenu options, the submenu will be shown. When the user doesn't select anything the submenus will disappear. We first access the element by ID, then wait for a mouseover event to trigger the visibility of the submenu. The script looks like this:

<script type="text/javascript">
<!--
window>

Gimme that Code
Now, we have everything we need.  Put it all together and you have a fully-compliant, valid, and accessible Microsoft navigation menu.  The menu uses XHTML, CSS, and JavaScript and it works in all browsers.  If you'd prefer, get the entire page's code here: 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <title>Standards Compliant Microsoft Menu</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" 
  />
<meta name="author" content="Steve Taylor" />
<meta http-equiv="Content-Style-Type" content="text/css"/>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>

  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  <meta http-equiv="Content-Language" content="en-us"/>
<script type="text/javascript">
  <!--
  window>

You'll notice that the submenu lists were not embedded into the main menu. This was done because of a rendering flaw in IE. It adds extra space after it reads a </ul> tag. If anyone knows a fix, please let me know

Next...
Next, time we will recreate the menu in the upper right hand corner.  We will employ the same techniques as were used in this menu, with a twist.  The menu is inline and has dropdown sub menus.  So be sure to tune in for episode two.  Until next time.