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 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 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



    avatar
    Cortisalia
    FémininAge : 24Messages : 88

    le Dim 19 Aoû 2012 - 23:24

    Je reviens quémander. Merci :)



    Japan S
    MasculinAge : 27Messages : 106

    le Sam 25 Aoû 2012 - 0:01

    Merci beaucoup ! :)



    Arrow
    avatar
    picka230
    FémininAge : 52Messages : 93

    le Mar 28 Aoû 2012 - 11:53

    merci Very Happy
    avatar
    Zarwins
    FémininAge : 21Messages : 152

    le Mer 29 Aoû 2012 - 8:10

    Merci =3



    avatar
    Yooachte
    FémininAge : 24Messages : 54

    le Mer 5 Sep 2012 - 18:44

    Merci beaucoup pour le code ^^
    avatar
    K.ay
    FémininAge : 25Messages : 5

    le Jeu 13 Sep 2012 - 19:04

    merci =)
    avatar
    Depp
    FémininAge : 25Messages : 297

    le Mer 26 Sep 2012 - 23:12

    Merci beaucoupppp :friends:



    avatar
    Ifshena
    FémininAge : 30Messages : 21

    le Ven 5 Oct 2012 - 12:47

    Merci
    avatar
    Motoko
    FémininAge : 18Messages : 39

    le Sam 6 Oct 2012 - 16:42

    Balaise tout ça ! :o
    avatar
    Anéa
    FémininAge : 27Messages : 156

    le Sam 13 Oct 2012 - 17:24

    Merci beaucoup, ça va énormément m'aider =)



    avatar
    xX~Miki~Xx
    FémininAge : 17Messages : 15

    le Sam 13 Oct 2012 - 19:49

    Mercii ♥



    avatar
    Clémy
    FémininAge : 29Messages : 29

    le Mer 17 Oct 2012 - 19:31

    Merci! Very Happy
    avatar
    Icchiro
    MasculinAge : 24Messages : 569

    le Ven 19 Oct 2012 - 21:37

    Merci pour le partage !





    Kit by me ^^
    avatar
    Sacha Chan
    FémininAge : 18Messages : 21

    le Dim 21 Oct 2012 - 0:07

    Merci du partage Very Happy
    avatar
    Sulivan-44
    MasculinAge : 21Messages : 65

    le Dim 28 Oct 2012 - 1:31

    Merci beaucoup.
    avatar
    Mayako
    FémininAge : 16Messages : 12

    le Lun 29 Oct 2012 - 19:02

    Merci o/



    avatar
    Crook's
    MasculinAge : 17Messages : 15

    le Jeu 1 Nov 2012 - 13:09

    Merci !
    avatar
    Milaow
    FémininAge : 17Messages : 71

    le Lun 5 Nov 2012 - 11:05

    Merci :)
    avatar
    Natsuo Tanacka
    MasculinAge : 19Messages : 101

    le Lun 5 Nov 2012 - 20:31

    merci



    avatar
    Chucky'
    MasculinAge : 19Messages : 80

    le Mer 7 Nov 2012 - 5:11

    merci



    avatar
    Candy Libertine
    FémininAge : 18Messages : 129

    le Sam 17 Nov 2012 - 15:37

    super tuto merci!
    avatar
    Nawak
    FémininAge : 19Messages : 112

    le Sam 17 Nov 2012 - 18:18

    Merci! C'est parfait! ♥



    avatar
    Plume d'Ange
    FémininAge : 19Messages : 33

    le Lun 19 Nov 2012 - 19:03

    Merci *-*
    avatar
    Electro
    FémininAge : 20Messages : 30

    le Ven 23 Nov 2012 - 15:37

    thanks
    avatar
    Ally Design
    FémininAge : 20Messages : 57

    le Sam 24 Nov 2012 - 16:37

    Curieuse ^^
    Contenu sponsorisé


      La date/heure actuelle est Mer 29 Mar 2017 - 15:16