Listless Navigation – Using CSS To Do More With Less

Published by Guest Author

The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to:

  • Code much, much less XHTML
  • Separate website formatting from content
  • Control as much of the website theme/design as the developer allows himself with one CSS file
  • Easily adapt website display to the user instead of the user adapting to the website
  • Change the display of our website for specific devices and special circumstances

The list goes on and on. The functionality to do great things with less code is there; it's up to the developer to code the XHTML to take full advantage of the power of CSS. One place I often see CSS being under-utilized is with navigation menus.

Depending on the design of your website, you may use vertical navigation or horizontal navigation. You may use both. If you're using XHTML lists, <ol>'s or <ul>'s, for your navigation, there's a good chance you're writing extra code. It's time to take advantage of CSS' display property. We're going to turn...

<div id="navigation">
	<h3>Categories</h3>
	<ul class="nav-list">
		<li><a href="/css">CSS</a></li>
		<li><a href="/html">HTML</a></li>
		<li><a href="/mootools">MooTools</a></li>
		<li><a href="/php">PHP</a></li>
		<li><a href="/xml">XML</a></li>
	</ul>
</div>

...into...

<div id="navigation">
	<h3>Categories</h3>
	<a href="/css">CSS</a>
	<a href="/html">HTML</a>
	<a href="/mootools">MooTools</a>
	<a href="/php">PHP</a>
	<a href="/xml">XML</a>
</div>

...using some very basic, cross-browser compatible CSS.

The only true advantage of using the list/list item method of structure, in this case, is that <li>'s are essentially "block" elements; they're solid containers that drop to the next line unless floated. CSS allows us to block specified elements using the display:block; property/value combination. To lose that bloated list code above, we can specify display:block; for any link (<a>) inside the navigation menu.

#navigation a { display:block; }

The above example is all you need for vertical navigation. For horizontal navigation, you will need to specify a float value, just as you would have with the list items:

#navigation a { display:block; float:left; }

That's all? Yes! In many cases, you can simply take the former <li> properties and move them to the link selector! The above code is a huge advantage to both the developer and the user because:

  • the developer can save a lot of bandwidth
  • the page downloads quicker for users
  • less code can mean faster maintenance
  • list properties wont interfere with your anchor properties

If you're not convinced or would like to see this CSS/XHTML in action, feel free to view the source code of my website at: davidwalsh.name.

Before You Comment...

My method has been criticized so I'd like to answer a few questions/comments I foresee.

1. This is ugly code!

I've never had a customer tell me my code was ugly. I have, however, been thanked for creating websites that load quickly. Remember that developers, in most cases, are the only ones who care about how your code looks. Functionality is the key.

2. It doesn't save that much code!

Think of how many times your page is downloaded by users! Think of the extra download time your javascript libraries add! All web developers should consider download time.

3. Your code doesn't degrade well.

Accessibility is always a consideration I take. If you were to turn off all CSS styles, the page would simply show links separated by a space. As good as a list? No, but still plainly readable.

In speaking with Chris, he brought up a very clever point. One could create a <h2> tag (or whichever you choose), call it "Navigation", and hide it using CSS. If CSS is turned off, the "Navigation" heading will display and it will be clear to the user that he/she is viewing the navigation.

I'd like to extend a special thank you to Chris for letting me share my method with you. I plan on monitoring comments so please share your ideas and suggestions.

David Walsh
The David Walsh Blog :: PHP, CSS, MooTools, and Everything Else
davidwalsh.name