AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -40%
-40% sur la barre de son Yamaha YAS-108
Voir le deal
179.99 €

    PA en accordéon vertical [en CSS seulement !]

    Sparrow-style
    Sparrow-style
    FémininAge : 35Messages : 32055

    le Ven 7 Oct 2011 - 18:06

    Rappel du premier message :

    Qu'est-ce que c'est ?

    Salut Very Happy

    Plus simple à utiliser et probablement à modifier que son équivalent horizontal, je vous propose dans cette astuce un accordéon vertical. Toujours entièrement en html et css sans la moindre trace de javascript, il possède des transitions douces au survol des différents titres. Et puisqu'un exemple vaut mieux qu'un long discours :

    >>> Aperçu de l'accordéon vertical <<<

    Là aussi vous pourrez changer vos couleurs ou vos images de fond, avec la possibilité de mettre une image par "onglets" si vous le souhaitez, tout comme j'ai mis une couleur différente dans l'exemple.
    Même principe pour le contenu, vous pouvez y insérer tout ce que vous voulez, images, texte, liens... Attention cependant car les images trop grandes risquent de dépasser ou d'être coupées en longueur. Cependant, vous pourrez toujours modifier la hauteur des onglets ouverts dans le css (ici ils font tous 300px, pour une meilleure harmonie il est préférable qu'ils aient la même hauteur même dépliés mais après tout si vous souhaitez qu'ils en aient une différente il faut simplement isoler les éléments en "hover".


    Les Codes


    Comme expliqué en titre et en intro, il n'y a pas de javascript dans ce code, tout est fait uniquement en CSS3, vous avez donc deux codes à afficher :

    • le premier, l'html, dans la partie du forum où vous voulez que soit votre accordéon (il peut s'agir tout simplement de la page d'accueil, mais aussi dans un template, comme par exemple si vous souhaitez vous en servir en QEEL)

    • le second, le css ou "mise en forme", vous devez le copier coller dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.


    - Code HTML -

    Code:
    <div id="pa"><div id="partie1"><span class="titre">Titre partie 1</span><div class="content">Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.</div></div><div id="partie2"><span class="titre">Titre partie 2</span><div class="content"></div></div><div id="partie3"><span class="titre">Titre partie 3</span><div class="content"></div></div><div id="partie4"><span class="titre">Titre partie 4</span><div class="content"></div></div><div id="partie5"><span class="titre">Titre partie 5</span><div class="content"></div></div>
    </div>
    <!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres ;) et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
    <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>


    - Code CSS -

    Code:

    #pa
    {
    width: 900px;
    border: 3px dotted #67523c;
    }
    #partie1
    {
    width: 900px;
    height: 40px;
    overflow: hidden;
    background-color: #b8a692;
    border-bottom: 1px dotted #877867;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie2
    {
    width: 900px;
    height: 40px;
    overflow: hidden;
    background-color: #ccbcaa;
    border-bottom: 1px dotted #877867;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie3
    {
    width: 900px;
    height: 40px;
    overflow: hidden;
    background-color: #dcd0c2;
    border-bottom: 1px dotted #877867;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie4
    {
    width: 900px;
    height: 40px;
    overflow: hidden;
    background-color: #e7e1db;
    border-bottom: 1px dotted #877867;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie5
    {
    width: 900px;
    height: 40px;
    overflow: hidden;
    background-color: #f3efeb;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    #partie1:hover, #partie2:hover, #partie3:hover, #partie4:hover, #partie5:hover
    {
    height: 300px;
    overflow: hidden;
    transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -htm-transition: 2s;
    -webkit-transition: 2s;
    }
    .titre
    {
    display: block;
    text-align: center;
    width: 900px;
    height: 40px;
    font-size: 28px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-family: courier;
    font-weight: bold;
    padding-top: 5px;
    color: #67523c;
    text-shadow: 0px 0px 2px #ffffff;
    }
    .content
    {
    width: 90%;
    margin: auto;
    border: 1px dotted #958677;
    background-color: #eceae7;
    padding: 6px;
    color: #715d47;
    font-size: 11px;
    text-align: justify;
    }




    .credit
    {
    display: block;
    text-align: right;
    margin-right: 20px;
    }
    .credit a
    {
    font-size: 10px;
    text-decoration: none !important;
    }


    Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser Wink

    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:41, édité 2 fois



    sign
    A.Volk
    A.Volk
    FémininAge : 28Messages : 145

    le Sam 12 Juil 2014 - 23:46

    Merci beaucoup ! *-*
    InfiniKey
    InfiniKey
    FémininAge : 33Messages : 58

    le Dim 27 Juil 2014 - 19:13

    merci beaucoup ^^
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Mar 29 Juil 2014 - 8:08

    Merci
    Darkshines
    Darkshines
    FémininAge : 29Messages : 10

    le Sam 16 Aoû 2014 - 0:58

    Merci beaucoup *o*
    Milou
    Milou
    FémininAge : 21Messages : 163

    le Mar 19 Aoû 2014 - 19:34

    Génial ! Merci !



    PA en accordéon vertical [en CSS seulement !] - Page 2 693002signa
    Boou
    Boou
    FémininAge : 27Messages : 50

    le Ven 5 Sep 2014 - 22:48

    Merci :)
    Wrung Jah
    Wrung Jah
    MasculinAge : 26Messages : 59

    le Ven 5 Sep 2014 - 22:58

    Merci :)
    Dark Dream
    Dark Dream
    FémininAge : 28Messages : 79

    le Jeu 11 Sep 2014 - 22:11

    impressionnant merci !
    John Parker
    John Parker
    MasculinAge : 37Messages : 58

    le Mar 7 Oct 2014 - 18:17

    Merci pour ce tutoriel ! C'est très pratique !



    PA en accordéon vertical [en CSS seulement !] - Page 2 Ange_s10
    Shaolan
    Shaolan
    MasculinAge : 28Messages : 108

    le Jeu 9 Oct 2014 - 19:01

    Merci
    Costati
    Costati
    FémininAge : 20Messages : 52

    le Dim 12 Oct 2014 - 14:48

    Merciii
    ROGERS.
    ROGERS.
    FémininAge : 25Messages : 314

    le Mer 15 Oct 2014 - 1:24

    Simple et efficace, merci :)
    Celuna
    Celuna
    FémininAge : 29Messages : 133

    le Mar 28 Oct 2014 - 20:40

    C'est très joli. Merci
    Kimouko
    Kimouko
    FémininAge : 24Messages : 19

    le Jeu 30 Oct 2014 - 15:46

    Merci \o
    Neverose
    Neverose
    FémininAge : 28Messages : 93

    le Mar 18 Nov 2014 - 15:11

    En espérant que ce soit le code du bonheur *w* Un gros merci



    PA en accordéon vertical [en CSS seulement !] - Page 2 E9SQItc
    Clémentine
    Clémentine
    FémininAge : 28Messages : 223

    le Ven 21 Nov 2014 - 0:02

    Merciii ^^



    PA en accordéon vertical [en CSS seulement !] - Page 2 9w9t
    Dydy
    Dydy
    FémininAge : 29Messages : 493

    le Lun 24 Nov 2014 - 15:00

    merci du partage!



    PA en accordéon vertical [en CSS seulement !] - Page 2 27978_signature_never_utopia_dydy_2
    Sachikou
    Sachikou
    FémininAge : 20Messages : 48

    le Dim 14 Déc 2014 - 11:45

    Merci ! :)



    PA en accordéon vertical [en CSS seulement !] - Page 2 Signa111
    Obsidian
    Obsidian
    MasculinAge : 20Messages : 3

    le Dim 28 Déc 2014 - 20:04

    Merci !
    BloodyMoony
    BloodyMoony
    FémininAge : 27Messages : 76

    le Lun 12 Jan 2015 - 15:08

    Merci pour ce partage.
    Hayate747
    Hayate747
    MasculinAge : 30Messages : 196

    le Mer 21 Jan 2015 - 18:24

    Merci !!!
    Amacky
    Amacky
    FémininAge : 28Messages : 135

    le Mar 10 Mar 2015 - 10:22

    Thank you :)
    Suika
    Suika
    FémininAge : 25Messages : 30

    le Jeu 16 Avr 2015 - 11:22

    merci
    AnarX
    AnarX
    MasculinAge : 25Messages : 19

    le Mar 28 Avr 2015 - 13:43

    merci Wink
    TiGraou
    TiGraou
    MasculinAge : 27Messages : 243

    le Ven 15 Mai 2015 - 13:02

    Merciii
    Contenu sponsorisé


      La date/heure actuelle est Mar 4 Aoû 2020 - 2:18