http://css.maxdesign.com.au/listamatic/
Un exemple de Dorian
http://www.3studio.org/blog.php?id_blog=36&id_article=296
http://www.simplebits.com/bits/minitab_shapes.html
La CSS
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}
/* rounded */
#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#nav a:link.active, #nav a:visited.active, #nav a:hover {
color: #000;
background: url(../images/tab_rounded.gif) no-repeat bottom center;
}Ce qui donne en code source
<div class="container">
<ul id="nav">
<li><a href="#">brie</a></li>
<li><a href="#" class="active">cheddar</a></li>
<li><a href="#">gorgonzola</a></li>
<li><a href="#">colby</a></li>
<li><a href="#">ricotta</a></li>
<li><a href="#">mascarpone</a></li>
</ul>
</div>Boucle SPIP
<div class="container">
<ul id="nav">
<BOUCLE_rub(RUBRIQUES){tout}{par titre}>
<li><a [(#EXPOSER|class=active)] href="#URL_RUBRIQUE">#TITRE</a></li>
</BOUCLE_rub>
</ul>
</div>