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

    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 : 24Messages : 73

    le Mer 29 Fév 2012 - 10:25

    Merci pour l'astuce ~
    Haaken
    FémininAge : 23Messages : 43

    le Ven 2 Mar 2012 - 6:04

    Merci beaucoup pour le tuto ! Very Happy
    TUC
    FémininAge : 29Messages : 103

    le Lun 5 Mar 2012 - 18:56

    merci (:



    Theblacktemplar
    MasculinAge : 40Messages : 4

    le Mer 7 Mar 2012 - 16:23

    Cela serait pour une intégration d'un accordéon vertical 8 menu dans une widget. Après je ne sais pas exactement ce qu'il faut faire , c'est pourquoi je cherche de l'aide

    merci d'avance
    Dr. Karlos
    MasculinAge : 21Messages : 14

    le Mer 7 Mar 2012 - 17:08

    Wow!
    Taktiik
    MasculinAge : 22Messages : 2291

    le Mer 7 Mar 2012 - 17:30

    Glycérine, tu es ma déesse *_* !

    Merci beaucoup !
    Taktiik.

    jean44
    Messages : 15

    le Mer 7 Mar 2012 - 18:35

    merci
    Solstice
    MasculinAge : 32Messages : 72

    le Jeu 8 Mar 2012 - 8:26

    J'suis très curieux :lol:
    Dastan
    MasculinAge : 33Messages : 111

    le Jeu 8 Mar 2012 - 14:13

    Je trouve ca super! merci!
    Vampi
    FémininAge : 20Messages : 56

    le Ven 23 Mar 2012 - 8:09

    Merci (:




    Merci Yakkuru =D

    Spoiler:

    Merci Jiyuu =D
    Laxuslightning
    MasculinAge : 23Messages : 48

    le Sam 24 Mar 2012 - 11:01

    Merci beaucoup !
    Riingo
    FémininAge : 20Messages : 17

    le Mer 28 Mar 2012 - 17:30

    Merci !
    Mario
    MasculinAge : 21Messages : 183

    le Ven 30 Mar 2012 - 19:48

    Merci n_n



    Parka
    MasculinAge : 37Messages : 100

    le Ven 30 Mar 2012 - 20:04

    Voir
    Ayael
    FémininAge : 21Messages : 550

    le Mer 4 Avr 2012 - 16:45

    Merci je cherchais justement un script de menu déroulant^^!

    Midnigth
    MasculinAge : 21Messages : 61

    le Mer 4 Avr 2012 - 22:51

    merci ^^
    blaster
    MasculinAge : 21Messages : 32

    le Jeu 5 Avr 2012 - 17:53

    Merci





    Je serais Abs du 06/08 jusqu'au 26/08 , je vous prie de ne pas supprimez mes topics !!
    Tamaki
    MasculinAge : 24Messages : 7

    le Jeu 5 Avr 2012 - 20:57

    Joli et pratique. Merci !
    Kawel
    MasculinAge : 23Messages : 203

    le Sam 7 Avr 2012 - 14:55

    I want see *o*
    Merci pour le partage Wink



    Invité

    le Dim 8 Avr 2012 - 14:34

    Merci beaucoup (:
    cosmos-chann
    FémininAge : 19Messages : 115

    le Dim 8 Avr 2012 - 15:01

    Merci
    Sably
    FémininAge : 20Messages : 36

    le Jeu 19 Avr 2012 - 18:39

    Merci =)



    En ligne
    Rozenbrez
    FémininAge : 25Messages : 1248

    le Jeu 19 Avr 2012 - 19:11

    Merci pour ce tuto ^^





    Merci au lutin anonyme de cette année. <3

    chienchila
    FémininAge : 24Messages : 6

    le Ven 20 Avr 2012 - 22:46

    Merci !
    Bang!
    FémininAge : 26Messages : 32

    le Sam 19 Mai 2012 - 0:55

    Merci pour le tuto !



    ham7
    Contenu sponsorisé


      La date/heure actuelle est Dim 26 Fév 2017 - 17:53