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

    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 : 17Message(s) : 18
    LeFimoteur
    le Sam 24 Nov 2012 - 19:18
    Merci.
    FémininAge : 25Message(s) : 21
    NanaLee
    le Jeu 6 Déc 2012 - 17:17
    peut on le placer dans un code de réponse pour RP? Sinon merci!! :)
    MasculinAge : 31Message(s) : 31645

    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 Jeu 6 Déc 2012 - 17:31
    Salut^^

    Dans la mesure où il y a le CSS séparé et des effets au survol il te faut être sur ton propre forum pour pouvoir faire ça, car le css doit être dans une feuille CSS, elle n'est pas dans le message lui-même.


    FémininAge : 25Message(s) : 21
    NanaLee
    le Jeu 6 Déc 2012 - 17:37
    d'accord D:

    mais ya pas un moyen d'incorporé le CSS dans le code directe avec des balises de style?
    MasculinAge : 19Message(s) : 72

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    ♕ William
    le Mar 11 Déc 2012 - 20:04
    Violent :o



    William
    FémininAge : 16Message(s) : 114
    Killae Adams
    le Mer 12 Déc 2012 - 17:01
    Merci beaucoup (:
    FémininAge : 24Message(s) : 125
    SweetieBay
    le Jeu 20 Déc 2012 - 4:35
    merci du partage =)


    Spoiler:
    FémininAge : 24Message(s) : 185
    Blue-J
    le Sam 29 Déc 2012 - 20:53

    Merci =)
    FémininAge : 21Message(s) : 107
    Pwaar
    le Dim 30 Déc 2012 - 14:16
    Je veux bien essayé pour voir ce que ça donne =)
    Merci du partage !
    MasculinAge : 35Message(s) : 16
    Gralewyr
    le Lun 7 Jan 2013 - 15:18
    Merci
    FémininAge : 30Message(s) : 98
    Kripterya
    le Mar 8 Jan 2013 - 6:30
    thanks *..........*
    FémininAge : 28Message(s) : 14
    Chiisu57
    le Mar 8 Jan 2013 - 11:53
    Milles merci !
    FémininAge : 25Message(s) : 13
    Hel
    le Lun 14 Jan 2013 - 1:05
    Merci.
    FémininAge : 18Message(s) : 25
    Canard
    le Lun 14 Jan 2013 - 18:42
    Anh comment il est trop *-*


    MasculinAge : 20Message(s) : 54
    TheDrakLord
    le Sam 19 Jan 2013 - 16:26
    Merci !


    FémininAge : 19Message(s) : 13
    Romàne.
    le Ven 8 Fév 2013 - 17:21
    Bonjour!
    Ton css pour le QEEL est super! Merci de faire partager
    FémininAge : 29Message(s) : 29
    People Are Strange
    le Mer 13 Fév 2013 - 20:36
    merci :bave:
    FémininAge : 25Message(s) : 49
    Amiko
    le Jeu 14 Fév 2013 - 10:07
    Merci beaucoup!
    FémininAge : 16Message(s) : 56
    lapinou-doux
    le Jeu 14 Fév 2013 - 19:09
    Merci Very Happy
    FémininAge : 21Message(s) : 18
    Mraw'
    le Sam 16 Fév 2013 - 16:32
    Merci ! \o
    FémininAge : 23Message(s) : 2
    Rynouu
    le Dim 17 Fév 2013 - 14:23
    merci
    MasculinAge : 29Message(s) : 28
    Calypso-FR
    le Mer 6 Mar 2013 - 12:32
    merci
    FémininAge : 21Message(s) : 62
    Doku
    le Ven 8 Mar 2013 - 16:57
    Nyah ♥ Superbe *o*
    FémininAge : 16Message(s) : 79
    Hyde
    le Mar 12 Mar 2013 - 12:24
    Michiiiii *3* !


    FémininAge : 18Message(s) : 20
    charle26
    le Dim 24 Mar 2013 - 17:19
    Merci !
    Contenu sponsorisé
    Aujourd'hui à 21:01

      La date/heure actuelle est Lun 26 Sep 2016 - 21:01