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

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

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

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

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;
}

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

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

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