CSS List stylized as Toc

CSS List stylized as Toc

by jarnal

HTML

<body>
    <h1>TOC</h1>
    <div>
<ul id="toc">

<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming 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>


<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming 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>


<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming 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>


<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds looming Storm clouds looming Storm clouds looming Storm clouds looming 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>


<li><span>Introduction</span> <a href="#">Chapter 1</a></li>
<li><span> Storm clouds...

CSS

/* Styles go here */ 

/* Ref http://stackoverflow.com/questions/8898062/turning-an-unordered-list-into-a-table-of-contents */

/* Todo improvements, instead of dot.gif use content: leader(dotted) " " as mentioned 
    in http://alistapart.com/article/building-books-with-css3 */


/* http://jsfiddle.net/QSFyn/ */
/*
li {
    position:relative;
   background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom; 
    margin: 0 0 5px 0;
    padding: 0 0 0 3px;
}

a {
    position: absolute;
    display: inline-block;
    bottom: 0; right: 0;
    padding: 0 3px 0 0;
    background: #fff;
}
span {
    background: #fff;
   
    }
span:after {
    content:'';
    display: inline-block;
    width: 70px;
    height: 10px;
    background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom; 
   
    margin: 0 0 -5px 0;
}
*/

/*
a simpler, alernate way using float
http://jsfiddle.net/exGnZ/31/
from author  - The only downside of this technique is that it requires a fixed width to the right side (100 pixels, in this case) to work, but it's a minor trade-off.
*/

div {padding:10px;}
#toc {
    list-style: none;
    margin-bottom: 20px;
}
#toc li {
   background: url(http://5thirtyone.com/sandbox/share/toc/dot.gif) repeat-x bottom left;
    overflow: hidden;
    padding-bottom: 2px;
    padding-right: 100px;
}
#toc a,
#toc span {
    background: #fff;
    bottom: -4px;
    border-bottom:none;
}
#toc a {
    float: right;
    margin: 0px -100px -2px 0;
    padding: 0 0 3px 2px;
    width: 100px;
    
    }
/*
#toc span:after {
    content:leader(dotted) " " test;
    }

*/



ul  {
   
  
  /* http://www.w3schools.com/css/css3_multiple_columns.asp */
  
 -moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
  
  -moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
  
  -moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset...