he core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site’s menu provides the means of traversing this information set. In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered.
How do I develop a simple menu system for my Web site that is visually compelling, flexible, and easily maintainable?
Leverage Cascading Style Sheets (CSS) to produce a simple, HTML-formatted menu system built upon a flexible and maintainable architecture.
Define the Menu Links
At the core of a flexible CSS menu solution is a structured set of HTML markup for organizing the links. One of the most structured HTML elements available is the list element. For this solution, use an unordered list contained within a
div tag (
click here to download the index.htm example code). The following
div tag serves as the container for the navigation menu:
<div id="navigationBlock">
<ul>
<li> <a href="/">Home</a> </li>
<li> <a href="/products.htm">Products</a> </li>
<li> <a href="/services.htm">Services</a> </li>
<li> <a href="/careers.htm">Careers</a> </li>
<li> <a href="/about.htm">About</a> </li>
</ul>
</div>
This is convenient because it enables you to position the menu in a specific location (absolute positioning) or relative to another element on the page (relative positioning) using CSS. Relative positioning is the default, and that is sufficient for now.
The links are organized within an unordered list. As such, each link should appear on its own line and be preceded by a bullet (the default rendering provided by most browsers). This design is very flexible, allowing you to add additional menu items by simply expanding the list with another element.
The current rendering of the menu is very boring and bland (see Figure 1). Next, you will apply some CSS styling to improve the menu's aesthetics.
| Figure 1. Rendering of the Navigation Menu |
Format the Menu Text with Style
It's time to spruce up that drab list of hyperlinks. To do that, you will take away the bullets, arrange the links horizontally across the page, and add some formatting to the menu as a whole.
Bye Bye Bullets
Removing the bullets is as simple as applying a
list-style: none attribute to the list elements via CSS:
#navigationBlock ul li {
list-style: none;
}
Horizontal List
To orient the list items horizontally, use the
display: inline CSS attribute:
#navigationBlock ul li {
list-style: none;
display: inline;
}
Style the Menu
To style the menu, you format the text, set padding and margin, and draw a line across the bottom of the menu:
#navigationBlock ul {
border-bottom: 1px solid #9999AA;
font: bold 11px Verdana, Arial, sans-serif;
margin-left: 0px;
padding: 3px 0px;
}
By implementing these changes, you now have a much more visually appealing menu (see Figure 2). You could leave the menu as is, or take the instructions in the following section to further enhance the interface.
| Figure 2. Rendering of Spruced Up Navigation Menu |
