Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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
    MasculinAge : 31Message(s) : 31661

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Mer 13 Juin 2012 - 11: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 2013 - 16:09, édité 1 fois


    MasculinAge : 15Message(s) : 63
    Vador
    le Mer 13 Juin 2012 - 14:50
    Merci .
    MasculinAge : 20Message(s) : 73
    XxjeremixX
    le Sam 16 Juin 2012 - 11:38
    merci ^^
    MasculinAge : 20Message(s) : 30
    Kakuu
    le Sam 16 Juin 2012 - 17:01
    Merci ^^


    MasculinAge : 45Message(s) : 92

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    mikalus
    le Dim 17 Juin 2012 - 6:28
    Vraiment balaise !... Shocked


    MasculinAge : 20Message(s) : 1719

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Soul
    le Mar 19 Juin 2012 - 0:21
    Efficace et pas chère c'est Sparrow que j'préfère ^^
    Merci :)
    FémininAge : 20Message(s) : 75
    mini-mimi
    le Mer 20 Juin 2012 - 11:18
    Waouh :michi2:
    FémininAge : 22Message(s) : 44
    L*
    le Mer 27 Juin 2012 - 17:31
    Merci beaucoup pour le tutoriel :)
    MasculinAge : 24Message(s) : 22
    Melody L
    le Sam 30 Juin 2012 - 12:12
    Merci.
    MasculinAge : 39Message(s) : 80
    fregadeth
    le Lun 9 Juil 2012 - 11:03
    merci
    MasculinAge : 19Message(s) : 23
    Iςħĩgø
    le Lun 9 Juil 2012 - 16:44
    Merci !






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


    MasculinAge : 21Message(s) : 166
    Jimmy
    le Lun 9 Juil 2012 - 19:30
    I want to see !
    FémininAge : 104Message(s) : 7
    Aynil
    le Jeu 19 Juil 2012 - 5:18
    Merci pour ce tuto :love:
    FémininAge : 17Message(s) : 326

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Nyan-cat
    le Mer 1 Aoû 2012 - 10:40
    merci =3
    FémininAge : 24Message(s) : 24
    Mymz
    le Ven 3 Aoû 2012 - 21:47
    Merci *________*


    :friends:
    FémininAge : 18Message(s) : 3
    Mana'L
    le Sam 4 Aoû 2012 - 21:52
    COOL =D
    Merci !
    FémininAge : 21Message(s) : 61
    Slown
    le Dim 5 Aoû 2012 - 21:01
    Merci :3
    Invité
    le Sam 11 Aoû 2012 - 20:53
    Merci Wink
    FémininAge : 19Message(s) : 25
    AlyssYui
    le Dim 12 Aoû 2012 - 9:32
    Tiens, ça va m'aider ça. Merci pour le partage.
    MasculinAge : 20Message(s) : 77
    Junichi Kudo
    le Dim 12 Aoû 2012 - 9:38
    Merci pour ce tuto ^^
    FémininAge : 22Message(s) : 18
    Aquaqua
    le Mar 14 Aoû 2012 - 17:00
    Merci a lot *___*


    MasculinAge : 29Message(s) : 6
    kiffman
    le Mer 15 Aoû 2012 - 13:54
    Merci =3
    FémininAge : 20Message(s) : 4
    HEART QUEEN
    le Mer 15 Aoû 2012 - 18:16
    Merci pour ce tutoriel *-*
    FémininAge : 41Message(s) : 236
    Solitude
    le Mer 15 Aoû 2012 - 19:18
    Merci.


    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    FémininAge : 20Message(s) : 75
    QueenDancing13
    le Jeu 16 Aoû 2012 - 6:02
    J'aime :)


    Contenu sponsorisé
    Aujourd'hui à 22:37

      La date/heure actuelle est Sam 1 Oct 2016 - 22:37