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 : 20Message(s) : 61

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Pony62
    le Dim 2 Juin 2013 - 19:57
    Je suis intéressé! merci! ♥


    Underconstruction ♫
    FémininAge : 29Message(s) : 55
    Cyanna
    le Jeu 6 Juin 2013 - 1:14
    Intéressant , merci !
    FémininAge : 21Message(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)
    Louna Luna
    le Ven 7 Juin 2013 - 11:09
    Merci !


    FémininAge : 18Message(s) : 66
    Zooé
    le Dim 9 Juin 2013 - 13:27
    Thank Very Happy
    FémininAge : 16Message(s) : 14
    Sosica
    le Dim 16 Juin 2013 - 12:21
    Merci beaucoup ! Very Happy


    FémininAge : 23Message(s) : 61
    Psychotropia
    le Dim 11 Aoû 2013 - 20:03
    Merci !
    FémininAge : 20Message(s) : 165
    Lupa
    le Dim 25 Aoû 2013 - 18:16
    C'est tout simplement magnifique ! Merci à toi et à Sparrow-style pour cette merveille <3


    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    FémininAge : 26Message(s) : 25
    Lylinee
    le Dim 8 Sep 2013 - 17:13
    merci pour ce code


    FémininAge : 99Message(s) : 110
    Roromiya
    le Ven 8 Nov 2013 - 23:14
    Merkiii


    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 - 1:09
    merci
    FémininAge : 28Message(s) : 108
    Milka
    le Mer 20 Nov 2013 - 12:34
    Merci bien Wink
    FémininAge : 30Message(s) : 43

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Lilandrile
    le Mar 17 Déc 2013 - 11:33
    Merci pour ce code
    MasculinAge : 20Message(s) : 5
    Loufaone
    le Mar 17 Déc 2013 - 19:08
    Très beaux
    FémininAge : 25Message(s) : 30
    Pamplemousse
    le Lun 20 Jan 2014 - 13:08
    Thanks  :love: 


    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 Mer 29 Jan 2014 - 3:21
    Superbe !


    FémininAge : 25Message(s) : 181
    Laora || Peter
    le Sam 1 Fév 2014 - 10:43
    Merci beaucoup ♥

    J'ai fait les codes et tout ça mais ça n’apparaît nul part, je comprends pas comment e mettre en QEEL ;_;
    Peux-tu m'aider s'il te plaît? Si c'est pas possible, ce n'est pas grave ♥


    FémininAge : 20Message(s) : 67

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Azaral
    le Sam 1 Fév 2014 - 23:50
    c'est super joli *_* Je sais pas si je vais réussir à faire pareil mais j'ai bien envie d'essayer ^^
    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:54
    Oh! Avec clic ! Very Happy
    MasculinAge : 16Message(s) : 26
    Tatsumi Oga
    le Sam 15 Mar 2014 - 19:23
    merci
    FémininAge : 15Message(s) : 31
    Luinette
    le Mar 1 Avr 2014 - 16:45
    Merci !
    FémininAge : 17Message(s) : 147
    Layla4
    le Mer 9 Avr 2014 - 15:25
    Merci (:
    FémininAge : 24Message(s) : 5
    Mlle Eléa
    le Jeu 15 Mai 2014 - 20:47
    Marci bicoup~
    MasculinAge : 20Message(s) : 17
    stefansalvatore
    le Lun 2 Juin 2014 - 14:57
    *-*
    merci !
    FémininAge : 26Message(s) : 61
    Lucrèce
    le Sam 21 Juin 2014 - 12:42
    Merci beaucoup !
    FémininAge : 22Message(s) : 20
    Milly-Fili
    le Ven 27 Juin 2014 - 17:57
    Merci pour cette petite astuce ! Wink
    Contenu sponsorisé
    Aujourd'hui à 7:09

      La date/heure actuelle est Mer 28 Sep 2016 - 7:09