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 à ne pas rater :
Dates stocks PS5 : consoles en vente sur Carrefour et Cdiscount le 8 ...
Voir le deal

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

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

    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
    Elektra Kloo
    Elektra Kloo
    FémininAge : 32Messages : 156

    Sam 16 Mai 2015 - 8:29

    Merci
    Youmu
    Youmu
    FémininAge : 25Messages : 5

    Dim 24 Mai 2015 - 21:11

    Merci !
    Loeva
    Loeva
    FémininAge : 26Messages : 7

    Dim 7 Juin 2015 - 22:03

    Merci beaucoup !
    Pau
    Pau
    FémininAge : 30Messages : 37

    Mar 16 Juin 2015 - 11:38

    Super! merci
    Rudein
    Rudein
    FémininAge : 24Messages : 87

    Lun 29 Juin 2015 - 15:04

    merci pour le partage ! =D
    Précious'
    Précious'
    FémininAge : 23Messages : 5

    Ven 10 Juil 2015 - 20:01

    Merci beaucoup ^^
    Lamire
    Lamire
    FémininAge : 27Messages : 96

    Sam 11 Juil 2015 - 1:40

    Merci~
    Lux Caellis
    Lux Caellis
    FémininAge : 28Messages : 23

    Sam 22 Aoû 2015 - 20:58

    Merci beaucoup, c'est génial ! =D
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2433

    Sam 22 Aoû 2015 - 23:23

    Merci !!! (ノ´ー`)ノ
    Emi.
    Emi.
    FémininAge : 29Messages : 82

    Mar 8 Sep 2015 - 13:42

    merci :)
    patriciadpt30
    patriciadpt30
    FémininAge : 58Messages : 240

    Mer 18 Nov 2015 - 13:44

    Ho merci :)



    Patricia :)
    sweetheart.
    sweetheart.
    FémininAge : 33Messages : 120

    Sam 5 Déc 2015 - 23:33

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Kyu
    Kyu
    FémininAge : 21Messages : 42

    Mer 23 Déc 2015 - 18:10

    Thanks !
    Voltino
    Voltino
    MasculinAge : 26Messages : 55

    Sam 16 Jan 2016 - 2:12

    C'est cool ! Merci
    MeowLowDee
    MeowLowDee
    FémininAge : 29Messages : 72

    Jeu 28 Jan 2016 - 17:38

    Thanks
    Colyn
    Colyn
    FémininAge : 27Messages : 9

    Sam 30 Jan 2016 - 21:10

    Héhé pas mal ! Merci beaucoup ♥
    NanoiHime
    NanoiHime
    FémininAge : 22Messages : 566

    Mar 9 Aoû 2016 - 1:03

    mercii



    Nemesis
    Nemesis
    FémininAge : 29Messages : 218

    Mer 17 Aoû 2016 - 5:42

    merci **
    avatar
    Otaku♥
    FémininAge : 20Messages : 7

    Ven 19 Aoû 2016 - 14:58

    Merci



    PA en accordéon vertical [en CSS seulement !] - Page 3 Shss
    Enid.
    Enid.
    FémininAge : 27Messages : 23

    Ven 19 Aoû 2016 - 19:32

    Merci :)
    Edward Speleers
    Edward Speleers
    MasculinAge : 33Messages : 460

    Ven 19 Aoû 2016 - 21:48

    Je prend, merci



    PA en accordéon vertical [en CSS seulement !] - Page 3 Edkidd11
    navis93
    navis93
    FémininAge : 28Messages : 8

    Lun 24 Oct 2016 - 15:27

    merci :) c'est vrai que c'est super sympa de le mettre à disposition déjà :)
    Bryan241
    Bryan241
    MasculinAge : 22Messages : 9

    Sam 31 Déc 2016 - 17:01

    Merci beaucoup
    Noho
    Noho
    FémininAge : 24Messages : 34

    Mar 7 Fév 2017 - 15:26

    Super, merci !
    Nyptia
    Nyptia
    FémininAge : 29Messages : 38

    Lun 13 Fév 2017 - 1:08

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 16 Avr 2021 - 4:08