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

    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


    FémininAge : 25Message(s) : 1143

    Les Guildes
    Guilde des Conteurs:
    3/10  (3/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Rozenbrez
    le Lun 1 Avr 2013 - 2:13
    Merci pour le codage Captain Very Happy


    FémininAge : 20Message(s) : 126
    V.Child
    le Lun 1 Avr 2013 - 14:33
    I Like it >8D
    MasculinAge : 17Message(s) : 58
    Matris
    le Mar 2 Avr 2013 - 17:46
    Merci **


    FémininAge : 19Message(s) : 158
    Sinavlia
    le Ven 5 Avr 2013 - 23:51
    Merci beaucoup ! Ça a l'air génial !


    FémininAge : 15Message(s) : 15
    Mélodie Chantante
    le Sam 13 Avr 2013 - 20:09
    Merci beaucoup !
    MasculinAge : 23Message(s) : 71
    AllianceShinobi
    le Dim 21 Avr 2013 - 19:28
    thank you ! + je laisse tout le temps les code "never utopia" en plus c'est stylé ^^
    MasculinAge : 23Message(s) : 71
    AllianceShinobi
    le Dim 21 Avr 2013 - 19:30
    Mais l'auteur peut tu me dire comment faire pour qu'il marque le qui est en ligne , les groupes ... ?
    MasculinAge : 31Message(s) : 31641

    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 Lun 22 Avr 2013 - 11:48
    Il te faut ajouter ces éléments dans le code. Il y a un sujet de Taktiik sur "comprendre son QEEL et le personnaliser" qui peut t'aider.

    Par ailleurs pense à :
    - éditer ton message au lieu de faire un double post (dernière fois qu'on te le dit...fais un effort stp ^^")
    - poser tes questions dans les bonnes sections Wink


    FémininAge : 25Message(s) : 115

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Valinwë
    le Jeu 25 Avr 2013 - 23:42
    c'est génial, merci beaucoup !


    FémininAge : 34Message(s) : 102
    Féli
    le Mar 30 Avr 2013 - 18:24
    merci


    MasculinAge : 15Message(s) : 396

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    1/10  (1/10)
    Guilde des Architectes:
    0/10  (0/10)
    Chione
    le Jeu 2 Mai 2013 - 17:48
    Merki !



    FEZ!FEZ!
    FémininAge : 41Message(s) : 80
    TATACARO13
    le Sam 4 Mai 2013 - 18:08
    merci




    FémininAge : 20Message(s) : 6
    Nyx Héméra
    le Lun 20 Mai 2013 - 19:21
    Merci c'est magnifique *-*
    MasculinAge : 31Message(s) : 18
    Jagan
    le Dim 9 Juin 2013 - 22:53
    Merci
    MasculinAge : 17Message(s) : 14
    Icks
    le Lun 8 Juil 2013 - 13:41
    merci
    FémininAge : 21Message(s) : 129
    Azuriel
    le Sam 13 Juil 2013 - 19:32
    Merci ^^
    FémininAge : 18Message(s) : 36
    L.P
    le Sam 3 Aoû 2013 - 0:56
    Merci, c'est génial!
    MasculinAge : 20Message(s) : 42
    kitel
    le Dim 4 Aoû 2013 - 11:16
    merci
    FémininAge : 18Message(s) : 2
    Pianorade
    le Jeu 22 Aoû 2013 - 3:00
    merci
    FémininAge : 26Message(s) : 40
    Lexis
    le Jeu 22 Aoû 2013 - 13:33
    Merci pour le partage ! J'adore tout simplement *_*
    MasculinAge : 15Message(s) : 40
    Train123
    le Ven 23 Aoû 2013 - 15:28
    cc
    FémininAge : 26Message(s) : 133
    Falyae
    le Ven 6 Sep 2013 - 18:58
    merci!


    FémininAge : 23Message(s) : 115
    Myu-uu
    le Mar 17 Sep 2013 - 19:57
    Merci ! :3



    FémininAge : 17Message(s) : 32
    Pomme-de-terre
    le Lun 23 Sep 2013 - 19:42
    Ça a l'air super utile *.*, donc merci énormément
    FémininAge : 27Message(s) : 44
    Deviliar
    le Ven 27 Sep 2013 - 7:31
    Merci !
    Contenu sponsorisé
    Aujourd'hui à 19:23

      La date/heure actuelle est Dim 25 Sep 2016 - 19:23