Un menu horizontal sympathique, ce menu repose sur une feuille de style (ça c’est la partie difficile qu’on va copier) :

.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;
        }

et le code source est le suivant, extrèmement simple :

<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>

la boucle Spip permettant de générer le même code est toute aussi simple :

<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>

Tout ça pour vous rappeler qu’il est très facile avec spip d’adapter toutes ces petites perles qu’on trouve sur la toile, comme par exemple mon préféré : Listamatic.