menu accordéon

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

Résolu menu accordéon

Message par luna447 le Jeu 10 Mai 2012 - 18:30

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 =)


Dernière édition par luna447 le Sam 12 Mai 2012 - 21:01, édité 1 fois

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par MySt1KxSyL3nT le Jeu 10 Mai 2012 - 18:34

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

MySt1KxSyL3nT
***

Masculin
Messages : 159
Inscrit(e) le : 30/05/2010

http://cheat-gamers.com
MySt1KxSyL3nT a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par Bloody Hope le Ven 11 Mai 2012 - 14:50


Bloody Hope
*

Féminin
Messages : 41
Inscrit(e) le : 02/05/2012

http://nozomi.forumactif.fr/
Bloody Hope a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par luna447 le Ven 11 Mai 2012 - 16:15

Merci =) je vais essayer avec ça.

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Ven 11 Mai 2012 - 18:10

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.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par luna447 le Ven 11 Mai 2012 - 18:29

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

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Ven 11 Mai 2012 - 18:35

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?

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par luna447 le Ven 11 Mai 2012 - 18:39

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é =).

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Ven 11 Mai 2012 - 19:00

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 Laughing

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par PatMax le Ven 11 Mai 2012 - 19:07

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

PatMax
****

Messages : 495
Inscrit(e) le : 04/01/2009

http://www.patmax.info
PatMax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Ven 11 Mai 2012 - 19:16

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.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par PatMax le Ven 11 Mai 2012 - 19:18

Il te suffit de le mettre sur les images directement.

PatMax
****

Messages : 495
Inscrit(e) le : 04/01/2009

http://www.patmax.info
PatMax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Ven 11 Mai 2012 - 19:20

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 Razz

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par PatMax le Ven 11 Mai 2012 - 19:34

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....

PatMax
****

Messages : 495
Inscrit(e) le : 04/01/2009

http://www.patmax.info
PatMax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par luna447 le Ven 11 Mai 2012 - 20:37

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; }

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Sam 12 Mai 2012 - 13:46

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.

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par luna447 le Sam 12 Mai 2012 - 14:28

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

luna447
Nouveau membre

Messages : 12
Inscrit(e) le : 27/03/2012

http://crystal-night.forum-invision.com/
luna447 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: menu accordéon

Message par BZH35 le Sam 12 Mai 2012 - 15:03

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

BZH35
Nouveau membre

Messages : 17
Inscrit(e) le : 11/05/2012

http://f-o-w-test.catch-forum.fr/forum
BZH35 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