Onglet coulissant laissant apparaître un tableau CSS

[Cinderella.]

Bonjour (ou bonsoir),

J'ai déjà pu observer le système d'onglets sur certaines forums, mais ici, je ne m'intéresse pas aux onglets sur la page d'accueil mais à un autre système d'onglet qui ressemble plutôt au tuto de panneau coulissant disponible sur Forumactif.
J'ai déjà regardé le tuto en détail mais je n'arrive toujours pas à comprendre comment (à la place de la chatbox) avoir des informations autres (règlement, contexte...) à l'intérieur du cadre.
Voici un exemple fait sous Photoshop pour vous éclairer.

1. L'onglet en question

Spoiler:

2. Lorsqu'on clique sur l'onglet

Spoiler:

3. Lorsqu'on re-clic sur "More", la fenêtre se renferme

Spoiler:

Par ailleurs, j'ai vu un effet assez sympathique sur le site de Deezer, lorsqu'on appuie sur le téléphone à droite (icône grise), un panneau s'ouvre assez lentement pour permettre de s'abonner, c'est cet effet "ralenti" qui m'intéresse, je suppose qu'il s'agit d'un code particulier :/

Si vous avez besoin de codes ou de templates en particulier, n'hésitez pas à demander.
Un grand merci par avance

[Dr. Karlos]

Bonjour,

Vous n'avez qu'à suivre ce tutoriel en prenant un des deux liens, soit pour la gauche ou pour la droite et remplacer "texte" par le code de votre tableau.

Vous pouvez aider de ce générateur pour la création de votre tableau. Vous n'aurez qu'à mettre <table class="votreclass"> ou <td class="votreclass"> pour faire afficher votre CSS.


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[Adam_sfp]

Bonjour

J'utilise ce script pour un panneau latéral la vitesse d'ouverture et fermeture est paramétrable...

http://www.building58.com/examples/tabSlideOut.html

Cordialement.

[Cinderella.]

Merci pour vos deux explications, j'ai choisi l'option proposée par Dr. Karlos, c'est celle qui me paraissait la plus simple.
Le résultat me satisfait, je ne vais donc pas appliquer d'effet "ralenti" comme prévu initialement.
Le résultat est plutôt probant (l'onglet est à gauche)
http://once-upon-a-time.1talk.net/

J'ai dû effectué plusieurs modifications sur le code de base fourni dans le tutoriel du panneau coulissant, le voici pour les internautes qui se poseraient la question :

Code:

jQuery(document).ready(function() { jQuery('body').append('<table cellspacing="0" cellpadding="0" style="position: absolute; top: 195px; left: 0px; z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="  box-shadow: 1px 1px 4px #555; border-radius: 0 10px 10px 0; background-color: #ad4340; width: 400px; height: 250px; display: none;" marginwidth="0" marginheight="0" frameborder="0">

mon texte

</div></td><td style="vertical-align: middle;"><img src="http://files.getwebb.org/files/c5/d4/02/74ec15c14d9de92d11947cebba2ace394c/source.png" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://files.getwebb.org/files/c5/d4/02/74ec15c14d9de92d11947cebba2ace394c/source.png\')?\'block\':\'none\';this.src=(this.src==\'http://files.getwebb.org/files/c5/d4/02/74ec15c14d9de92d11947cebba2ace394c/source.png\')?\'http://img850.imageshack.us/img850/9969/bouton2o.png\':\'http://files.getwebb.org/files/c5/d4/02/74ec15c14d9de92d11947cebba2ace394c/source.png\';"/></td></tr></table>'); } );