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.


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

    Partagez
    avatar
    Okhmhaka
    FémininAge : 32Messages : 31851

    le Mar 12 Juin - 22:55

    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 Jeu 28 Mar - 4:09, édité 1 fois



    avatar
    Vador
    MasculinAge : 17Messages : 63

    le Mer 13 Juin - 1:50

    Merci .
    avatar
    XxjeremixX
    MasculinAge : 21Messages : 74

    le Ven 15 Juin - 22:38

    merci ^^
    avatar
    Kakuu
    MasculinAge : 21Messages : 30

    le Sam 16 Juin - 4:01

    Merci ^^



    avatar
    mikalus
    MasculinAge : 46Messages : 92

    le Sam 16 Juin - 17:28

    Vraiment balaise !... Shocked



    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Lun 18 Juin - 11:21

    Efficace et pas chère c'est Sparrow que j'préfère ^^
    Merci :)
    avatar
    mini-mimi
    FémininAge : 21Messages : 75

    le Mar 19 Juin - 22:18

    Waouh :michi2:
    avatar
    L*
    FémininAge : 23Messages : 44

    le Mer 27 Juin - 4:31

    Merci beaucoup pour le tutoriel :)
    avatar
    Melody L
    MasculinAge : 25Messages : 22

    le Ven 29 Juin - 23:12

    Merci.
    avatar
    fregadeth
    MasculinAge : 40Messages : 80

    le Dim 8 Juil - 22:03

    merci
    avatar
    Iςħĩgø
    MasculinAge : 20Messages : 23

    le Lun 9 Juil - 3:44

    Merci !







    Le mec le + Styléééé
    Oué Je gère héhé


    avatar
    Jimmy
    MasculinAge : 22Messages : 166

    le Lun 9 Juil - 6:30

    I want to see !
    avatar
    Aynil
    FémininAge : 105Messages : 7

    le Mer 18 Juil - 16:18

    Merci pour ce tuto :love:
    avatar
    Nyan-cat
    FémininAge : 19Messages : 326

    le Mar 31 Juil - 21:40

    merci =3
    avatar
    Mymz
    FémininAge : 25Messages : 24

    le Ven 3 Aoû - 8:47

    Merci *________*



    :friends:
    avatar
    Mana'L
    FémininAge : 19Messages : 3

    le Sam 4 Aoû - 8:52

    COOL =D
    Merci !
    avatar
    Slown
    FémininAge : 22Messages : 61

    le Dim 5 Aoû - 8:01

    Merci :3
    avatar
    Invité

    le Sam 11 Aoû - 7:53

    Merci Wink
    avatar
    AlyssYui
    FémininAge : 21Messages : 25

    le Sam 11 Aoû - 20:32

    Tiens, ça va m'aider ça. Merci pour le partage.
    avatar
    Junichi Kudo
    MasculinAge : 21Messages : 80

    le Sam 11 Aoû - 20:38

    Merci pour ce tuto ^^
    avatar
    Aquaqua
    FémininAge : 23Messages : 18

    le Mar 14 Aoû - 4:00

    Merci a lot *___*



    avatar
    kiffman
    MasculinAge : 30Messages : 6

    le Mer 15 Aoû - 0:54

    Merci =3
    avatar
    HEART QUEEN
    FémininAge : 21Messages : 4

    le Mer 15 Aoû - 5:16

    Merci pour ce tutoriel *-*
    avatar
    Solitude
    FémininAge : 42Messages : 283

    le Mer 15 Aoû - 6:18

    Merci.



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    QueenDancing13
    FémininAge : 21Messages : 96

    le Mer 15 Aoû - 17:02

    J'aime :)



    Contenu sponsorisé


      La date/heure actuelle est Ven 17 Nov - 23:04