Menu en accordéon à centrer
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Menu en accordéon à centrer
Bonjour, bonsoir,
Je sais que le sujet a déjà été moult fois posé, mais après avoir passé près d'une heure à parcourir le web je me suis résolu à demander de l'aide.
J'ai installé sur mon forum un message d'accueil en accordéon, en utilisant un autre code que celui du Forum des Forums. Or cet accordéon refuse obstinément de se centrer... Aussi, si une âme charitable voulait bien se pencher sur mon cas, ce serait très gentil à elle ! ^^
Mon forum : http://sanctumspiritum.forums-actifs.com/
Le CSS de l'accordéon :
Je vous remercie d'avance !
Je sais que le sujet a déjà été moult fois posé, mais après avoir passé près d'une heure à parcourir le web je me suis résolu à demander de l'aide.
J'ai installé sur mon forum un message d'accueil en accordéon, en utilisant un autre code que celui du Forum des Forums. Or cet accordéon refuse obstinément de se centrer... Aussi, si une âme charitable voulait bien se pencher sur mon cas, ce serait très gentil à elle ! ^^
Mon forum : http://sanctumspiritum.forums-actifs.com/
Le CSS de l'accordéon :
- Spoiler:
- /* REGLAGES DE L ACCORDEON */
.accordion {
text-align: left;
font: 'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}
/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
figcaption {
padding: 0px 0px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 3;
background: none;
background: none;
}
Je vous remercie d'avance !
Dernière édition par Xude le Sam 12 Jan 2013 - 22:20, édité 1 fois
Re: Menu en accordéon à centrer
Je me permet de remettre ce message d'actualité :3
Re: Menu en accordéon à centrer
Encore un petit up o/
(Désolé, ça ne fait pas exactement 24h que j'ai posté le message précédent, mais je préfère le faire maintenant avant d'oublier)
J'en profite pour vous mettre CSS, HTML et JavaScript, on ne sait jamais d'où un tel problème peut venir ^^
(Désolé, ça ne fait pas exactement 24h que j'ai posté le message précédent, mais je préfère le faire maintenant avant d'oublier)
J'en profite pour vous mettre CSS, HTML et JavaScript, on ne sait jamais d'où un tel problème peut venir ^^
- CSS ENTIER:
- .forumline{
background-color: ##EFEFEF;
border-bottom: 6px #EFEFEF solid;
border-top: 1px #EFEFEF solid;
border-right: 1px #EFEFEF dotted;
border-left: 1px #EFEFEF dotted;
-webkit-box-shadow: 0px 0px 5px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 5px 1px #B0B2B4;
box-shadow: 0px 0px 5px 1px #B0B2B4;
}
.bodyline {
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}
/* ZONE DE SAISIE */
#text_editor_textarea{
color: #545454;}
u{border-bottom: 1px solid;border-color:#CBCBCB;text-decoration: none;}
I{border-bottom:none; color:#7A5E5E;text-decoration: none}
a {
color: #CDCDCD;
font-family: tahoma;
text-decoration: none!important;
font-variant: small-caps;
}
a:hover {
color: red;
font-family: tahoma;
text-decoration: none!important;
font-variant: small-caps;
}
.quote{
color: #383438;
line-height: 125%;
background-color: #EFEFEF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
.quote:hover{
color: #383438;
line-height: 125%;
background-color: #F7F7F7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 5px;
}
.code{
font-family: tahoma;
font-size: 12px;
color: #C3C3C3;
line-height: 125%;
background-color: #EFEFEF;
border-top: 3px #CCCCCC solid;
border-bottom: 5px #CCCCCC solid;
border-right: 1px #CCCCCC solid;
border-left: 1px #CCCCCC solid;
-moz-border-radius:6px;
padding: 5px
}
.profavatar img { /* profil personnalisé */
background-color : #FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding : 5px;
margin-top : - 10px;
margin-bottom : - 10px;
margin-left : 10px;
margin-right : 10px;
font-face: Tahoma;
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}
.profbouton { /*bouton du profil*/
background-color : #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding : 10px;
margin : 10px;
text-align : center;
-webkit-box-shadow: 0px 0px 10px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 10px 1px #B0B2B4;
box-shadow: 0px 0px 10px 1px #B0B2B4;
}
textarea { /* fiche de jeux de rôles :p */
color: #CCCCCC;
font-face: tahoma;
}
.lastpost{ /* personnalisation de "messages : 10 | sujets : 2" */
padding: 5px;
font-family: Tahoma;
font-size: 10px;
width: 150px;
background: #EFEFEF;
color: #C6C6C6;
border: 1px solid #C6C6C6;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-o-border-radius: 5px;
}
.lastpost:hover { /* idem ! */
-webkit-box-shadow: 0px 0px 5px 1px #B0B2B4;
-moz-box-shadow: 0px 0px 5px 1px #B0B2B4;
box-shadow: 0px 0px 5px 1px #B0B2B4;
}
.categories{ /* personnalisation des catégories */
padding: 5px;
font-family: Tahoma;
font-size: 10px;
background: #EFEFEF;
color: #C6C6C6;
border: 1px solid #C6C6C6;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-o-border-radius: 5px;
}
#newbottom /* footer */
{
clear: both;
background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
background-repeat: no-repeat;
background-position: center;
}
/* titres définis */
.titre1{
font-family: Georgia;
letter-spacing: -1px;
color: #332326;
text-shadow: 0px 0px 3px #332326;
}
.titre1:hover{
font-family: Georgia;
letter-spacing: -1px;
color: red;
text-shadow: 0px 0px 5px #ffffff;
cursor: ne-resize;
}
.titregrand{
font-family: Georgia;
letter-spacing: -1px;
color: #332326;
text-shadow: 0px 0px 3px #332326;
}
.titregrand:hover{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
cursor: ne-resize;
font-variant: small-caps;
}
.titregrand2{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
font-variant: small-caps;
font-size: 18pt;
}
.titregrand2:hover{
font-family: Georgia;
letter-spacing: 2px;
color: red;
text-shadow: 0px 0px 3px #929292;
font-variant: small-caps;
text-decoration: underline;
}
/* fin des titres */
/* cadre spécial (images PA */
.cadrespe{
border: 1px solid white;
padding: 3px;
align: left;
font-family: arial;
text-align: justify;
}
.cadrespe:hover{
border:1px dashed red;
align: left;
}
/* cadre prédef */
.cadre1{
border-left: 3px solid red;
text-align: justify;
padding: 5px;
left: 100px;
font-family: georgia;
}
.navig {
position: absolute;
top: 0px;
width: 100%;
background-color: #FFFFFF;
position: fixed;}
.mainmenu[href="/faq"]{display:none;}
.mainmenu[href="/calendar"]{display:none;}
body{
background-position: top center;
}
#description
{
color: #000000; /*mettre ici la couleur */
font-size: 12px; /*remplacer X par le nombre de pixel voulu*/
font-family: "Courier New", serif; /*remplacer POLICE par la police voulue. Si la police est composée de plusieurs mots, la mettre entre "" */
}
/* REGLAGES DE L ACCORDEON */
.accordion {
text-align: left;
font: 'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}
/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
.stats2 {
text-align: justify;
padding:10px;
width:320px;}
.stats2 {
border-left : 1px dotted #000000 ;
-moz-border-radius: 25px 25px 15px 15px;
-webkit-border-radius: 25px 25px 15px 15px;
text-align: justify;
padding:10px;
width:320px;}
.listeconnected td { background-color: transparent;
text-align:justify;}
- CSS ACCORDÉON:
- /* REGLAGES DE L ACCORDEON */
.accordion {
text-align: left;
font: 'Helvetica Neue', Verdana, Arial, sans-serif;
}
.accordion ol {
position: relative;
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
.accordion li > h2 {
color: black;
font-weight: normal;
margin: 0;
z-index: 2;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
-ms-transform: translateX(-100%) rotate(-90deg);
-ms-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion li > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
}
.accordion li > h2 b {
display: inline-block;
position: absolute;
top: 10%;
top: 42%\9;
left: 10%;
left: 5%\9;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion li > h2:hover {
cursor: pointer;
}
.accordion li > div {
height: 100%;
position: absolute;
top: 0;
z-index: 1;
overflow: hidden;
background: white;
}
.accordion noscript p {
padding: 10px;
margin: 0;
background: white;
}
/* LE STYLE DE L ACCORDEON */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark li > h2 {
background: #030303;
font-family: Arial;
font-size: 16px;
line-height: 2.7em;
text-shadow: 0 -1px 0 #030303;
}
.dark li > h2 span {
background: #353535;
color: white;
}
.dark li > h2 b {
background: #353535\9;
color: #030303;
font-size: 20px;
text-shadow: -1px 1px 0 #5b5b5b;
}
.dark h2.selected span, .dark h2.selected span:hover {
background: #434343;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #353535), color-stop(1, #555555));
background: -moz-linear-gradient(top left, #353535 0%, #555555 100%);
}
.dark h2.selected b {
background: #434343\9;
}
.dark li > div {
background: #030303;
margin-left: 5px;
}
/* LES ARRONDIS */
.rounded {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.rounded li > h2 span {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* LA LEGENDE */
figure {
display: block;
width: 100%;
height: 100%;
margin: 0
}
- HTML ACCORDÉON:
- <div style="margin:auto;text-align:center;width:100%"><img src="https://2img.net/h/oi50.tinypic.com/wjdoqa.png" border="0" alt="" /></div>
<br>
<center><select style="width: 268px;" onchange="location = this.value">
<option selected="selected">Navigation rapide</option>
<option value="url1-de-renvoi">choix 1</option>
<option value="url2-de-renvoi">choix 2</option>
<option value="url3-de-renvoi">choix 3</option>
<option value="url4-de-renvoi">choix 4</option>
</select></center>
<br>
<br><div style="position: relative; width: 800px; margin: 5px auto;">
<div id="one" class="accordion">
<ol>
<li>
<h2><span>Bienvenue !</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(https://2img.net/h/oi47.tinypic.com/s0x1tl.jpg); -moz-border-radius: 46px 46px 7px 7px">
<br>
<br>
<center><table><tr><td><div style="border: 1px dashed;border-color:#ffffff;width: 360px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><div style="text-align: center; color: black; text-shadow: 0px 0px 3px white; font-size: 40px; font-family: georgia; margin-top: -20px; line-height: 24px;">Genèse
</div><div style="height:170px; overflow:auto; ">BLABLA</div></font></div></div></td><td><div style="border: 1px dashed;border-color:#ffffff;width: 170px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><font color=#3C3C3C><div style="text-align: center; color: black; text-shadow: 0px 0px 3px white; font-size: 40px; font-family: georgia; margin-top: -20px; line-height: 24px;">Évangiles
</div><div style="height:170px; overflow:auto; ">BLABLA</div></font></div></div></td></tr></table></center>
<br>
<br>
<center><table><tr><td><div style="border: 1px dashed;border-color:#ffffff;width: 475px; background-color: rgba(255, 255, 255, 0.5); padding: 2px; -moz-border-radius: 5px 5px 5px 5px;"><div style="font-family: arial; line-height:11px; text-align: justify;"><div style="text-align: right; color: black; text-shadow: 0px 0px 3px white; font-size: 20px; font-family: georgia; margin-top: -20px; line-height: 24px;">Priez pour nous !
</div><div style="height:50px; overflow:auto; ">Priez pour nous !
</div></font></div></div></td></tr></table></center>
</div>
</figure>
</div>
</li>
<li>
<h2><span>Actualités et Events</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(https://2img.net/h/oi50.tinypic.com/11uyfma.jpg); -moz-border-radius: 46px 46px 7px 7px">
Whoops. <br/> C'est parfait pour les liens, maintenant je teste <br /> les retours à la ligne
</div>
</figure>
</div>
</li>
<li>
<h2><span>Staff</span></h2>
<div>
<figure><div style="width: 555px; height: 320px; opacity: 10; background-image: url(https://2img.net/h/oi45.tinypic.com/16c9mxk.jpg); -moz-border-radius: 46px 46px 7px 7px">
Some caption text goes in here... <br /> Parfait pour les liens et retour à la ligne, alors testons les div<div style="border: 3px solid #CC0000; padding: 5px; background: #909090; width: 300px;">Là le texte dans un div à fond gris et à bordure rouge de 300px de large</div>
</div>
</figure>
</div>
</li>
<li>
<h2><span>Postes Vacants</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(https://2img.net/h/oi48.tinypic.com/2wh3sbd.jpg); -moz-border-radius: 46px 46px 7px 7px">
Pew pew pew!
<p style="border: 5px dotted #fff; padding: 10px; width: 500px;">
Et bien toutes balises sembles fonctionner sans problème, tu pourras donc en faire ce que tu veux !
<br />
Encore un test image : <br />
<img src="https://i.servimg.com/u/f25/11/95/30/70/227.jpg" border="0" alt="" /></p>
</div>
</figure>
</div>
</li>
<li>
<h2><span>Partenaires</span></h2>
<div>
<figure>
<div style="width: 555px; height: 320px; opacity: 10; background-image: url(https://2img.net/h/oi48.tinypic.com/2ufsy7o.jpg); -moz-border-radius: 46px 46px 7px 7px">
More caption text here!<p style="border: 2px solid #ff8888; padding: 7px; color: #CC0000; width: 300px; background-position: right;">Dur à comprendre au départ car les explications sont en anglais, mais il est très simple une fois qu'on a le nez dedans !</p>
</div>
</figure>
</div>
</li>
</ol>
</div>
</div>
<br><br><br>
- JAVASCRIP ACCORDÉON 1:
- /*************************************************
*
* project: liteAccordion - horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/horizontal-accordion-jquery-plugin
* demo: http://www.nicolahibbert.com/demo/liteAccordion
*
* Version: 1.1.3
* Copyright: (c) 2010-2011 Nicola Hibbert
*
/*************************************************/
;(function($) {
$.fn.liteAccordion = function(options) {
// defaults
var defaults = {
containerWidth : 800,
containerHeight : 320,
headerWidth : 48,
firstSlide : 1,
onActivate : function() {},
slideSpeed : 800,
slideCallback : function() {},
autoPlay : false,
pauseOnHover : false,
theme : 'basic', // basic, light*, dark, stitch*
rounded : false,
enumerateSlides : false
},
// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),
// define key variables
$accordion = this,
$slides = $accordion.find('li'),
slideLen = $slides.length,
slideWidth = settings.containerWidth - (slideLen * settings.headerWidth),
$header = $slides.children('h2'),
// core utility and animation methods
utils = {
getGroup : function(pos, index) {
if (this.offsetLeft === pos.left) {
return $header.slice(index + 1, slideLen).filter(function() { return this.offsetLeft === $header.index(this) * settings.headerWidth });
} else if (this.offsetLeft === pos.right) {
return $header.slice(0, index + 1).filter(function() { return this.offsetLeft === slideWidth + ($header.index(this) * settings.headerWidth) });
}
},
nextSlide : function(slideIndex) {
var slide = slideIndex + 1 || settings.firstSlide;
// get index of next slide
return function() {
return slide++ % slideLen;
}
},
play : function(slideIndex) {
var getNext = utils.nextSlide((slideIndex) ? slideIndex : ''), // create closure
start = function() {
$header.eq(getNext()).click();
};
utils.playing = setInterval(start, settings.cycleSpeed);
},
pause : function() {
clearInterval(utils.playing);
},
playing : 0,
sentinel : false
};
// set container heights, widths, theme & corner style
$accordion
.height(settings.containerHeight)
.width(settings.containerWidth)
.addClass(settings.theme)
.addClass(settings.rounded && 'rounded');
// set tab width, height and selected class
$header
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1).addClass('selected');
// ie
if ($.browser.msie) {
if ($.browser.version.substr(0,1) > {
$header.css('filter', 'none');
} else if ($.browser.version.substr(0,1) < 7) {
return false;
}
}
// set initial positions for each slide
$header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth;
if (index >= settings.firstSlide) left += slideWidth;
$this
.css('left', left)
.next()
.width(slideWidth)
.css({ left : left, paddingLeft : settings.headerWidth });
// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
});
// bind event handler for activating slides
$header.click(function(e) {
var $this = $(this),
index = $header.index($this),
$next = $this.next(),
pos = {
left : index * settings.headerWidth,
right : index * settings.headerWidth + slideWidth,
newPos : 0
},
$group = utils.getGroup.call(this, pos, index);
// set animation direction
if (this.offsetLeft === pos.left) {
pos.newPos = slideWidth;
} else if (this.offsetLeft === pos.right) {
pos.newPos = -slideWidth;
}
// check if animation in progress
if (!$header.is(':animated')) {
// activate onclick callback with slide div as context
if (e.originalEvent) {
if (utils.sentinel === this) return false;
settings.onActivate.call($next);
utils.sentinel = this;
} else {
settings.onActivate.call($next);
utils.sentinel = false;
}
// remove, then add selected class
$header.removeClass('selected').filter($this).addClass('selected');
// get group of tabs & animate
$group
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed, function() { settings.slideCallback.call($next) })
.next()
.animate({ left : '+=' + pos.newPos }, settings.slideSpeed);
}
});
// pause on hover
if (settings.pauseOnHover) {
$accordion.hover(function() {
utils.pause();
}, function() {
utils.play($header.index($header.filter('.selected')));
});
}
// start autoplay, call utils with no args = start from firstSlide
settings.autoPlay && utils.play();
return $accordion;
};
})(jQuery);
- JAVASCRIPT ACCORDÉON 2:
- jQuery(document).ready(function(){
jQuery('#one').liteAccordion({
onTriggerSlide : function() {
this.find('figcaption').fadeOut();
},
onSlideAnimComplete : function() {
this.find('figcaption').fadeIn();
},
autoPlay : false,
pauseOnHover : false,
theme : 'stitch',
rounded : true,
theme : 'dark',
containerWidth : 800,
containerHeight : 320,
headerWidth: 48,
firstSlide : 1,
enumerateSlides : true
}).find('figcaption:first').show();
});
Re: Menu en accordéon à centrer
Bonjour
Regarder peut être du coté
margin-left:
ou
margin
Cordialement.
Regarder peut être du coté
margin-left:
ou
margin
Cordialement.
Re: Menu en accordéon à centrer
C'est ce que j'ai fait, mais peu importe la valeur que j'y met, l'accordéon ne bouge pas ^^' Pareil pour les "position", etc... Il faut dire que je débute en codage, donc je me lance dans l'utilisation de plein de codes compliqués que je ne sais pas forcément interpréter, alors je suis assez désemparé devant un problème aussi ridicule qu'une histoire de centrage ^^'
Re: Menu en accordéon à centrer
Bonsoir
Et en enlevant
Et en enlevant
- Code:
<div style="position: relative; width: 800px; margin: 5px auto;">
Re: Menu en accordéon à centrer
Oh.
Ça fonctionne °°
Merci énormément pour ton aide, sans toi j'aurais tourné en rond pendant encore bien longtemps !
Je me sent vraiment bête, c'était une tout petite manipulation x)
Encore merci, et bonne soirée :3
Ça fonctionne °°
Merci énormément pour ton aide, sans toi j'aurais tourné en rond pendant encore bien longtemps !
Je me sent vraiment bête, c'était une tout petite manipulation x)
Encore merci, et bonne soirée :3
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum