Navigation coulissante jQuerry/css

[Zeste]

Bonsoir,

En fait je voudrais que quand je passe ma souris sur l'image, il se déroule en entièrement, de façon à voir mon image en son intégralité... Bien entendu quand on clique sur l'image déroulée elle nous emmène vers le lien qui est mis.

Quand elle est repliée elle ne doit pas faire plus de 1cm de large. Merci de votre aide ! ^^


CSS :

Code:

ul#bouton {
position: fixed; /* On fixe la position des boutons */
margin: 50px; /* marge extérieure */
padding: 0px; /* marge intérieure */
top: 50px; /* positionné à 50px du haut */
left: 0px; /* positionné à 0px du bord gauche */
list-style: none; /* pas de style pour la liste */
z-index: 999; /* place les boutons au dessus de tout le reste */
}

ul#bouton li {
width: 90px; /* largeur du bouton */
margin-bottom: 4px; /* marge inférieure */
}

ul#bouton li a {
display: block; /* défini en bloc */
margin-left: -75px; /* marge extérieure négative gauche */
width: 150px; /* largeur */
height: 80px; /* hauteur */
background-color:#c7cac6; /* couleur de fond */
background-repeat:no-repeat; /* répétition du fond */
background-position:center center; /* position du fond */
-moz-border-radius:0px 9px 9px 0px; /* angles arrondis */
-webkit-border-radius:0px 9px 9px 0px; /* angles arrondis */
border-radius:0px 9px 9px 0px; /* angles arrondis */
border:1px solid #323630; /* bordure */
-moz-box-shadow: 0px 0px 5px #000; /* ombre portée */
-webkit-box-shadow: 0px 0px 5px #000; /* ombre portée */
box-shadow: 0px 0px 5px #000; /* ombre portée */
opacity: 0.7; /* opacité */
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); /* opacité pour IE */
}

ul#bouton .radio a{
background-image: url("http://img85.xooimage.com/files/9/7/2/ecoute2-33f002c.png");
}

JS :

Code:

<ul id="bouton">
 
            <li class="radio"><a href="http://radio-oprpg.board.fm/index.php"></a></li>
              </ul>

        <script type="text/javascript">
            $(function() {
                $('#bouton a').stop().animate({'marginLeft':'-75px'},1000);

                $('#bouton > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                      $('a',$(this)).stop().animate({'marginLeft':'-75px'},200);
                    }
                );
            });
        </script>

[Zeste]

En fait, il y a juste à mettre les bons réglages pour que l'image s'affiche correctement au passage de la souris.

[Zeste]

Up !

[Zeste]

Up !

[Ea]

Si vous voulez qqch sur le bord de la page il suffit de faire quelque chose comme ça :

Code:

$(function(){

   $("body").append('<div id="fp920"><a href="http://radio-oprpg.board.fm/index.php"><img src="http://img85.xooimage.com/files/9/7/2/ecoute2-33f002c.png" /></a></div>');
   $("#fp920").mouseenter(function(){
     $(this).stop(true,true).animate({left:0},1000);
   }).mouseleave(function(){
     $(this).stop(true,true).animate({left:-230},1000);
   });


});

Avec ce css :

Code:

#fp920 { top: 20%; left: -230px; position: fixed; }

Pour qu'il y ait 30pixels de visibles ( vu que l'image fait 260, 260-30 = 230 ).

Si vous voulez qu'une image positionnée n'importe où s'affiche, il faudrait plus faire comme ça :
http://pastehtml.com/raw/bwyivsfg6.html

Cordialement.

ps : si c'est de l'aide pour un forum un concurrent que vous voulez, le forum de support est par là : http://goo.gl/8YBFe

[Zeste]

Yep ! Exactement ça. En fait, c'était plus simple de passer par un code JavaScript au final...