AccueilDernières imagesRechercherS'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 : -29%
PC portable Gamer ERAZER DEPUTY P60 – ...
Voir le deal
999.99 €

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

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

    Mer 13 Juin 2012 - 11:55

    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

    S'il y a des problèmes avec ce code, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:09, édité 1 fois



    sign
    Taoro
    Taoro
    MasculinAge : 31Messages : 78

    Mar 15 Oct 2013 - 11:02

    Merci beaucoup Very Happy



    Katil
    Katil
    FémininAge : 26Messages : 35

    Jeu 24 Oct 2013 - 19:08

    C'est beau ! MErci
    Mangockie
    Mangockie
    FémininAge : 25Messages : 40

    Lun 28 Oct 2013 - 21:13

    Merci :3
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Jeu 31 Oct 2013 - 12:51

    Merci. *-*
    Fallaha
    Fallaha
    FémininMessages : 80

    Mar 19 Nov 2013 - 0:01

    merci
    LinaK
    LinaK
    FémininAge : 33Messages : 53

    Mer 20 Nov 2013 - 14:49

    meerciiiiiiiiiiiiii



    QEEL en accordéon vertical [en CSS seulement !] - Page 5 J9ko

    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Ven 29 Nov 2013 - 22:26

    Merci !



    QEEL en accordéon vertical [en CSS seulement !] - Page 5 Ye49
    L0ok
    L0ok
    FémininAge : 27Messages : 31

    Sam 7 Déc 2013 - 18:35

    merci



    QEEL en accordéon vertical [en CSS seulement !] - Page 5 040037444bb7c3380566d
    LightGlace
    LightGlace
    FémininAge : 31Messages : 43

    Sam 7 Déc 2013 - 21:42

    merci !
    anaelscott
    anaelscott
    FémininAge : 34Messages : 22

    Mer 19 Fév 2014 - 20:31

    super ! Merci beaucoup, j'apprends énormément en lisant (et testant) les tutos !
    avatar
    jotherrien13
    MasculinAge : 31Messages : 34

    Mer 26 Fév 2014 - 23:54

    Merci
    Lee HyoJae
    Lee HyoJae
    FémininAge : 26Messages : 18

    Dim 9 Mar 2014 - 20:05

    Merci pour ce tuto ^^
    Hikaria
    Hikaria
    FémininAge : 29Messages : 14

    Lun 21 Avr 2014 - 20:43

    Merci
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Ven 25 Avr 2014 - 14:34

    merci
    Mlle Eléa
    Mlle Eléa
    FémininAge : 31Messages : 5

    Jeu 15 Mai 2014 - 19:41

    Danke schön !
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Jeu 14 Aoû 2014 - 16:34

    Merci o/



    Just want to be yours.
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Mar 26 Aoû 2014 - 13:35

    C'est plutôt sympa, merci ^-^
    Emy Liddell
    Emy Liddell
    FémininAge : 31Messages : 29

    Mar 16 Sep 2014 - 22:53

    merci!



    LHOOQ
    LHOOQ
    MasculinAge : 31Messages : 20

    Mar 23 Sep 2014 - 23:55

    Merci!
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Ven 2 Jan 2015 - 3:57

    Merci ^^
    Bunny Lune
    Bunny Lune
    FémininAge : 34Messages : 145

    Mer 4 Mar 2015 - 19:37

    Merci pour le partage
    Treasury.
    Treasury.
    FémininAge : 25Messages : 28

    Mar 7 Juil 2015 - 23:09

    mercii
    Grande
    Grande
    FémininAge : 36Messages : 207

    Lun 21 Sep 2015 - 18:37

    Merci



    QEEL en accordéon vertical [en CSS seulement !] - Page 5 171074gwenj10
    Yttel
    Yttel
    MasculinAge : 41Messages : 29

    Mer 4 Nov 2015 - 11:37

    Super !! Exactement ce que je cherchais ! ^^
    Anonymous
    Invité

    Mer 4 Nov 2015 - 13:35

    Merci pour le partage ! (*´∀`*人*´∀`*)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 9:40