CSS Navigation
Abstract
Nowadays I code all navigation menus as simple HTML lists, because it's semantically correct and easy to work with.
In this article I will show, how such a list can be nicely laid out as a navigation menu by applying standard CSS. Furthermore I will show client-side JavaScript code that analyzes the DOM-tree of the menu and modifies it to include more information that can be used to further style the menu.
A navigation is a nested list
Take the following example:
<ul>
<li><a href="1.php">Things</a></li>
<li><a href="2.php">Animals</a>
<ul>
<li><a href="2-1.php">Cani</a>
<ul>
<li><a href="2-1-1.php">Domestic dogs</a></li>
<li><a href="2-1-2.php">Wolves</a></li>
</ul>
</li>
<li><a href="2-2.php">Felidae</a>
<ul>
<li><a href="2-2-1.php">Domestic cats</a></li>
<li><a href="2-2-2.php">Wild cats</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="3.php">Humans</a></li>
</ul>
which without special styling renders as
Applying basic style
By applying some basic CSS rules such a list can be rendered a lot nicer than that. We clearly separate menu entries with lines. A visual feedback is given, when the user points the mouse on an item. The whole coloured area is clickable, not just the text.
Noteworthy:- The lines between menu items, can only be defined on the top of the LI element, because LI elements can contains lists.
- To make the lines start on the very left side, left margins and paddings must be removed from LI and UL elements.
- To make the whole ara clickable, the A element must be made a block element.
- Indentation must be implemented as margins on the A element.
- Unfortunately each indentation level must be defined separately.
The CSS used to style this menu was
div#s1 {
width: 200px; /* menu width */
}
div#s1 ul {
background-color: #036;
list-style-type: none; /* get rid of the bullets */
padding:0; /* no padding */
margin:0; /* no margin for IE either */
}
div#s1 ul li {
margin: 0;
padding: 0;
background-color: #036;
display:block;
border-top: 1px solid white; /* lines */
}
div#s1 ul li a {
display: block; /* lines extend to right, make area clickable */
color: white;
background-color: #036;
padding: 3px 3px 3px 23px;
margin:0;
text-decoration: none;
height:15px; /* hint for IE, alternatively remove whitespace from HTML */
}
div#s1 ul ul li a {
margin-left: 20px; /* indent level 1 */
}
div#s1 ul ul ul li a {
margin-left: 40px; /* indent level 2 */
}
div#s1 ul li a:hover {
color: red;
background-color: #06C; /* rollover effect */
}
Trees of nodes and leaves
Before I go on, I want to call things by their proper names. A menu hierarchy is a tree data structure. A tree consists of nodes. Every node has a parent node and may have child nodes. If a node has no child nodes, we call it a leaf.
Tree semantics
Now the menu looks nice. But it is not very usable yet. To improve usablibity we want the following:
- Highlight the currently active node.
- Collapse the tree, but open everything down to the active node
- Have bullets that indicate whether a menu has a submenu or not i.e. is a node or a leaf
In order to write CSS rules for the above features, we need more information about the LI elements. Every LI element can have the following properties:
- It can be active or not.
- It can be a node or a leaf.
- If it is a node, it can be open or closed.
Note that a closed node can never be at active (at the same time). Because when we activate a node, we automatically want it to open.
Those semantic properties should be assigned as CSS class attributes to the LI elements. Let's define the following class names.
| Class | Meaning |
|---|---|
| active | The menu entry corresponds to the current page |
| leaf | The menu entry is a leaf in the navigation tree |
| open | The menu entry is a open node whose submenus are shown |
| closed | The menu entry is a closed node whose submenu are not shown |
Analyzing the tree
The properties defined above, can be assigned automatically. We don't need to add class attributes manually. For this job we employ JavaScript code.
The Code defines a function menu_main(id). It must be passed the id of the element that contains the navigation. In our example, we just pass in the ID of the enclosing div tag. It's a good idea, to call this function through the onLoad event handler of the body tag. The HTML basically looks like so:
<body onLoad="menu_main('navigation')">
<div id="navigation">
<ul>
...
</ul>
</div>
</body>
The client-side JavaScript can of course easily be replaced by server-side logic that prints out the CSS classes on the LI elements.
Highlighting and collapsing
With all this information now available as individual classes on the LI elements, we can now write a few simple CSS rules to highlight the current active node, and collapse everything but the active branch of the tree.
div#s1 li ul, div#s1 li.open li.closed ul {
display: none; /* collapse */
}
div#s1 li.open ul {
display: block; /* expand */
}
div#s1 li.active a {
color: red; /* highlight text */
}
div#s1 li.active li a {
color: white; /* fix lower levels */
}
Bullets
We need three bullets: a leaf, an open node, a closed node. For each of them we want a variant when the node is active. We will then use them as background images on the A element. If we make the active and inactive images separate image files we need to write CSS rules that match for two classes at the same time. Actually this is possible with CSS2 like so for instance: a.leaf.active. The problem with this approach however is, that we would need 3 * 2 = 6 individual rules and (worse) IE does not support this sort of selectors.
Fortunately there is a more elegant solution. We draw the bullets for the active and the inactive state onto the same image, but in different positions. So here are the three bullet images on a blue background. The bullet's background is transparent.:
Closed: 
Open: 
As you can see, we have drawn the red version below the white version onto the same image. We can use the nifty background-position CSS property to shift the background image to the right position. This way we have accomplished orthogonality for all properties. Our final piece of CSS looks like this:
div#s1 ul li.open a {
background-image: url(bullet_open.gif);
background-repeat: no-repeat;
}
div#s1 ul li.closed a {
background-image: url(bullet_closed.gif);
background-repeat: no-repeat;
}
div#s1 ul li.leaf a {
background-image: url(bullet_leaf.gif);
background-repeat: no-repeat;
}
div#s1 li.active a {
background-position: 0px -20px;
color: red; /* highlight text */
}
div#s1 li.active li a {
background-position: 0px 0px;
color: white; /* fix lower levels */
}
When the menu entries wrap on more than one line, just separate the two images by some more transparent space. A few hundred pixels should be enough for most people.
Putting it all together
Now our CSS navigation is ready. We can include the same static HTML file with our navigation list into every page. On every page we just load the JavaScript code and call it. Automagically the menu figures out the menu structure and which one is the current entry, marks them with CSS classes and our CSS is applied by the browser's rendering engine.
Check out the ready site now.
Conclusion
I have shown a way to implement a navigation, that is completely based on a simple HTML list. I have shown how a client-side script can analyze the navigation and annotate it with CSS classes. Finally I have shown how such a list can be orthogonally styled in a flexible fashion. The CSS in this article can be used as a template whenever a vertical hierarchical navigation is needed. Tested on Mozilla 1.7.3, Firefox 1.5, IE 6, Safari and Konqueror.
Downloads
- Sample site (includes the other downloads)
automenu.jsJavaScript to analyze and CSS-enable your menu tree- CSS used in this article
Followup
In a followup article I show how to use AJAX and DOM to generate the navigation completely on the client-side without having to include the navigation into every single page.