Navigation coulissante jQuerry/css

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

Résolu Navigation coulissante jQuerry/css

Message par Zeste le Mar 1 Mai 2012 - 22:03

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>


Dernière édition par Daylaton le Ven 4 Mai 2012 - 20:19, édité 1 fois

Zeste
# Tropactif #

Féminin
Messages : 1366
Inscrit(e) le : 28/11/2010

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

Résolu Re: Navigation coulissante jQuerry/css

Message par Zeste le Mer 2 Mai 2012 - 15:03

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

Zeste
# Tropactif #

Féminin
Messages : 1366
Inscrit(e) le : 28/11/2010

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

Résolu Re: Navigation coulissante jQuerry/css

Message par Zeste le Jeu 3 Mai 2012 - 15:43

Up !

Zeste
# Tropactif #

Féminin
Messages : 1366
Inscrit(e) le : 28/11/2010

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

Résolu Re: Navigation coulissante jQuerry/css

Message par Zeste le Ven 4 Mai 2012 - 18:04

Up ! Lunette

Zeste
# Tropactif #

Féminin
Messages : 1366
Inscrit(e) le : 28/11/2010

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

Résolu Re: Navigation coulissante jQuerry/css

Message par Ea le Ven 4 Mai 2012 - 19:02

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

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

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

Résolu Re: Navigation coulissante jQuerry/css

Message par Zeste le Ven 4 Mai 2012 - 20:18

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

Zeste
# Tropactif #

Féminin
Messages : 1366
Inscrit(e) le : 28/11/2010

Zeste 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