Menu esthétique avec onglets l'un au dessus de l'autre

Bonjour à tous,

Je viens de consulter ce site : http://tutsplus.com/tutorials/ et j'aime beaucoup leur menu.

Je souhaiterais créer un menu similaire et je souhaiterais donc comprendre comment leur menu a été réalisé. Les onglets peuvent se superposer et je ne sais pas comment obtenir un rendu similaire...

Est-ce que quelqu'un aurait la gentillesse de m'expliquer comment fonctionne leur menu ?

Merci d'avance pour votre aide

Salut,

ce menu en onglets fonctionne sur un principe simple :
- des styles css définis pour tous les onglets
- une class (current_page_item) appliquée sur l'onglet correspondant à la page sur laquelle on est avec un autre style css et tout particulièrement la fonction "z-index" (qui ne fonctionnerai pas sans "position:relative").

On connait tous X et Y qui sont respectivement des coordonnées horizontales et verticales sur un axe. Z, lui, c'est la coordonnée dans l'espace, dans la profondeur (arrêtez-moi si je me trompe).

Bref, z-index, c'est comme un système de calque. Tu as z-index:0 qui est le premier calque, z-index:1 qui est un deuxième calque qui se place au dessus du premier, z-index:3 qui se place au dessus du deuxième, etc etc (tu peux même utiliser des z-index négatifs).

Merci pour ces explications, leur code me parait beaucoup plus clair maintenant

<li class="current">
        <a href="mon_lien">
            <span>Onglet 1</span>
        </a>
</li>

La construction de chaque onglet me semblait bizarre.
==> chaque <li> a cette image en background :
http://tutsplus.com/wp-content/themes/tuts-premium-theme/images/nav-left.png

==> chaque <span> a cette image en background :
http://tutsplus.com/wp-content/themes/tuts-premium-theme/images/nav-center.png

==> chaque <a> a cette image en background :
http://tutsplus.com/wp-content/themes/tuts-premium-theme/images/nav-right.png

Si j'ai bien compris, la position vertical du background change en fonction de l'état de l'onglet (current, mouseover, non sélectionné) ?

En quelque sorte oui.
Ces images sont ce qu'on appelle des sprites (comprendre plusieurs images dans une seule) à partir de laquelle on en affiche une partie par le biais du css en fonction de l'état (comme tu dis : hover, focus, active).

L'architecture de l'onglet est tout de même bizarre car en hover, la css applique un changement de background sur le li et le a et la span. Ce qui aurait pu être fait seulement sur le a.

Ok. Merci pour ton aide. J'ai réussi à créer mon menu. J'ai créé 4 images correspondant aux 4 états de mes onglets (non sélectionné, current, hover et active).

Le code est un peu "bricolé" mais le résultat me convient