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.


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

    Partagez
    MasculinAge : 31Message(s) : 31657

    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 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 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 2012 - 23:41, édité 2 fois


    FémininAge : 24Message(s) : 145
    A.Volk
    le Sam 12 Juil 2014 - 23:46
    Merci beaucoup ! *-*
    FémininAge : 30Message(s) : 45
    InfiniKey
    le Dim 27 Juil 2014 - 19:13
    merci beaucoup ^^
    FémininAge : 31Message(s) : 228
    Madras
    le Mar 29 Juil 2014 - 8:08
    Merci
    FémininAge : 25Message(s) : 9
    Darkshines
    le Sam 16 Aoû 2014 - 0:58
    Merci beaucoup *o*
    FémininAge : 17Message(s) : 163

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Milou
    le Mar 19 Aoû 2014 - 19:34
    Génial ! Merci !


    FémininAge : 23Message(s) : 45
    Boou
    le Ven 5 Sep 2014 - 22:48
    Merci :)
    MasculinAge : 22Message(s) : 59
    Wrung Jah
    le Ven 5 Sep 2014 - 22:58
    Merci :)
    FémininAge : 24Message(s) : 79
    Dark Dream
    le Jeu 11 Sep 2014 - 22:11
    impressionnant merci !
    MasculinAge : 34Message(s) : 57
    John Parker
    le Mar 7 Oct 2014 - 18:17
    Merci pour ce tutoriel ! C'est très pratique !


    MasculinAge : 25Message(s) : 100
    Shaolan
    le Jeu 9 Oct 2014 - 19:01
    Merci
    FémininAge : 23Message(s) : 49

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Costati
    le Dim 12 Oct 2014 - 14:48
    Merciii
    FémininAge : 21Message(s) : 282

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Nymeria.
    le Mer 15 Oct 2014 - 1:24
    Simple et efficace, merci :)
    FémininAge : 26Message(s) : 116
    Celuna
    le Mar 28 Oct 2014 - 20:40
    C'est très joli. Merci
    FémininAge : 20Message(s) : 19
    Kimouko
    le Jeu 30 Oct 2014 - 15:46
    Merci \o
    FémininAge : 25Message(s) : 84

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Neverose
    le Mar 18 Nov 2014 - 15:11
    En espérant que ce soit le code du bonheur *w* Un gros merci


    FémininAge : 24Message(s) : 199
    Clémentine
    le Ven 21 Nov 2014 - 0:02
    Merciii ^^


    FémininAge : 25Message(s) : 472

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Dydy
    le Lun 24 Nov 2014 - 15:00
    merci du partage!


    FémininAge : 16Message(s) : 48
    Sachikou
    le Dim 14 Déc 2014 - 11:45
    Merci ! :)


    MasculinAge : 16Message(s) : 3
    Obsidian
    le Dim 28 Déc 2014 - 20:04
    Merci !
    FémininAge : 23Message(s) : 71
    BloodyMoony
    le Lun 12 Jan 2015 - 15:08
    Merci pour ce partage.


    MasculinAge : 26Message(s) : 192
    Hayate747
    le Mer 21 Jan 2015 - 18:24
    Merci !!!
    FémininAge : 24Message(s) : 125
    Amacky
    le Mar 10 Mar 2015 - 10:22
    Thank you :)
    FémininAge : 22Message(s) : 28
    Suika
    le Jeu 16 Avr 2015 - 11:22
    merci
    MasculinAge : 22Message(s) : 19
    AnarX
    le Mar 28 Avr 2015 - 13:43
    merci Wink
    MasculinAge : 23Message(s) : 119
    TiGraou
    le Ven 15 Mai 2015 - 13:02
    Merciii
    Contenu sponsorisé
    Aujourd'hui à 13:44

      La date/heure actuelle est Ven 30 Sep 2016 - 13:44