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/QUEEL en accordéon vertical sur clic ! [HTML/CSS/JAVASCRIPT]

    Partagez
    FémininAge : 27Message(s) : 307

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Glycérine
    le Mer 8 Fév 2012 - 13:16
    Rappel du premier message :

    Encore un ? Pourquoi ?

    Bonjour, bonjour !

    Aujourd'hui et pour ma première astuce, j'adapte un code de Sparrow-style (avec sa permission Wink) qui est l'un de ses célèbres accordéons ! Mais avec du JavaScript cette fois !
    En effet, vous avez été quelques uns à vous demander s'il était possible "d'avoir le même mais avec clic et pas survol". Donc, on l'a fait. Et comme je suis pas douée pour les longs discours, voyez par vous même !

    >> Aperçu <<

    Comme pour celui de Sparrow, il vous sera possible de changer les couleurs et/ou images de fond pour chaque onglet ou encore de modifier le fond du contenu, les images, la taille (l'astuce pour la taille est à la fin, au départ le contenu a 250px de hauteur), tout ça quoi ^^.

    Let's go !


    Et comment qu'on fait ?

    Je préviens, la manipulation est un tout petit peu plus complexe que la version "survol" et il faut que vous ayez le JavaScript activé sur votre forum. Mais je vais vous expliquer tout ça en détail, don't worry Willy.

    1. Le HTML
    Pour voir ce code, vous devrez poster à la suite de ce topic !



    2. Le CSS
    Pour voir ce code, vous devrez poster à la suite de ce topic !




    3. Le JavaScript
    Pour voir ce code, vous devrez poster à la suite de ce topic !




    Je vais citer Sparrow pour ce qui est des crédits de Never-Utopia Wink

    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




    Pour avoir un onglet ouvert dès le départ




    Dernière édition par Glycérine le Dim 15 Juil 2012 - 11:38, édité 3 fois



    FémininAge : 26Message(s) : 43
    Ge-gege08
    le Mer 23 Mai 2012 - 17:52
    Merci d'avance!
    MasculinAge : 29Message(s) : 224
    Hisoka
    le Sam 26 Mai 2012 - 21:26
    Merci pour le tuto :)


    Age : 24Message(s) : 114
    Win
    le Lun 28 Mai 2012 - 15:33
    C'est magique! merci ♥


    FémininAge : 20Message(s) : 44
    Darkjeely
    le Lun 28 Mai 2012 - 22:33
      Ooohw la classe *^*
      Merci beaucoup o//


    MasculinAge : 20Message(s) : 73
    XxjeremixX
    le Sam 16 Juin 2012 - 11:40
    merci ^_^
    FémininAge : 21Message(s) : 10
    Hope-Tik
    le Mar 26 Juin 2012 - 13:54
    Super tuto :)
    MasculinAge : 24Message(s) : 22
    Melody L
    le Sam 30 Juin 2012 - 12:14
    Thank Very Happy
    FémininAge : 21Message(s) : 9
    Blue.
    le Sam 30 Juin 2012 - 18:34
      Merci ♥
    Invité
    le Jeu 5 Juil 2012 - 12:08
    Merci pour le partage !
    MasculinAge : 23Message(s) : 193
    Reiõ
    le Jeu 5 Juil 2012 - 19:18
    Merci Wink
    FémininAge : 18Message(s) : 9
    Loune
    le Dim 8 Juil 2012 - 2:32
    Merci ! Very Happy.
    FémininAge : 24Message(s) : 213
    shala
    le Dim 8 Juil 2012 - 3:29
    merci


    MasculinAge : 39Message(s) : 80
    fregadeth
    le Lun 9 Juil 2012 - 16:03
    merci ^^
    MasculinAge : 21Message(s) : 15
    Kefka
    le Lun 9 Juil 2012 - 23:56
    Merci pour ce super partage Very Happy


    FémininAge : 22Message(s) : 10
    Isylia
    le Jeu 12 Juil 2012 - 14:40
    Merci *-*
    FémininAge : 24Message(s) : 145
    A.Volk
    le Ven 13 Juil 2012 - 16:36
    Merci ! =3
    FémininAge : 33Message(s) : 48
    LouGreen
    le Dim 15 Juil 2012 - 19:11
    Merci ! Par contre je ne sais pas comment l'intégrer au QUEEL ... j'ai fait quelques tentatives mais c'était pas beau à voir Razz

    EDIT : c'est bon ! J'ai trouvé la solution grâce à un autre sujet =)
    FémininAge : 104Message(s) : 7
    Aynil
    le Jeu 19 Juil 2012 - 5:03
    Merci beaucoup! :)
    FémininAge : 26Message(s) : 118

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Asphodèle.
    le Ven 20 Juil 2012 - 15:07
    Ca me plait bien.
    FémininAge : 22Message(s) : 22
    Nell
    le Dim 22 Juil 2012 - 13:07
    C'est le tuto que je cherchais ! Merci du artage :)
    MasculinAge : 50Message(s) : 22
    chardonoire.....CMF
    le Dim 22 Juil 2012 - 15:39
    Merci


    MasculinAge : 19Message(s) : 5
    Melow
    le Lun 23 Juil 2012 - 17:20
    wow :) merci pour le tuto !
    FémininAge : 23Message(s) : 74
    Hallibel
    le Mar 24 Juil 2012 - 11:20
    Ca m'intéresse ! ;D Merci pour le partage.
    FémininAge : 22Message(s) : 12
    Hobey
    le Lun 30 Juil 2012 - 0:56
    Merci
    FémininAge : 21Message(s) : 61
    Slown
    le Dim 5 Aoû 2012 - 21:04
    Merci Very Happy
    Contenu sponsorisé
    Aujourd'hui à 17:10

      La date/heure actuelle est Ven 30 Sep 2016 - 17:10