Onglet coulissant laissant apparaître un tableau CSS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglet coulissant laissant apparaître un tableau CSS

Message par Cinderella. le Mer 25 Jan 2012 - 13:25

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 Arrow



Dernière édition par Cinderella. le Jeu 26 Jan 2012 - 12:05, édité 1 fois

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

Cinderella. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet coulissant laissant apparaître un tableau CSS

Message par Dr. Karlos le Mer 25 Jan 2012 - 13:50

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.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet coulissant laissant apparaître un tableau CSS

Message par Adam_sfp le Mer 25 Jan 2012 - 14:11

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.

Adam_sfp
+ Hyperactif +

Masculin
Messages : 4157
Inscrit(e) le : 18/04/2008

http://antonyadam.1fr1.net/portal.htm
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglet coulissant laissant apparaître un tableau CSS

Message par Cinderella. le Jeu 26 Jan 2012 - 12:03

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>'); } );

Cinderella.
***

Féminin
Messages : 125
Inscrit(e) le : 13/03/2011

Cinderella. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum