AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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
    Glycérine
    FémininAge : 28Messages : 307

    le Mer 8 Fév 2012 - 13:16

    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




    LouetRinkin
    MasculinAge : 26Messages : 62

    le Mer 8 Fév 2012 - 13:22

    "vous avez été quelques uns à vous demander s'il était possible "d'avoir le même mais avec clic et pas survol"."
    Et ce quelque un c'est moi. Cool
    Okhmhaka
    FémininAge : 31Messages : 31721

    le Mer 8 Fév 2012 - 13:53

    Génial ! Je te remercie pour l'adaptation, je pense qu'elle en séduira plus d'un ^^ Merci beaucoup Very Happy



    Lander.
    MasculinAge : 22Messages : 3

    le Mer 8 Fév 2012 - 16:06

    En effet, elle en séduit plus d'un :)



    Barney
    MasculinAge : 22Messages : 202

    le Mer 8 Fév 2012 - 18:30

    Vraiment une excellente idée, bravo et merci ! :)
    warning.sign
    FémininAge : 26Messages : 50

    le Mer 8 Fév 2012 - 20:59

    Justement, je me demandais comment... donc, merci ! =D
    Yusei Hôji
    MasculinAge : 25Messages : 71

    le Mer 8 Fév 2012 - 21:41

    Merci Very Happy
    chouchounette
    FémininAge : 24Messages : 96

    le Jeu 9 Fév 2012 - 14:05

    Merci beaucoup
    Kelogo
    MasculinAge : 17Messages : 16

    le Jeu 9 Fév 2012 - 21:57

    Thanks !!!



    Sateen
    FémininAge : 29Messages : 89

    le Jeu 9 Fév 2012 - 22:20

    Hoooo j'adore, Merci beaucoup

    Par contre pour le qeel il faut pas un code Template Index-body ?
    Rakuen
    FémininAge : 34Messages : 24

    le Ven 10 Fév 2012 - 1:48

    Hello :) Merci pour le partage!
    Glycérine
    FémininAge : 28Messages : 307

    le Ven 10 Fév 2012 - 10:09

    Y a pas de quoi. \o/

    Sateen : Pour le QEEL, il suffit de l'ajouter dans le template et d'adapter le code existant en y incluant les balises de templates que vous souhaitez voir dedans. =)




    Sateen
    FémininAge : 29Messages : 89

    le Ven 10 Fév 2012 - 10:13

    Haaaaaa d'accord ham1 Merci beaucoup :hug2:

    titou9322
    MasculinAge : 20Messages : 158

    le Ven 10 Fév 2012 - 18:54

    merci
    Candy †
    FémininAge : 19Messages : 43

    le Ven 10 Fév 2012 - 22:02

    Thank (:
    Leila
    FémininAge : 26Messages : 28

    le Sam 11 Fév 2012 - 9:37

    Super code :)
    Merci
    CathyCréation
    FémininAge : 37Messages : 206

    le Dim 12 Fév 2012 - 5:58

    merci beaucoup
    Strawberry-Swan
    FémininAge : 24Messages : 194

    le Dim 12 Fév 2012 - 8:40

    Merci !



      Yin
      FémininAge : 19Messages : 43

      le Lun 13 Fév 2012 - 13:05

      Super apperçut! Il vas me servir! Merci beaucoup Very Happy
      A.T.O
      MasculinAge : 22Messages : 10

      le Mar 14 Fév 2012 - 23:59

      Je vais essayer ça tout de suite
      Hypnos
      MasculinAge : 20Messages : 43

      le Mer 15 Fév 2012 - 13:37

      J'aimerais bien voir ce code *_*



      vic_le_faucheur
      MasculinAge : 22Messages : 764

      le Jeu 16 Fév 2012 - 18:48

      Enfin quelqu'un qui aime le javascript ^^

      killer999
      MasculinAge : 25Messages : 116

      le Ven 17 Fév 2012 - 12:49

      THanks
      Jimmy
      MasculinAge : 21Messages : 166

      le Sam 18 Fév 2012 - 19:04

      WESh :!
      Margii
      FémininAge : 18Messages : 84

      le Sam 18 Fév 2012 - 20:05

      Merci *^*
      Contenu sponsorisé

      Aujourd'hui à 2:07


        La date/heure actuelle est Sam 10 Déc 2016 - 2:07