guiderdoni.net

Bloc notes : spip, css, xhtml, web, standards, mac ...

Accueil > Spip > Des menu en CSS avec SPIP

Articles de cette rubrique

Articles

publie le samedi 5 novembre 2005 par Alexandra

Des menu en CSS avec SPIP

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>

Forum

Répondre à cet article

2005-2017 - Contenu en GPL http://www.guiderdoni.net - Site réalisé avec SPIP 
rechercher - plan du site - prive - alexandra.guiderdoni@gmail.com
CSS - XHTML - squelette