Panneau Latéral Coulissant

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

Résolu Panneau Latéral Coulissant

Message par Cali93110 le Sam 4 Jan 2014 - 19:03

Bonsoir à tous,

J'ai créé à partir du topic suivant un panneau latéral coulissant.
http://forum.forumactif.com/t309533-creer-un-panneau-lateral-coulissant

J'ai modifié le code afin que le panneau s'ouvre uniquement en passant le curseur dessus, sans avoir besoin de cliquer. En revanche, j'ai deux soucis :

- Le panneau ne se ferme plus une fois ouvert.
- L'image est en PNG avec fond transparent mais il y a malgré tout du blanc derrière, qui je crois bien est le blanc du panneau lui même. Je ne parviens pas à enlever le blanc à cet endroit là.

Et enfin, je souhaiterai apporter l'effet "coulissant", et non pas direct, comme actuellement.

Voici le forum, le panneau et à gauche : http://huntress-lgdc.forumactif.org

Merci d'avance pour l'aide apportée.


Dernière édition par Cali93110 le Lun 6 Jan 2014 - 20:25, édité 1 fois

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau Latéral Coulissant

Message par Cali93110 le Lun 6 Jan 2014 - 18:50

Bonsoir, une relance. Merci.

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau Latéral Coulissant

Message par [Nihil] le Lun 6 Jan 2014 - 18:53

@Cali93110 a écrit:J'ai modifié le code afin que le panneau s'ouvre uniquement en passant le curseur dessus

Pourrais tu nous fournir aussi ton code modifié s'il te plait Smile ?

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau Latéral Coulissant

Message par Cali93110 le Lun 6 Jan 2014 - 18:55

Code:
jQuery(document).ready(function () {
    jQuery('body').append('<table class="defilement" style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 480px; height: 300px; display: none;" marginwidth="0" marginheight="0" frameborder="0">
     
          En Construction.
     
      </div></td><td style="vertical-align: middle;"><img src="http://i42.tinypic.com/2vwe41v.png" onmouseover="document.getElementById(\'panneau\').style.display=(this.src==\'http://i42.tinypic.com/2vwe41v.png\')?\'block\':\'none\';this.src=(this.src==\'http://i42.tinypic.com/2vwe41v.png\')?\'http://i42.tinypic.com/2vwe41v.png\':\'http://i42.tinypic.com/2vwe41v.png\';"></td></tr></table>');
});

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau Latéral Coulissant

Message par [Nihil] le Lun 6 Jan 2014 - 19:40

Essaye en remplaçant le JS par ceci :
Code:
jQuery(document).ready(function () {
    jQuery('body').append('<div id="panneau_coulissant"><div class="contenu">En construction</div></div>');
});

Et en remplaçant le CSS par :
Code:
#panneau_coulissant {
   position: fixed;
   bottom: 50px;
   left: -480px;
   z-index:10000;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -ms-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

#panneau_coulissant:after {
   background: url("http://i42.tinypic.com/2vwe41v.png");
   width: 50px;
   height: 100%;
   content: "";
   position: absolute;
}

#panneau_coulissant:hover {
   left: 0px;
}

#panneau_coulissant .contenu {
   width: 480px;
   height: 300px;
   background-color: #ffffff;
   display: inline-block;
}

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Panneau Latéral Coulissant

Message par Cali93110 le Lun 6 Jan 2014 - 20:25

Waouh mais c'est nickel !! Deuxième fois que tu me viens en aide, chapeau franchement ! Merci beaucoup, rien à redire, tout fonctionne parfaitement. Encore merci.  I love you 

Cali93110
*****

Féminin
Messages : 510
Inscrit(e) le : 30/08/2008

http://dreamcatgraph.conceptforum.net/
Cali93110 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