how do i activate a new class in java script?-CodePudding

I have this code. When inspecting from the browser ,it seems when i click on hamburger-menu active class doesn't work. I expect when I press the hamburger menu the container class to become the container.active class Also,I set cursor: pointer for hamburger-menu and for link a(read-more) and it doesn't work. Any help?

const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");

hamburger_menu.addEventListener("click", () => {
  container.classList.toggle("active");
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
  width: 100%;
}

.navbar {
  position: fixed;
  width: 100%;
  height: 3rem;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu {
  max-width: 60rem;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hamburger-menu {
  cursor: pointer;
  width: 4em;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.menu-bar {
  width: 50%;
  height: 1.5px;
  background: white;
  position: relative;
  transition: 0.5s;
  right: 0;
}

.menu-bar:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(-7px);
}

.menu-bar:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(7px);
}

.main {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.background {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("time.jpg") no-repeat top center / cover;
  z-index: -1;
}

.background-blur {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: rgba(43, 51, 59, 0.8);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.future {
  font-size: 3rem;
  font-weight: bolder;
  color: white;
}

.time {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.middle a {
  position: relative;
  top: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  border-radius: 25px;
  background: blue;
  padding: 0.6rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Time</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">

    <div class="navbar">
      <div class="menu">

        <div class="hamburger-menu">
          <div class="menu-bar"></div>
        </div>
      </div>
      <div class="main">
        <div class="background">
          <div class="background-blur">
            <div class="middle">
              <h2 class="future">"Future is here"</h2>
              <h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
              <a href="#">Read more </a2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="app.js"></script>

  </body>
  </html>

CodePudding user response：

It is because your .hamburger_menu classes z-index was under the main element and its dimensions was covering your other elements. I have commented where I increased the z index so you can decide how to handle it. But this way of layering your elements is bad when scaling your project. The read more button is not navigating because u haven't set a href path. Set it to a link or an address and click on the button to navigate. The below code shows that as well.

const hamburger_menu = document.querySelector(".hamburger-menu");
const container = document.querySelector(".container");

hamburger_menu.addEventListener("click", () => {
  container.classList.toggle("active");
  alert("clicked")
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
  width: 100%;
}

.navbar {
  position: fixed;
  width: 100%;
  height: 3rem;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu {
  max-width: 60rem;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hamburger-menu {
  cursor: pointer;
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  z-index: 4; //changed z index to a higher number 
}

.menu-bar {
  width: 50%;
  height: 1.5px;
  background: white;
  position: relative;
  transition: 0.5s;
  right: 0;
}

.menu-bar:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(-7px);
}

.menu-bar:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(7px);
}

.main {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 3;
}

.background {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("time.jpg") no-repeat top center / cover;
  z-index: -1;
}

.background-blur {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: rgba(43, 51, 59, 0.8);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.future {
  font-size: 3rem;
  font-weight: bolder;
  color: white;
}

.time {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.middle a {
  position: relative;
  top: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  border-radius: 25px;
  background: blue;
  padding: 0.6rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Time</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div class="container">

    <div class="navbar">
      <div class="menu">

        <div class="hamburger-menu">
          <div class="menu-bar"></div>
        </div>
      </div>
      <div class="main">
        <div class="background">
          <div class="background-blur">
            <div class="middle">
              <h2 class="future">"Future is here"</h2>
              <h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
              <a href="https://www.google.com">Read more</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="app.js"></script>

</body>

</html>

CodePudding user response：

the problem is your "main" dom element which positioned absolute, so this is overlapping menu element.

So add position relative to menu in css and assign z-index to 1.

.menu {
    max-width: 60rem;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    position: relative;
}

window.onload = function() {
  const hamburger_menu = document.querySelector(".hamburger-menu");
  const container = document.querySelector(".container");

  hamburger_menu.addEventListener("click", () => {
    container.classList.toggle("active");
  });
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
  width: 100%;
}

.navbar {
  position: fixed;
  width: 100%;
  height: 3rem;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu {
  max-width: 60rem;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hamburger-menu {
  cursor: pointer;
  width: 4em;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.menu-bar {
  width: 50%;
  height: 1.5px;
  background: white;
  position: relative;
  transition: 0.5s;
  right: 0;
}

.menu-bar:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(-7px);
}

.menu-bar:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1.5px;
  background: white;
  transform: translateY(7px);
}

.main {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.background {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url("time.jpg") no-repeat top center / cover;
  z-index: -1;
}

.background-blur {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: rgba(43, 51, 59, 0.8);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.future {
  font-size: 3rem;
  font-weight: bolder;
  color: white;
}

.time {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.middle a {
  position: relative;
  top: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  border-radius: 25px;
  background: blue;
  padding: 0.6rem;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Time</title>
</head>

<body>
  <div class="container">

    <div class="navbar">
      <div class="menu">

        <div class="hamburger-menu">
          <div class="menu-bar"></div>
        </div>
      </div>
      <div class="main">
        <div class="background">
          <div class="background-blur">
            <div class="middle">
              <h2 class="future">"Future is here"</h2>
              <h2 class="time">"Time isn't the main thing.It's the only thing."</h2>
              <a href="#">Read more </a2>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


  </body>
  </html>