Ce que je veux :

Une barre horizontale, placée immédiatement sous le top et présentant des liens vers diverses parties de mon blog qu'il me semble utile de rendre directement accessibles.

Plutôt que de faire un tuto général, je préfère vous en livrer un exemple commenté. On trouve sur le web plusieurs sites offrant des modèles, j'en retiendrais deux :

  • Alsacréations, dont la fréquentation est en tout état de cause recommandée pour ses nombreux tutoriels et son forum.
  • listamatic, chez css.maxdesign, également à placer dans vos signets.

Pour ma part, j'ai retenu Centred list navbar updated, un menu de Chris Hester pour Listamatic, que j'ai ensuite arrangé à ma sauce.

La source

Ordonques, placé juste en dessous du pararaphe

<p id="prelude"> ..... </p>

le contenu de cette navigation sous forme de liste :

<div id="nav-box">
   <ul>
        <li><a href="<?php dcInfo('url'); ?>">Accueil</a></li>
        <li><a href="<?php dcInfo('url'); ?>?somcat" title="Table des mati&egrave;res par cat&eacute;gorie">Sommaire</a></li>
        <li><a href="<?php dcInfo('url'); ?>?aide">Aide</a></li>
        <li><a href="<?php dcInfo('url'); ?>?infos">Infos</a></li>
    </ul>
</div>

Quelques précisions :

  • Dans cet exemple, Sommaire, Aide et Info sont chez moi des pages connexes, mais les liens pourraient tout aussi bien aller vers des billets spécifiques ou vos catégories.
  • Par souci de clarté, j'ai présenté la liste en retournant à la ligne pour chaque item, mais en fait il faut tout enchaîner pour faire face à un bug d'Internet Explorer lorsqu'il doit aligner des liens sur la même ligne.

Et maintenant la feuille de style :

/* Paramètres généraux de la boite (div) qui contient la liste : pas de marge,
* indication essentielle pour IE qui en met par défaut ; définition de la couleur
* du fond. Je réduis un peu la taille des caractères à une valeur de neuf
* dixièmes et je demande que le contenu soit aligné à droite :
*/
#nav-box {
	margin : 0;
	padding : 0;
	background-color: #cc0;
	font-weight : bold;
	font-size : 0.9em;
	text-align: right;
}
/* Paramètres généraux de la liste (ul). Toujours mes marges à zéro,
* le padding (marge intérieure) servira à dégager le texte en haut et en
* bas de 5 pixels tout en le décollant également de 1em du bord droit
* ce dernier point est indispensable pour Internet Explorer, comme on
* le verra pour #nav-box ul li a { }. list-style-type : none; déclare que
* je ne place pas de puces devant chaque item.
*/
#nav-box ul {
	margin : 0;
	padding : 5px 1em 5px 0;
	list-style-type : none;
}
/* Paramètres des liens. display : inline; donne comme instruction de ne
* pas faire de saut de ligne pour chaque item. Je redonne également une
* marge intérieure haute et basse de 5 pixels pour que les items occupent
* toute la place verticale créée pour la liste
*/
#nav-box ul li {
	display: inline;
	padding : 5px 0;
}
/* On retrouve le padding haut et bas de 5 pixels (car sinon Internet Explorer
* va n'en faire qu'à sa tête) et j'ajoute un espace latéral de 1em de chaque
* côté des liens. J'indique également la couleur des caractères des liens et je
* place un bord gauche continu et blanc de 1 pixel de large. text-decoration :
* none; indique que je ne veux pas que les liens soient soulignés (ce qui serait
* le cas par défaut.
*/
#nav-box ul li a {
	color: #4b4b69;
	text-decoration: none;
	padding : 5px 1em 5px 1em;
	border-left: 1px solid #fff;
}
/* Ici, ce qui se passe au survol des liens : changement de la couleur du fond,
* de la couleur des caractères, je n'oublie pas de remettre à ce lien survolé le
* bord gauche que j'ai défini pour les liens « au repos ».
*/
#nav-box ul li a:hover {
	background-color: #4b4b69;
	color: #d9d940;
	border-left: 1px solid #fff;
}
/* Le comportement des liens activés. Pour l'instant ne marche pas : le lien une
* fois cliqué ne semble pas acquérir l'état actif... Si quelqu'un sait pourquoi ?
*/
#nav-box a:active {
	border-left: 1px solid #fff;
}

Voilà, vous savez tout sur la réalisation de cette petite barrette logée sous le top. Attention : il ne faut pas oublier de donner au top une marge inférieure égale à 0 pour que cette barre soit collée juste en dessous.

[Mise à jour du 23/3/2005] A la suite de la lecture d'un article d'Openweb, Il y a des calques qui se perdent, j'ai corrigé le code de ce menu :

Pour la source :

Pour plus de clarté j'ai fait un retour à la ligne pour chaque lien mais pour contourner un bug d'Internet Explorer, vous devrez, si vous utilisez ce code, enchaîner toutes les lignes, à l'exception du commentaire initial.

<!-- barre de navigation horizontale -->
<ul id="nav-box">
<li><a href="<?php dcInfo('url'); ?>">Accueil</a></li>
<li><a href="<?php dcInfo('url'); ?>?somcat" title="Table des mati&egrave;res par cat&eacute;gorie">Sommaire</a></li>
<li><a href="/pages/outils">Bo&icirc;te &agrave; outils</a></li>
<li><a href="<?php dcInfo('url'); ?>?aide">Premi&egrave;re visite&nbsp;?</a></li>
<li><a href="<?php dcInfo('url'); ?>?infos">Infos</a></li>
</ul>
Pour la feuille de style :
/* --- 
NAVIGATION HORIZONTALE
--- */
ul#nav-box {
	margin : 0 0 1.5em 0;
	padding : 5px 1em 5px 0;
	list-style-type : none;
	background-color: #cc0;
	color: #4b4b69;
	font-weight : bold;
	font-size : 0.9em;
	text-align: right;
}
ul#nav-box li {
	display: inline;
	padding : 5px 0;
}
ul#nav-box li a {
	padding : 5px 1em 5px 1em;
	color: #4b4b69;
	text-decoration: none;
	border-left: 1px solid #fff;
}
ul#nav-box li a:hover {
	background-color: #4b4b69;
	color: #d9d940;
	border-left: 1px solid #fff;
}