How do I change color to a tab menu-CodePudding

const menu = document.querySelector('.menu');
let menuOpen = false;
menu.addEventListener('click', () => {
  if(!menuOpen) {
    menu.classList.add('open');
    menuOpen = true;
  } else {
    menu.classList.remove('open');
    menuOpen = false;
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body { 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

/* Cornice */
.menu2 {

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */

 
}
/* Interno */
.menu1 {
  font-size:55px;
  color:#FFFFFF;
  background-color: black;
  transition: all .7s ease-in-out;

}
.tab {
  color: transparent;
  left: 30%;
  transition: all .5s ease-in-out 
}


a {
  text-decoration:none;
  color:white;
  transition: all .5s ease-in-out;
  
}

/* animazione */

.menu.open .menu1 {
  font-size:35px;
  color: red;
  transform: translateX(-180px);
  background: transparent;
  box-shadow: none;
}

.menu.open a {
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
}

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <title>   
    bEt4
  </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video src="video1.webm" autoplay loop playsinline muted></video>
 <div >
 <div >
    <div >  
    <h1 style=" font-family:Consolas;">bEt4</h1> 
    </div>
  </div>
<ul  style="left: 100px; top: 150px;;">
  <li><a href="#" data-text="home">home</a></li>
  <li><a href="#" data-text="archives">archives</a></li>
  <li><a href="#" data-text="tags">tags</a></li>
  <li><a href="#" data-text="categories">categories</a></li>
  <li><a href="#" data-text="about">about</a></li>
</ul>
</div>
  <script src="main.js"></script>
</body>
</html>

When I click on the menu1 name (bEt4), the element moves, linked to this action I need to make the 'a' element change color from transparent to red. I think it is the .menu.open a part that is not working but maybe I need to add some js or a different css line. If someone knows how to solve it, it would help me a lot. Thanks in advance to anyone that tries to help.

CodePudding user response：

The reason your "a" elements are not changing because in your css you are applying changes to ".menu.open a " but your tag is outside the .menu div and is enclosed in .menu2 div so if you change your css from ".menu.open a" to ".menu2.open a" it should work.

CodePudding user response：

try replacing in your css '.menu.open a' to '.menu2.open a' and adding menu2 in your js code

I hope it works for ya :D

const menu = document.querySelector('.menu');
const menu2 = document.querySelector('.menu2');
let menuOpen = false;
menu.addEventListener('click', () => {
  if(!menuOpen) {
    menu.classList.add('open');
    menu2.classList.add('open')
    menuOpen = true;
  } else {
    menu.classList.remove('open');
    menu2.classList.remove('open')
    menuOpen = false;
  }
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body { 
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

/* Cornice */
.menu2 {

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  /* border: 3px solid #fff; */

 
}
/* Interno */
.menu1 {
  font-size:55px;
  color:#FFFFFF;
  background-color: black;
  transition: all .7s ease-in-out;

}
.tab {
  color: transparent;
  left: 30%;
  transition: all .5s ease-in-out 
}


a {
  text-decoration:none;
  color:white;
  transition: all .5s ease-in-out;
  
}

/* animazione */

.menu.open .menu1 {
  font-size:35px;
  color: red;
  transform: translateX(-180px);
  background: transparent;
  box-shadow: none;
}

.menu2.open a {
  color: red;
  padding: 12px 16px;
  text-decoration: none;
  display: flex;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
  <title>   
    bEt4
  </title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video src="video1.webm" autoplay loop playsinline muted></video>
 <div >
 <div >
    <div >  
    <h1 style=" font-family:Consolas;">bEt4</h1> 
    </div>
  </div>
<ul  style="left: 100px; top: 150px;;">
  <li><a href="#" data-text="home">home</a></li>
  <li><a href="#" data-text="archives">archives</a></li>
  <li><a href="#" data-text="tags">tags</a></li>
  <li><a href="#" data-text="categories">categories</a></li>
  <li><a href="#" data-text="about">about</a></li>
</ul>
</div>
  <script src="main.js"></script>
</body>
</html>