Partage
  • Partager sur Facebook
  • Partager sur Twitter

fermeture ( ou div cache )

    17 octobre 2024 à 17:18:29

    bonjour j'ai un code pour un menu qui marche bien 

    j'utilise ce code pour plusieurs menus 

    ce que je voudrais c'est que quand un  de ces menus s'ouvre les autres ce ferment 

     le nom des div pour les differents menus sont menu-nav menu-nav2 menu-nav3 (menu nav 3 etant le fichier du menu )

    voici ce que j'ai essaye 

    }
     menu-nav = document.getElementById("menu-nav");
     menu-nav2 = document.getElementById("menu-nav2");
     menu-nav3 = document.getElementById("menu-nav3");
    function close(){
      if(getComputedStyle(menu-item3).transform ="translateY(0)")
      {
        menu-nav.style.transform ="translateY(100)";
        menu-nav.style.transform ="z-index: 4";
        menu-nav2.style.transform ="translateY(100)";
        menu-nav2.style.transform ="z-index: 4";
      } 
    }
    menu-nav3.onclick = menu-nav2;
    menu-nav3.onclick = menu-nav;

    mais j'ai des avertissements me  disant que menu et nav ne sont pas definis 

    ( je debute niveau zero en codage js alors svp pas d'explications compliquees juste du code ) 

    merci

    • Partager sur Facebook
    • Partager sur Twitter
      17 octobre 2024 à 20:57:11

      Hello.

      Il n'est pas possible dans le langage JavaScript que tu utilises d'avoir le caractère tiret dans les variables « - »

      Ainsi, toutes les identifiants "menu-nav", "menu-nav2" sont invalides au sens du langage et rend l'exécution du script impossible.

      Commence déjà par renommer chaque identifiant composé d'un tiret par un nom unifié comme "menuNav" ou "menu_nav" (le caractère underscore « _ » est lui autorisé)

      Vérifie ensuite si cela fonctionne

      • Partager sur Facebook
      • Partager sur Twitter
        18 octobre 2024 à 0:37:12

        j'ai vire tout les - (y compris dans les divs et les css )

        ca marche toujours pas 

        j'ai juste un message d'avertissement  "assignement in conditionnal expression"

        sur la ligne 6 du code

        au passage j'ai tout regroupe

        if (input.checked)
         {
         changerEtatMenu()
         let menu_nav = document.getElementById("menu_nav");
         let menu_nav2 = document.getElementById("menu_nav2");
         let menu_nav3 = document.getElementById("menu_nav3");
         if(getComputedStyle(menu_nav3).transform ="translateY(0)")
          {
          menu_nav.style.transform ="translateY(100)";
          menu_nav2.style.transform ="translateY(100)";
          }
         menu_nav3.onclick = menu_nav;
         menu_nav3.onclick = menu_nav2;
         }

         et si tu veux voir l'ensemble du  code 

        'use strict'
        /* eslint-env browser */
        
        const fermerMenu = () => {
          // Récupérer le menu
          const input = document.getElementById('menu_cb3')
          input.checked = false
        
          const fenetreNode = document.getElementById('menu_cote3')
          fenetreNode.remove()
        }
        
        const changerEtatMenu = () => {
          // Récupérer le menu
          const input = document.getElementById('menu_cb3')
          const actif = input.checked
        
          if (actif) {
            const fenetreNode = document.createElement('div')
            fenetreNode.id = 'menu_cote3'
            fenetreNode.className = 'menu_cote3'
            fenetreNode.addEventListener('click', fermerMenu)
            document.body.appendChild(fenetreNode)
          } else {
            const fenetreNode = document.getElementById('menu_cote3')
            fenetreNode.remove()
          }
        }
        
        const input = document.getElementById('menu_cb3')
        input.addEventListener('click', changerEtatMenu)
        
        // Ajout ultérieur :
        // Lorsque le menu a été déroulé et l'utilisateur rafraichit
        // la page, exécuter la procédure d'ouverture pour permettre à
        // l'utilisateur de clôre le menu en cliquant sur l'écran
        if (input.checked)
         {
         changerEtatMenu()
         let menu_nav = document.getElementById("menu_nav");
         let menu_nav2 = document.getElementById("menu_nav2");
         let menu_nav3 = document.getElementById("menu_nav3");
         if(getComputedStyle(menu_nav3).transform ="translateY(0)")
          {
          menu_nav.style.transform ="translateY(100)";
          menu_nav2.style.transform ="translateY(100)";
          }
         menu_nav3.onclick = menu_nav;
         menu_nav3.onclick = menu_nav2;
         }



        -
        Edité par YvesmanCacestprive 18 octobre 2024 à 0:55:42

        • Partager sur Facebook
        • Partager sur Twitter
          18 octobre 2024 à 10:13:55

          Bonjour, tes variables "menu_nav_2" et "menu_nav_3" contiennent des éléments html , l'évènement (.onclick) attend une fonction donc ça ne fait pas sens d'y affecter des éléments html



          • Partager sur Facebook
          • Partager sur Twitter

          Konjiki Ashisogi Jizo

            18 octobre 2024 à 11:00:31

            En effet je ne l'avais même pas vu.

            L'opérateur de comparaison entre 2 éléments en JavaScript est « === ». Toi, tu utilises l'opérateur d'assignation de valeur « = », d'où l'erreur.

            Autre chose ; vérifier que le style de "transform" est égal à "translateY(0)" ne fonctionnera jamais car pour les transformations CSS, la fonction "getComputedStyle" retourne une chaîne qui représente une matrice. (en raison du fait qu'il existe de nombreuses transformations pouvant être combinées)

            Voici un exemple de retour de getComputedStyle() qui représente un "translateY(0)" :

            console.log(
              getComputedStyle(menu_nav3).transform
            ); // -> "matrix(1, 0, 0, 1, 0, 0)"

            Voici une proposition d'amélioration pour la fin du code :

            // Ajout ultérieur :
            // Lorsque le menu a été déroulé et l'utilisateur rafraichit
            // la page, exécuter la procédure d'ouverture pour permettre à
            // l'utilisateur de clôre le menu en cliquant sur l'écran
            
            const TRANSLATE_Y_ZERO = 'matrix(1, 0, 0, 1, 0, 0)'
            const TRANSLATE_Y_HUNDRED = 'matrix(1, 0, 0, 1, 0, 100)'
            
            if (input.checked) {
              changerEtatMenu();
              let menu_nav = document.getElementById('menu_nav');
              let menu_nav2 = document.getElementById('menu_nav2');
              let menu_nav3 = document.getElementById('menu_nav3');
              if (getComputedStyle(menu_nav3).transform === TRANSLATE_Y_ZERO) {
                menu_nav.style.transform = TRANSLATE_Y_HUNDRED;
                menu_nav2.style.transform = TRANSLATE_Y_HUNDRED;
              }
              // menu_nav3.onclick = menu_nav; ❌ Ligne inutile puisqu'en dessous, tu mets "… = menu_nav2"
              menu_nav3.onclick = menu_nav2;
            }



            • Partager sur Facebook
            • Partager sur Twitter
              19 octobre 2024 à 7:23:20

              Voici une proposition d'amélioration pour la fin du code :

              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              // Ajout ultérieur :
              // Lorsque le menu a été déroulé et l'utilisateur rafraichit
              // la page, exécuter la procédure d'ouverture pour permettre à
              // l'utilisateur de clôre le menu en cliquant sur l'écran
              const TRANSLATE_Y_ZERO = 'matrix(1, 0, 0, 1, 0, 0)'
              const TRANSLATE_Y_HUNDRED = 'matrix(1, 0, 0, 1, 0, 100)'
              if (input.checked) {
              changerEtatMenu();
              let menu_nav = document.getElementById('menu_nav');
              let menu_nav2 = document.getElementById('menu_nav2');
              let menu_nav3 = document.getElementById('menu_nav3');
              if (getComputedStyle(menu_nav3).transform === TRANSLATE_Y_ZERO) {
              menu_nav.style.transform = TRANSLATE_Y_HUNDRED;
              menu_nav2.style.transform = TRANSLATE_Y_HUNDRED;
              }
              // menu_nav3.onclick = menu_nav; ❌ Ligne inutile puisqu'en dessous,
              tu mets "… = menu_nav2"
              menu_nav3.onclick = menu_nav2;

              j'ai essaye ton code mais sans succes helas :/

               menu_nav3.onclick = menu_nav; ❌ Ligne inutile puisqu'en dessous,
              tu mets "… = menu_nav2"

              le programme doit s'appliquer sur 2 menus consecutivement

              -
              Edité par YvesmanCacestprive 19 octobre 2024 à 7:26:55

              • Partager sur Facebook
              • Partager sur Twitter
                30 octobre 2024 à 13:59:40

                Bonjour, quel est le HTML correspondant?
                • Partager sur Facebook
                • Partager sur Twitter

                fermeture ( ou div cache )

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown