Panneau Latéral Coulissant

[Cali93110]

Bonsoir à tous,

J'ai créé à partir du topic suivant un panneau latéral coulissant.
https://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.

[Cali93110]

Bonsoir, une relance. Merci.

[[Nihil]]

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 ?

[Cali93110]

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

[[Nihil]]

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

[Cali93110]

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.