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


    MasculinAge : 23Message(s) : 78

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Taoro
    le Mar 15 Oct 2013 - 11:02
    Merci beaucoup Very Happy


    FémininAge : 19Message(s) : 35
    Katil
    le Jeu 24 Oct 2013 - 19:08
    C'est beau ! MErci
    FémininAge : 18Message(s) : 38
    Mangockie
    le Lun 28 Oct 2013 - 21:13
    Merci :3
    FémininAge : 16Message(s) : 3929

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    0/10  (0/10)
    Clarisse
    le Jeu 31 Oct 2013 - 12:51
    Merci. *-*


    Coucou Invité!
    FémininMessage(s) : 80

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Fallaha
    le Mar 19 Nov 2013 - 0:01
    merci
    FémininAge : 26Message(s) : 53
    LinaK
    le Mer 20 Nov 2013 - 14:49
    meerciiiiiiiiiiiiii




    FémininAge : 26Message(s) : 153

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Hana Evali
    le Ven 29 Nov 2013 - 22:26
    Merci !


    FémininAge : 20Message(s) : 31
    L0ok
    le Sam 7 Déc 2013 - 18:35
    merci


    FémininAge : 23Message(s) : 40
    LightGlace
    le Sam 7 Déc 2013 - 21:42
    merci !
    FémininAge : 27Message(s) : 21

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    anaelscott
    le Mer 19 Fév 2014 - 20:31
    super ! Merci beaucoup, j'apprends énormément en lisant (et testant) les tutos !
    MasculinAge : 23Message(s) : 34
    jotherrien13
    le Mer 26 Fév 2014 - 23:54
    Merci
    FémininAge : 19Message(s) : 18
    Lee HyoJae
    le Dim 9 Mar 2014 - 20:05
    Merci pour ce tuto ^^
    FémininAge : 21Message(s) : 14
    Hikaria
    le Lun 21 Avr 2014 - 20:43
    Merci
    FémininAge : 25Message(s) : 125
    Leelo
    le Ven 25 Avr 2014 - 14:34
    merci
    FémininAge : 24Message(s) : 5
    Mlle Eléa
    le Jeu 15 Mai 2014 - 19:41
    Danke schön !
    FémininAge : 16Message(s) : 297

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Merwyn Arehdel
    le Jeu 14 Aoû 2014 - 16:34
    Merci o/


    Just want to be yours.
    MasculinAge : 16Message(s) : 157

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Nord
    le Mar 26 Aoû 2014 - 13:35
    C'est plutôt sympa, merci ^-^
    FémininAge : 24Message(s) : 22
    Emy Liddell
    le Mar 16 Sep 2014 - 22:53
    merci!


    MasculinAge : 24Message(s) : 20
    LHOOQ
    le Mar 23 Sep 2014 - 23:55
    Merci!
    FémininAge : 32Message(s) : 74
    Ouat
    le Ven 2 Jan 2015 - 3:57
    Merci ^^
    FémininAge : 26Message(s) : 133
    Bunny Lune
    le Mer 4 Mar 2015 - 19:37
    Merci pour le partage
    FémininAge : 18Message(s) : 28
    Treasury.
    le Mar 7 Juil 2015 - 23:09
    mercii
    FémininAge : 28Message(s) : 205
    Grande
    le Lun 21 Sep 2015 - 18:37
    Merci


    MasculinAge : 34Message(s) : 27

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Yttel
    le Mer 4 Nov 2015 - 11:37
    Super !! Exactement ce que je cherchais ! ^^
    FémininAge : 24Message(s) : 1355

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kelalin
    le Mer 4 Nov 2015 - 13:35
    Merci pour le partage ! (*´∀`*人*´∀`*)
    Contenu sponsorisé
    Aujourd'hui à 5:11

      La date/heure actuelle est Sam 1 Oct 2016 - 5:11