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

    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 - 16:06
    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 - 21:41, édité 2 fois


    FémininAge : 23Message(s) : 131
    Sysy
    le Sam 8 Oct - 12:12
    Merci Oo
    MasculinAge : 36Message(s) : 10
    bouboucool
    le Sam 8 Oct - 21:30
    merci
    FémininAge : 23Message(s) : 17
    Metamorphe
    le Dim 9 Oct - 11:57
    Merci Very Happy
    FémininAge : 22Message(s) : 50
    Sachi
    le Lun 10 Oct - 7:11
    merci beaucoup ♥
    FémininAge : 25Message(s) : 13
    anneline
    le Jeu 13 Oct - 15:30
    veux voir^^
    merci
    MasculinAge : 23Message(s) : 843
    Ziktaon
    le Sam 15 Oct - 13:19
    Olala on est gâté ce mois ci :)

    Merci a toi Capt'ain





    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    FémininAge : 23Message(s) : 9
    Pepsi.cola
    le Sam 15 Oct - 22:53
    thanck's
    MasculinAge : 32Message(s) : 29
    Inconnue
    le Sam 15 Oct - 22:58
    Test


    FémininAge : 28Message(s) : 71
    Kabrina Lestrange
    le Dim 16 Oct - 18:37
    Génial!! ^^ Je veux voir! Very Happy
    MasculinAge : 32Message(s) : 85
    Nero Brigh
    le Mar 18 Oct - 6:37
    Test :love:
    FémininAge : 27Message(s) : 101
    Lady Doll
    le Sam 17 Mai - 10:11
    merci ♥
    MasculinAge : 14Message(s) : 44
    Trenz
    le Sam 31 Mai - 12:44
    Merci beaucoup c'est magnifique !
    FémininAge : 22Message(s) : 3
    Chuppa
    le Sam 31 Mai - 15:14
    Cette PA est super sympa ! J'adore le principe !
    Merci :3
    FémininAge : 19Message(s) : 14

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ohkawa
    le Dim 1 Juin - 6:23
    Merci beaucoup ! C'est sympa comme forme.


    MasculinAge : 18Message(s) : 22
    Eroik04
    le Dim 1 Juin - 6:34
    Merci
    MasculinAge : 21Message(s) : 8
    Tommy'
    le Dim 1 Juin - 14:14
    J'adore.
    FémininAge : 19Message(s) : 55
    Horus
    le Lun 9 Juin - 14:29
    arigato
    FémininAge : 19Message(s) : 55
    Horus
    le Lun 9 Juin - 14:33
    arigato
    FémininAge : 17Message(s) : 11
    Tijuana
    le Mar 24 Juin - 18:21
    Merci beaucoup, c'est génial ! Very Happy
    FémininAge : 18Message(s) : 285

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Siprano
    le Mer 25 Juin - 9:11
    Merci
    MasculinAge : 22Message(s) : 29
    Zahil
    le Jeu 26 Juin - 13:04
    Merci !
    MasculinAge : 17Message(s) : 1
    KennyDlaStreet
    le Dim 29 Juin - 8:58
    Mer beaucoup !
    MasculinAge : 23Message(s) : 47
    Marwin
    le Sam 5 Juil - 22:47
    merci
    FémininAge : 19Message(s) : 181
    MsCrazy.E
    le Jeu 10 Juil - 21:47
    Merci beaucoup !


    Contenu sponsorisé
    Aujourd'hui à 12:14

      La date/heure actuelle est Lun 26 Sep - 12:14