How-to create a "Table of Contents" Navigation

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>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span>Storm clouds looming</span> <a href="#">Chapter 2</a></li>
<li><span>Sun breaks</span> <a href="#">Chapter 3</a></li>
<li><span>Lost and confused</span> <a href="#">Chapter 4</a></li>
<li><span>The pot of gold</span> <a href="#">Chapter 5</a></li>
<li><span>Nom nom nom</span> <a href="#">Chapter 6</a></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.

#toc {
	list-style: none;
	margin-bottom: 20px;
}
#toc li {
	background: url(dot.gif) repeat-x bottom left;
	overflow: hidden;
	padding-bottom: 2px;
}
#toc a,
#toc span {
	display: inline-block;
	background: #fff;
	position: relative;
	bottom: -4px;
}
#toc a {
	float: right;
	padding: 0 0 3px 2px;
}
#toc span {
	float: left;
	padding: 0 2px 3px 0;
}

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. Check out a working sample or download the code pack directly above.

Discuss - 42 Comments

  1. Andre says:

    Ooo, that’s hawt.

  2. Derek says:

    BTW, I want to marry and make love to your new design. Bravo!

    OK. Time to get a restraining order! J/k. I stopped by your page and checked out some of your posts. You do definitely like to use those smilies.

  3. Davis says:

    Awesome! I remember wondering how to do that when I tried Foliage Mod out a while back.

    BTW, I want to marry and make love to your new design. Bravo!

  4. John says:

    Thanks Derek, this may be pretty useful in the future. Just saw this nice new layout btw.Props to you.

  5. Sam says:

    That’s a pretty creative way to lay out navigation! Thanks for the tut.

  6. […] How-to create a “Table of Contents” Navigation, Beispiel TOC Navigation Tags: CSS, Tips « Redesign der PC Professionell […]

  7. Oli says:

    Derek,

    I’ve just written a slightly different version that doesn’t rely on breakline tags to function and uses an ordered list — as you should be. The HTML is cleaner but the CSS is a little more complex.

    It also supports nested titles (as you would probably expect from a real table of contents) but so does yours… That feature is pretty partial in IE though.

    Give it a look and tell me what you think.

  8. […] clipped from 5thirtyone.com […]

  9. […] How-to create a “Table of Contents” Navigation (tags: css navigation webdesign howto table html) […]

  10. Derek says:

    Definitely cool Oli, nested Table of Contents ;)

  11. […] How-to create a “Table of Contents” Navigation Navigation wie ein Inhaltsverzeichnis gestalten […]

  12. […] Punsalan stellt einen interessanten Ansatz wie man mittels CSS ein ansprechendes Inhaltsverzeichnis realisieren kann. Dabei kommen Listen zum […]

  13. Marcos says:

    Hi!

    Nice solution.

    But you can discard the non-semantic br’s and use ‘overflow:hidden’ in the li’s instead.

    cheers!

  14. Eli says:

    Derek-

    Thanks for this tip – After a bit of trickery, I managed to implement it (here) and it looks/works great. Keep ‘em coming!

  15. […] bei Perun gefundene Methode zur Gestaltung eines Inhaltsverzeichnisses mit CSS ist ganz nett. Andererseits kommt die […]

  16. […] create a "Table of Contents" Navigation URL: 5thirtyone.com/archives/776 Descripción: 5thirtyone.com. A blog. A website. A semi-coherent receptacle for Derek Punsalan with […]

  17. […] Beispiel kann als komplettes Packet bei 5ThirtyOne runtergeladen […]

  18. […] How-to create a "Table of Contents" Navigation Eine Technik zur Erzeugung eines Inhaltsverzeichnisses mit CSS. […]

  19. […] How-to create a “Table of Contents” Navigation In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling. […]

  20. […] How-to create a “Table of Contents” Navigation In as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be integrated in your site ready for even more styling. […]