menu accordéon

[luna447]

Bonjour à tous, Je voudrais insérer un menu "accordéon" comme sur ce site http://www.cssplay.co.uk/menus/css3-image-slide.html#url2 (le premier) dans le message d'accueil de mon forum.

Est ce que quelqu'un peut donner un code qui y ressemble (ou celui la serait vraiment super) svp?

Merci d'avance =)

[MySt1KxSyL3nT]

Je suis aussi intéréssé ! c'est simple et utile !

[Bloody Hope]

Bonjour

Ceci pourra vous être utile : https://forum.forumactif.com/t327581-message-d-accueil-en-accordeon

[luna447]

Merci =) je vais essayer avec ça.

[BZH35]

J'ai un problème avec ce code en html d'ailleurs. Je met ça dans mon en-tête :

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
            <h2><span>Slide 1</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/SHaqP.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 2</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/v5LuU.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 3</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/VdDge.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 4</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/EwuD0.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 5</span></h2>
            <div>
              <figure>
                <img class="full" src="http://i.imgur.com/Wl1P6.jpg" alt="image" />
              </figure>
            </div>
        </li>
    </ol>
</div>

Mais, voyez vous-même ce que cela donne au final : http://f-o-w-test.catch-forum.fr/forum

Il ne prend pas la forme d'un accordéon, et montre toutes le simages, en entières.

[luna447]

(tu as mis le css?)
Pour ma part ça marche =) je suis en train de le modifier comme je le désir^^

[BZH35]

Ha oui effectivement, tu avais raison. Sinon il n'y a pas moyen de le personnaliser un peu? En changeant sa couleur de fond par exemple, ou la couleur des onglets?

[luna447]

Ben si en modifiant le css, moi perso je suis en train de le modifier pour que ça ressemble a l'exemple que j'ai donné =).

[BZH35]

J'ai beau chercher dans le CSS, étant une burne dans ce genre de lectures, je ne trouve pas du tout où modifier les couleurs

[PatMax]

Tu peux également trouvé un autre effet accordéon beaucoup moins lourds ICI

[BZH35]

J'ai été sur ton site, mais cela ne me convient pas, j'ai besoin de mettre un nom à chaque onglet de l'accordéon.

[PatMax]

Il te suffit de le mettre sur les images directement.

[BZH35]

Non, franchement je suis pas fan, de plus je veux juste changer les couleurs de base de celui que j'ai installé, rien de plus. Donc si quelqu'un peut m'indiquer où, dnas le code css, on peut modifier les couleurs

[PatMax]

Tu changes les variables color dans la partie CSS et tu verras bien à quoi elle correspondent ensuite.

C'est en faisant que l'on apprend....

[luna447]

Alors j'ai réussi a changer le premier "slide" comme sur mon exemple mais je n'arrive pas a faire pareil avec les autres =/.
(j'arrangerais les images après)


Est ce que quelqu'un pourrait me le faire svp?

html:

Code:

<div id="accordeon-pa" class="accordion">
    <ol>
        <li>
<span>
            <div>
              <a>
                <img class="full" src="http://img11.hostingpics.net/pics/611421essai.png" alt="image"/>
            </a>
            </div></span>
        </li>
        <li>
            <h2><span>Slide 2</span></h2>
            <div>
              <figure>
                <img class="full" src="http://img11.hostingpics.net/pics/326539image5.png" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 3</span></h2>
            <div>
              <figure>
                <img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 4</span></h2>
            <div>
              <figure>
                <img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
              </figure>
            </div>
        </li>
        <li>
            <h2><span>Slide 5</span></h2>
            <div>
              <figure>
                <img class="full" src="http://img11.hostingpics.net/pics/551316Night7.jpg" alt="image" />
              </figure>
            </div>
        </li>
    </ol>
</div>

CSS:

Code:

@charset 'utf-8';
/*************************************************!
*
*  project:    liteAccordion - a horizontal accordion plugin for jQuery
*  author:    Nicola Hibbert
*  url:        http://nicolahibbert.com/liteaccordion-v2/
*  demo:      http://www.nicolahibbert.com/demo/liteAccordion/
*
*  Version:    2.0.2
*  Copyright:  (c) 2010-2011 Nicola Hibbert
*  Licence:    MIT
*
**************************************************/
/****************************************** Core */
.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 .slide > h2 {
  color: black;
    font-size: 16px;   
  font-weight: normal;
  margin: 0;
  z-index: 100;
  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;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right top;
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
    display: block;
    padding-right: 8%;
    text-align: right;
    height: 90%;
    margin-top: 5px;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion .slide > h2 b {
    display: inline-block;
    position: absolute;
    top: 13%;
    left: 10%;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
    border: 3px solid #353535;
    border-bottom-width: 3px;
    padding: 5px 5px 6px 0;
    background: #000000;
    -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);
    -ms-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);
}
.accordion .slide > h2 { background: #000000; text-shadow: 0 -1px 0 #000000; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #000000; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
    background: #353535;
    background: -moz-linear-gradient(left,  #353535 0%, #555555 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(50%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 50%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 50%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 50%);
    background: linear-gradient(left,  #353535 0%,#555555 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 );
}
.accordion .slide > h2.selected b {
    background: #383838;
    background: -moz-linear-gradient(top,  #3a3a3a 0%, #363636 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
    background: -webkit-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -o-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: -ms-linear-gradient(top,  #3a3a3a 0%,#363636 100%);
    background: linear-gradient(top,  #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #000000; margin-left: 5px }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

/******************************************** FA */
.accordion figure .full { width: 1000px; height: 2000px; }

.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }

[BZH35]

Bonjour. Nouveau petit problème, que je vais illustrer avec un screen de l'autre admin de mon forum :

Comme vous voyez, on parle du bleu qui reste autour des images, car celles-ci son tronqués par une taille limite d'affichage dans le menu.

Et donc, j'aimerais savoir s'il y a moyen d'aggrandir cette taille limite? J'ai beau chercher dans le CSS, je ne trouve rien de concluant.

[luna447]

Dans le script tu trouveras, je cherche toujours de l'aide svp T.T

[BZH35]

J'ai cherché, modifié plein de trucs, mais ça ne change rien =/