5ThirtyOne

Quite a number of months back I released the Foliage Mod WordPress theme which included a Table of Contents (TOC) styled navigation block in the header. A recent post on ScriptyGoddess prompted me to upload the download & tutorial post straight away which is what you find here.

In as little as 8 lines of HTML, and 5 lines of CSS, the TOC Navigation block can be duplicated on your own site ready for even more styling.

Sound HTML structure

Of all the possible options to choose from, ul and ol lists are a definite favorite and one of the most useful structural markup elements available. The TOC Navigation begins as an unstyled ul unordered list:

<ul id="toc">
<li><span>Chapter One</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Two</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Three</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Four</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Five</span> <a href="#">Link</a><br /></li>
<li><span>Chapter Six</span> <a href="#">Link</a><br /></li>
</ul>

Sans CSS, the unordered list retains the familiarity of a standard list of links as seen with this sample page.

CSS = Table of Contents

Using a few simple lines of CSS + a single image file, that mundane HTML list transforms into a much more familiar navigation structure similar to that found towards the front of a book or sleeve.

ul#toc {list-style:none;width:320px;}
#toc li {background:url(dot.gif) repeat-x 0 0.85em;}
#toc li a {float:left;background:#FFF;padding: 0 4px 0 0;}
#toc li span {float:right;background:#FFF; padding 0 0 0 4px;}
#toc li br {clear:both;}

With a short snippet of CSS, we remove the list-items, apply a background-image to each item, float navigation links to the left & apply a background-color to cover the background-image beneath, float the description to the right & apply a background-color to cover the background-image on the right, and finally clear each item with the br tag.

Download

The entire basic structure of and styling should take no longer than a few minutes, after which most of your time may be properly spent styling the navigation block to match your site.

HTML/CSS Table of Contents Navigation

Check out a working sample or download the code pack directly above. Feel free to use the code however you please, just don’t eat it.

Get an Online Degree in Web Design

Find out all the tips and tricks of  web authoring with an online web design degree. Worried about how going to online college will affect your schedule? Put all those worries behind you, since learning online is the best way to further your education AND keep up with real life.