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


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

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Ven 7 Oct - 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 CSS -


    Il faut poster un message à la suite du topic pour voir le contenu de ce cadre, et donc le code.


    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


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



    avatar
    A.Volk
    FémininAge : 25Messages : 145

    le Sam 12 Juil - 23:46

    Merci beaucoup ! *-*
    avatar
    InfiniKey
    FémininAge : 31Messages : 46

    le Dim 27 Juil - 19:13

    merci beaucoup ^^
    avatar
    Madras
    FémininAge : 32Messages : 279

    le Mar 29 Juil - 8:08

    Merci
    avatar
    Darkshines
    FémininAge : 26Messages : 10

    le Sam 16 Aoû - 0:58

    Merci beaucoup *o*
    avatar
    Milou
    FémininAge : 18Messages : 163

    le Mar 19 Aoû - 19:34

    Génial ! Merci !



    avatar
    Boou
    FémininAge : 24Messages : 46

    le Ven 5 Sep - 22:48

    Merci :)
    avatar
    Wrung Jah
    MasculinAge : 23Messages : 59

    le Ven 5 Sep - 22:58

    Merci :)
    avatar
    Dark Dream
    FémininAge : 25Messages : 79

    le Jeu 11 Sep - 22:11

    impressionnant merci !
    avatar
    John Parker
    MasculinAge : 35Messages : 57

    le Mar 7 Oct - 18:17

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



    avatar
    Shaolan
    MasculinAge : 26Messages : 104

    le Jeu 9 Oct - 19:01

    Merci
    avatar
    Costati
    FémininAge : 24Messages : 49

    le Dim 12 Oct - 14:48

    Merciii
    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Mer 15 Oct - 1:24

    Simple et efficace, merci :)
    avatar
    Celuna
    FémininAge : 27Messages : 124

    le Mar 28 Oct - 20:40

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

    le Jeu 30 Oct - 15:46

    Merci \o
    avatar
    Neverose
    FémininAge : 26Messages : 84

    le Mar 18 Nov - 15:11

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



    avatar
    Clémentine
    FémininAge : 25Messages : 205

    le Ven 21 Nov - 0:02

    Merciii ^^



    avatar
    Dydy
    FémininAge : 27Messages : 490

    le Lun 24 Nov - 15:00

    merci du partage!



    avatar
    Sachikou
    FémininAge : 17Messages : 48

    le Dim 14 Déc - 11:45

    Merci ! :)



    avatar
    Obsidian
    MasculinAge : 17Messages : 3

    le Dim 28 Déc - 20:04

    Merci !
    avatar
    BloodyMoony
    FémininAge : 25Messages : 76

    le Lun 12 Jan - 15:08

    Merci pour ce partage.
    avatar
    Hayate747
    MasculinAge : 27Messages : 196

    le Mer 21 Jan - 18:24

    Merci !!!
    avatar
    Amacky
    FémininAge : 25Messages : 129

    le Mar 10 Mar - 10:22

    Thank you :)
    avatar
    Suika
    FémininAge : 23Messages : 29

    le Jeu 16 Avr - 11:22

    merci
    avatar
    AnarX
    MasculinAge : 23Messages : 19

    le Mar 28 Avr - 13:43

    merci Wink
    avatar
    TiGraou
    MasculinAge : 24Messages : 224

    le Ven 15 Mai - 13:02

    Merciii
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Oct - 23:58