Titre: [Résolu] Tab reseaux sociaux bord de page
Posté par: ludozme le le 09-10-2010 a 09:11:02
Salut à toute la communauté,
Je suis à la recherche d'un code (je presume en javascript) afin de pouvoir mettre une sorte d'onglet en bord de page qui, lorsqu'on le survole s'affiche pour faire apparaitre les icones des reseaux sociaux facebook, twitter, etc .... Vous trouverez un exemple sur ce site (bord de page gauche) : http://www.uaredesign.com/.
Merci d'avance pour votre aide
|
Titre: Re:Tab reseaux sociaux bord de page
Posté par: Pad le le 09-10-2010 a 15:44:44
| c'est un système créé par le développeur du site... je pense pas que tu puisse le retrouver sous forme de script à installer sur ton site. Regarde plutôt la source du code du site pour comprendre comment il a procédé ;) |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: ludozme le le 09-10-2010 a 18:28:24
Merci Pad, j'ai le nez dedans depuis le début de l'apres midi mais j'y pige pas grand chose . Je continu de chercher.
J'ai deja vu un système un peu similaire mais je ne sais plus sur quel site .. c un peu ballot ;)
Si quelqu'un trouve un truc dans ce genre en surfant, merci de laisser l'URL pour que je puisse jeter un œil.
@+ |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: Pad le le 10-10-2010 a 00:59:06
voici une partie du code, manque encore le css sur chaque bloc et il faut utiliser la bibliothèque scriptaculous
Code:
<div id="social-wrapper" >
<div id="social-close"></div>
<div id="social-bullet" style="display:block"></div>
<div id="social-links" style="display:none">
<a href="http://www.facebook.com/uaredesign?v=wall" id="social-fb" target="_blank"></a>
<a href="http://twitter.com/UareDesign/" id="social-twitter" target="_blank"></a>
<a href="http://www.uaredesign.com/rss/catalog/new/?___store=french" id="social-rss" target="_blank"></a>
</div>
</div>
<script type="text/javascript">
var socPos = false;
$('social-close').observe('click', function() {
var el = $('social-wrapper');
if(socPos){
$('social-close').style.backgroundPosition = "0 0";
new Effect.Move(el,{x: -20, mode: 'relative', duration: 0.3});
$('social-links').hide();
new Effect.Appear($('social-bullet'),{duration:0.3});
socPos = false;
}
else {
$('social-close').style.backgroundPosition = "0 -15px";
new Effect.Move(el,{x: 20, mode: 'relative', duration: 0.3});
$('social-bullet').hide();
new Effect.Appear($('social-links'),{duration:0.3});
socPos = true;
}
});
</script>
|
|
|
Titre: Re:Tab reseaux sociaux bord de page
Posté par: ludozme le le 10-10-2010 a 09:22:57
Je viens de trouver la partie CSS et les images qu'il me faut
Code:
div#social-wrapper{
background:url(/img/social-bg.png) no-repeat;
position:fixed;
top:230px;
left:-20px;
width:44px;
height:156px
}
div#social-wrapper
a{
display:block;
height:28px;
width:28px;
background:url(/img/social-icons.png) no-repeat;
margin:10px 0 0 5px
}
div#social-wrapper
div#social-links{}
div#social-wrapper
div#social-bullet{
height:104px;
width:12px;
background:url(/img/social-bullet.png) no-repeat;
margin:13px 0 0 24px
}
div#social-wrapper
a#social-fb{
background-position:0 0
}
div#social-wrapper
a#social-twitter{
background-position:0 -28px
}
div#social-wrapper
a#social-rss{
background-position:0 -56px
}
div#social-wrapper
a#social-fb:hover{
background-position:-28px 0
}
div#social-wrapper
a#social-twitter:hover{
background-position:-28px -28px
}
div#social-wrapper
a#social-rss:hover{
background-position:-28px -56px
}
div#social-wrapper
div#social-close{
height:15px;
width:15px;
background:url(/img/social-close.png) no-repeat 0 0;
margin-left:31px;
cursor:pointer
}
|
|
Je pense qu'il me manque encore le fameux scriptaculous qui permet de faire fonctionner tout cela et là, je dois dire que je nage complétement. :o |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: Pad le le 10-10-2010 a 14:15:23
| tout te sera expliquer en tapant sur google "installer scriptaculous" ;) |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: ludozme le le 10-10-2010 a 17:39:13
YESSS !! Vraiment trop fort Pad.
Ça fonctionne mais il me manque juste les icônes des réseaux sociaux que j'ai dû rater quelque part dans le CSS.
Voila ce que ca donne : http://www.ludozme.fr
Je passerais vous dire quand ce sera opérationnel.
Merci mille fois à toi Pad ! |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: ludozme le le 10-10-2010 a 18:56:26
Et voilà, tout est OK !!
Merci Pad pour ton aide précieuse.
Si cela peut servir à quelqu'un, n'hésitez pas à suivre le fil du post. |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: wd-creation le le 11-10-2010 a 09:19:51
Tu aurais pu faire quelque chose de semblable avec jQuery,
dommage j'arrive un peu trop tard.
Pour des exemples d'Ajax : www.wd-creation.fr/V2/
(site encore en developpement ;) ).
www.wd-creation.fr |
Titre: Re:Tab reseaux sociaux bord de page
Posté par: Pad le le 11-10-2010 a 14:38:07
| Parfait ! bien joué... par contre à mon avis, niveau utilisation il faudrait peut-être permettre d'ouvrir le bloc aussi en cliquant sur la bande noire et pas que sur le mini plus... |
Titre: Re:[Résolu] Tab reseaux sociaux bord de page
Posté par: ludozme le le 11-10-2010 a 20:03:48
Oui Pad, je peux que je m'y pencherais ce week end quand j'aurais un peu de temps
.
@wd-creation : j'ai essayé de faire au plus simple dans un premier temps, je verrais par la suite si je peux bidouiller un truc en JQuery |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|