As the name suggests, this will be a quick post on how to make a rich menu with very little effort. In this case, we will be using Cascading Style Sheets (CSS) to do most of the heavy lifting. For years, many of us toiled with JavaScript and a load of Page content to create nice looking menu's (or even basic ones). CSS has been able to do this for a long time but some people still aren't aware of what it can do for them.
From a design pattern perspective, using CSS for a lot of this will clearly separate content from the styles that are applied to it. By keeping them separate, things are easier to test and it is easier to maintain both the design and functional aspects of your product. More practical benefits include theming sites, applying accessibility changes for users with special needs, and facilitating parallel development between those working on content, and those working on design. Our focus for this Post will be a menu, but in a manner of speaking, this is another example of Inverting our Design Control. We can term this IoDC, although I just made that up 
.
What we want for this demo is a simple horizontal navigation bar so lets start with the content. To do this we will define an unordered list (e.g. <ul>) of links to represent each menu item. The only requirement is that we list the items in the desired ordered.
<ul id=
"nav">
<li><a href=
"index.html">welcome</a></li>
<li><a href=
"about.html">about</a></li>
<li><a href=
"portfolio.html">portfolio</a></li>
<li><a href=
"contact.html">contact</a></li>
<li><a href=
"terms.html">terms</a></li>
</ul>
If we render this simple menu, it will look as follows... not so nice.
In many places I've worked, development (typically business-focused code writing) and design (typically user/marketing-focused digital arts) were divided into either separate teams or separate talent pools in the same team. If I were a developer working on this task in that kind of environment I would be finished until the designers told me they had the design material ready (Ex. CSS, graphics, and possibly even JavaScript). Before anyone says anything, I am fully aware that CSS and JavaScript are "code", but I think you get my point anyway.
The designers (or possibly the developers) will produce the requisite CSS to style the list into a nicer looking menu. This will involve association of background images and some simple manipulation of layout. If you read through this, it is pretty straight-forward and should be easy to see what is happening.
#nav {
PADDING-BOTTOM: 0px;
TEXT-TRANSFORM: capitalize;
LIST-STYLE-TYPE: none;
MARGIN: 10px 0px 20px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
DISPLAY: block;
BACKGROUND: url(nav_bar.jpg) #2e2e2e repeat-x;
HEIGHT: 33px;
FONT-SIZE: 0.9em;
OVERFLOW: hidden;
LIST-STYLE-IMAGE: none;
PADDING-TOP: 0px}
#nav LI {
DISPLAY: inline}
#nav LI A {
PADDING-BOTTOM: 10px;
PADDING-LEFT: 20px;
PADDING-RIGHT: 20px;
DISPLAY: block;
FLOAT: left;
COLOR: white;
TEXT-DECORATION: none;
PADDING-TOP: 10px}
#nav LI A:hover {
BACKGROUND: url(nav_bar_o.jpg) #1b1b1b repeat-x}
Once the design work is complete and we receive the required CSS, images, etc, you will need to add the CSS to your page or master page. In this case the CSS will be in an external file named css.css.
<!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">
<head>
<meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
<title>Sample NavBar</title>
<style type="text/css">
@import url(css.css);
</style> </head>
<body>
<ul id=
"nav">
<li><a href=
"index.html">welcome</a></li>
<li><a href=
"about.html">about</a></li>
<li><a href=
"portfolio.html">portfolio</a></li>
<li><a href=
"contact.html">contact</a></li>
<li><a href=
"terms.html">terms</a></li>
</ul>
</body>
</html>
As you can see, the mark-up of the previous page is very slim; which is really what we want. When we render the page, we get the following menu which includes both linking and hover behaviour.
As you can see this looks much better and did not take a lot of effort (e.g. cheap). More importantly, we've not cluttered up our page code with a bunch of design material. This will make maintaining and testing this code much easier.
Tags: design patterns