AccueilRechercherS'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.

Le deal à ne pas rater :
Code promo Cdiscount : 25€ de réduction dès 249€ d’achat
Voir le deal

    Bouton cliqué et animation inverse

    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Dim 7 Juin 2020 - 7:15

    Hola :happy:

    Je cherche à finaliser une animation mise en place avec la bibliothèque animate.css intégrée à mon site et du javascript.

    Code:
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <div class="navbar-name" id="nn">Texte bouton</div>
     <div class="navbar-dropdown animate__animated animate__fadeInDown animate__faster" id="nd">Contenu</div>

    Le CSS :

    Code:
    .navbar-name {
        margin: auto;
        background: linear-gradient(135deg, #8beaef, #d5bdf8);
        padding: 5px;
        line-height: 10px;
        border-radius: 2px;
        color: #444;
        cursor: pointer;
        margin-left: 30px;
    }

    .navbar-dropdown {
        background-color: #353738;
        color: #fff;
        font-size: 10px;
        margin-top: 55px;
        padding: 10px;
        display: none;
        position: absolute;
        right: 30px;
        border-radius: 0px 0px 2px 2px;
    }

    Pour l'instant, je suis parvenue à rendre la class .navbar-name cliquable. Celle-ci fait apparaître la div .navbar-dropdown qui apparaît avec l'animation "fadeInDown".

    Code:
    $(function() {
      $("#nn").click(function(){
            $('#nd').toggle();
        });
    });

    Ce que je cherche - et peine - à faire maintenant, c'est rajouter l'animation inverse si je puis dire sur la div .navbar-dropdown, c'est à dire "fadeInUp" lorsque l'on clique à nouveau sur la div .navbar-name. Je ne sais pas trop par où commencer, mais je suppose qu'avec le Javascript on peut arriver au résultat attendu, peut être en ajoutant un toggleClass et l'instruction if... else lorsque la div a été animée avec "fadeInDown"...

    Bonne journée et merci d'avance pour votre aide :coeur:
    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Mer 10 Juin 2020 - 7:03

    Bonjour, un petit UP :)
    Nimarel
    Nimarel
    MasculinAge : 27Messages : 129

    le Sam 13 Juin 2020 - 0:05

    Hello ! Ne suffirait-il pas juste de toggle l'une classe à l'autre ?

    Code:
    $(function() {
      $("#nn").click(function(){
            $('#nd').toggle("animate__fadeInDown animate__fadeInUp");
        });
    });

    En rajoutant "animate__fadeInDown animate__fadeInUp" dans le toggle(), cela permet de passer d'une classe à l'autre.



    Bouton cliqué et animation inverse 1490964070-pantherev2
    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Dim 14 Juin 2020 - 8:19

    Salut !

    Alors le script fonctionne bien, mais ça ne donne pas l'effet désiré...
    Ayfoth
    Ayfoth
    MasculinAge : 30Messages : 1329

    le Dim 14 Juin 2020 - 8:58

    Coucou sans javascript tu aurait pu le faire uniquement en CSS je pense avec un :active ou du :before :after.



    Bouton cliqué et animation inverse Oyl7
    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Dim 14 Juin 2020 - 10:48

    Hello ! Oh, sans JS ? Humm, du coup je ne vois pas trop comment mettre le tout en forme, pas assez qualifiée pour ce genre de truc je pense Shocked
    Ayfoth
    Ayfoth
    MasculinAge : 30Messages : 1329

    le Dim 14 Juin 2020 - 14:00

    Si j'ai bien compris tu veux un menu déroulant ?



    Bouton cliqué et animation inverse Oyl7
    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Mer 17 Juin 2020 - 12:15

    Oui, tout à fait !
    Ayfoth
    Ayfoth
    MasculinAge : 30Messages : 1329

    le Mer 17 Juin 2020 - 12:29

    C'est simple ton deroulement en display none et quand bouton active = display block



    Bouton cliqué et animation inverse Oyl7
    avatar
    Sanaa
    FémininAge : 27Messages : 157

    le Mer 17 Juin 2020 - 16:59

    Ok, du coup je peux faire ça en CSS ? Ou en JS ? Désolée mais comme je disais mon niveau en "codage" est pas assez élevé pour faire ce genre de choses ^^
    Ayfoth
    Ayfoth
    MasculinAge : 30Messages : 1329

    le Jeu 18 Juin 2020 - 7:55

    Tu peux le faire en CSS.

    Tient un petit exemple : https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-deroulant/



    Bouton cliqué et animation inverse Oyl7
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 283

    le Mer 1 Juil 2020 - 11:10

    Bonjour @Sanaa, nous sommes sans nouvelles...Ce sujet est-il toujours d'actualité ? Est-ce que tu as vu nos réponses ? N'oublie pas que tout sujet doit être uppé une fois par semaine (ou une fois par mois pour les publicités). Merci de nous tenir informés du déroulement de cette demande.
    Sans nouvelles avant le 15 juillet 2020, le sujet sera archivé.



    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Juil 2020 - 1:05