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. [...] 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. [...]

  2. [...] 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. [...]

  3. [...] 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. [...]

  4. [...] site 5thirtyone.com publicou um artigo com uma ótima solução em CSS para quem precisa criar um menu de opções com [...]

  5. [...] 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. [...]

  6. [...] How-to create a “Table of Contents” NavigationIn as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be [...]

  7. [...] How-to create a “Table of Contents” NavigationIn as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be [...]

  8. [...] if you turn off styles — is the extractable semantics with the headings and paragraphs used. 32. 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 [...]

  9. [...] How-to create a “Table of Contents” Navigation [...]

  10. [...] How-to create a “Table of Contents” NavigationIn as little as 8 lines of HTML, and 5 lines of CSS, the Table Of Contents Navigation block can be [...]

  11. [...] if you turn off styles — is the extractable semantics with the headings and paragraphs used. 32. 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 [...]

  12. [...] 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 [...]

  13. [...] 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 [...]

  14. [...] contents (minus the table in the code, of course). I believe the original is Derek Punsalan’s How to Create a Table of Contents Navigation. For a recent project I wanted to style a list of wordpress based categories in this way, with the [...]

  15. Jeff says:

    I downloaded and attempted to configure the TOC, but it’s in the center of the page. How do I get it to be left aligned?

    Thanks,
    Jeff

  16. Mike says:

    Just a heads up the following is missing a colon.

    This
    #toc li span {float:right;background:#FFF; padding 0 0 0 4px;}

    Should be
    #toc li span {float:right;background:#FFF; padding: 0 0 0 4px;}

    I know picky but…

  17. Richard Ash says:

    I am trying to implement this on my site and everything is in place except for the line created by dot.gif it only show on the left underneath the text of the TOC. You can see it at http://www.richardandshannon.com/wedding.html
    Look under the “Wedding Entourage” title to see what I am referring to.
    If you need any more information let me know and thank you all in advance for the help and thank you for the creator of this site for the examples and code.

  18. Richard Ash says:

    I tried it again no lines or dots still. I can’t figure it out. Maybe you can. Thanks for your help.

    • Derek says:

      First of all, try changing your markup to something valid. Your #toc li elements are li2’s. I tried changing one of the list items and an image popped up.