par Quierra le Sam 28 Jan - 21:03
Coucou, donc là c'est basique, à toi de personnaliser et y mettre ce que tu veux.
A gauche :
Sur l'accueil, un template, une page HTML(à condition d'y inclure la librairie jQuery) :
- Spoiler:
- Code:
<div id="tfa_left_slide">
<div id="tfa_cacher_left">
<!-- DEBUT CONTENU DU SLIDE -->
<div id="content_left">
<p>
Lorem ipsum dolor sit amet, sint possim omittam vis eu.
Graeci adipisci atomorum usu ne, mea mundi reprimique
necessitatibus ut, an case dicam nusquam usu.
Est id ipsum petentium concludaturque
</p>
</div>
<!-- FIN CONTENU DU SLIDE -->
</div>
<div id="ouvrir_fermer_left"><img src="http://i45.servimg.com/u/f45/11/95/30/70/dk555d10.png" alt="" /></div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery('#tfa_left_slide').click(function()
{
if ( jQuery('#tfa_cacher_left').is(":hidden"))
{
jQuery("#tfa_left_slide").animate({left: "0px"}, 500);
jQuery("#tfa_cacher_left").css({ display: "block" });
}else{
jQuery("#tfa_left_slide").animate({left: "-235px"}, 500);
jQuery("#tfa_cacher_left").css({ display: "none" });
}
});
});
</script>
Je t'ai bien indiquée le début et fin de contenu. Tu y mets ce que tu veux, nul besoin de conserver ce div et paragraphe, mais attention de configurer les nouveaux dans ton CSS afin de supprimer les marges, indiquer une largeur, etc.
Le CSS :
- Spoiler:
/* SLIDE GAUCHE */
#tfa_left_slide{
position:fixed;
left: -235px;
top:30px;
height:200px;
width:235px;
border:1px #fff solid;
background : #575757;
border: 1px solid #000000;
magin: 0;
padding: 0;
}
/* PARTIE CACHEE */
#tfa_cacher_left{
display:none;
magin: 0;
padding: 0;
}
/* CONTENU DU SLIDE */
#content_left{
float:left;
width:200px;
margin:0;
padding:0;
}
/* PARAGRAPHE */
#content_left p{
width: 96%;
margin: 5px auto;
padding: 0;
text-align:left;
color: #fff;
}
/* IMAGE OUVRIR-FERMER(facultatif mais revoir le margin du bloc principal -css et script-) */
#ouvrir_fermer_left{
float:right;
width: 33px;
margin-right:-32px;
padding:0;
cursor: pointer;
}
A droite :
- Spoiler:
- Code:
<div id="tfa_right_slide">
<div id="tfa_cacher_right">
<div id="content_right">
<p>
Lorem ipsum dolor sit amet, sint possim omittam vis eu.
Graeci adipisci atomorum usu ne, mea mundi reprimique
necessitatibus ut, an case dicam nusquam usu.
Est id ipsum petentium concludaturque
</p>
</div>
</div>
<div id="ouvrir_fermer_right"><img src="http://i45.servimg.com/u/f45/11/95/30/70/eds24410.png" alt="" /></div>
<div style="clear:both;"></div>
</div>
<script type="text/javascript">
jQuery(function() {
jQuery('#tfa_right_slide').click(function()
{
if ( jQuery('#tfa_cacher_right').is(":hidden"))
{
jQuery("#tfa_right_slide").animate({right: "0px"}, 500);
jQuery("#tfa_cacher_right").css({ display: "block" });
}else{
jQuery("#tfa_right_slide").animate({right: "-235px"}, 500);
jQuery("#tfa_cacher_right").css({ display: "none" });
}
});
});
</script>
Le CSS :
- Spoiler:
/* SLIDE DROITE */
#tfa_right_slide{
position:fixed;
right: -235px;
top:30px;
height:200px;
width:235px;
border:1px #fff solid;
background : #575757;
border: 1px solid #000000;
magin: 0;
padding: 0;
}
/* PARTIE CACHEE */
#tfa_cacher_right{
display:none;
magin: 0;
padding: 0;
}
/* CONTENU DU SLIDE */
#content_right{
float:right;
width:200px;
margin:0;
padding:0;
}
/* PARAGRAPHE */
#content_right p{
width: 96%;
margin: 5px auto;
padding: 0;
text-align:left;
color: #fff;
}
/* IMAGE OUVRIR-FERMER(facultatif mais revoir le margin du bloc principal -css et script-) */
#ouvrir_fermer_right{
float:left;
width: 33px;
margin-left:-32px;
padding:0;
cursor: pointer;
}
Il est préférable de rassembler les scripts et les coller dans la gestion des javascripts.
Tu peux remplacer le click par hover si tu veux l'ouverture au survol.
Accueil
S'enregistrer
d'avance Quierra 
