Search code examples
javascripthtmlcsshamburger-menu

Hambuger menu does not respond when clicked (HTML/CSS/JS)

Creating a basic HTML/CSS webpage. I added some CSS and JavaScript features so that the hamburger menu icon could be clicked and show a sidebar. After implementing JavaScript, the sidebar no longer shows on screen (which was what I wanted), but now the hamburger menu icon is unresponsive and does not reveal the sidebar. I looked over my HTML and CSS but could not find the problem. My code matches the source code of the guide I am following. Any help would be greatly appreciated.

HTML:

<!DOCTYPE html>
<html lang="en"
<head>
        <meta charset="UTF-8:">
        <meta name="viewport"
              content="width=device-width,initial-scale=1.0">
        <title>Placeholder</title>
        <link rel="stylesheet" href="stylesheet2.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>

        <div class="container">
                <div class="hamburger-menu">
                        <div class="line line-1"></div>
                        <div class="line line-2"></div>
                        <div class="line line-3"></div>
                </div>
        <header class="header">
            <div class="img-wrapper">
                <img src="ThinkDirBackground1.jpg" />
            </div>
          <div class="banner">
                  <h1>Placeholder</h1>
                   <p>Placeholder <br>
                    <em>placeholder</em> <br>
                    1. Placeholder <br>
                    2. Placeholder<br>
                   </p>
                   <button>Placeholder</button>
          </div>
        </header>

        <section class="sidebar">
                <ul class="menu">
                        <li class="menu-item">
                                <a href="#" class="menu-link" 
                                data-content="Home">Home</a>
                        </li>
                        <li class="menu-item">
                                <a href="#" class="menu-link"
                                data-content="PH2">PH2</a>
                        </li>
                        <li class="menu-item">
                                <a href="#" class="menu-link"
                                data-content="PH3">PH3</a>
                        </li>
                        <li class="menu-item">
                                <a href="#" class="menu-link"
                                data-content="PH4">PH4</a>
                        </li>
                </ul>
        </section>
        </div>

<script src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"></script>
        <script src="script.js"></script>

</body>
</html>

CSS

* {
         margin: 0;
         padding: 0;
         outline: none;
         box-sizing: border-box;
         list-style: none;
         text-decoration: none;
}


html {
        font-size: 62.5%;
}

.hamburger-menu {
        width: 3rem;
        height: 3rem;
        position: fixed;
        top: 5rem;
        right: 5rem;
        z-index: 200;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        cursor: pointer;
        transition: right 0.7s;
}

.change .hamburger-menu {
        right: 33rem;
}


.line {
        width: 100%;
        height: .2rem;
        background-color: #FFFFFF;
        box-shadow: 0.1rem 0.2rem rgba(0,0,0, .2);
}

.line {
        background-color: rgba(0,0,0, .8);
}

.change .line-1 {
        transform: rotate(45deg)
        translate(0.3rem, 0.8rem);
}

.change .line-2 {
        opacity: 0;
        visibility: hidden;
}

.change .line-3 {
        transform: rotate(-45deg)
        translate(0.3rem, -0.8rem);
}


.header {
             width: 100%;
        height: 100vh;
        position: relative;
        perspective: 100rem;
        overflow: hidden;
}

.img-wrapper {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.8);
        overflow: hidden;
}

.img-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
        animation-name: scale;
        animation-duration: 25s;
        filter: blur(8px);
        -webkit-filter: blur(8px);
}

@keyframes scale {
        0% {
                transform: scale(1.3);
        }
        100% {
                transform: scale(1);
        }
}


.banner {
        position: absolute;
        top: 30%;
        left: 15%;
}

.banner h1 {
        font-family: "Sans-serif";
        font-size: 9rem;
        font-weight: 300;
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
        opacity: 0;
        animation: moveBanner 1s .5s;
         animation-fill-mode: forwards;
}

.banner p {
        font-family: "Sans-serif";
        font-size: 2.5rem;
        color: #FFFFFF;
        width: 70%;
        text-shadow: 0 .3rem .5rem rgba(0,0,0, .4);
        margin-bottom: 3rem;
        opacity: 0;
        animation: moveBanner 1s .7s;
        animation-fill-mode: forwards;
}

.banner button {
        width: 20rem;
        height: 5rem;
        background-color: #FFFFFF;
        border: none;
        font-family: "Sans-serif";
        text-transform: uppercase;
        text-shadow: 0.2rem .2rem rgba(0,0,0, 0.2);
        box-shadow: 0.3rem .5rem rgba(0,0,0, 0.4);
        cursor: pointer;
        opacity: 0;
        animation: moveBanner 1s .9s;
        animation-fill-mode: forwards;

}

@keyframes moveBanner {
        0% {
                transform: translateY(40rem) rotateY(-20deg);
        }
        100% {
                transform: translateY(0) rotateY(0);
                opacity: 1;
        }
}


.sidebar {
        width: 40rem;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -40rem;
        background-color: #FFFFFF;
         transition: right .5s;
}

.change .sidebar {
        right: 0;
}

.menu {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
}

.menu-item {
        text-align: center;
        margin: 0 0 40px 0;

}

.menu-link {
        font-family: "Sans-serif";
        font-size: 4rem;
        color: #555;
        position: relative;
}

.menu-link::before {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: #555;
        overflow: hidden;
        white-space: nowrap;
        transition: width .3s ease-in-out;
}

.menu-link:hover::before {
        width: 100%;
}

.social-media {
        position: absolute;
        bottom: 3rem;
        width: 100%;
        display: flex;
        justify-content: center;
}

.social-media i {
        font-size: 2.2rem;
        margin: 3rem;
        width: 4.5rem;
        height: 4.5rem;
        background-color: #777;
        color: #FFF;
        isplay: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        transition: background-color 0.3s;
}

.social-media i:hover {
        background-color: #c29525;
}

JavaScript

document.querySelector('.hamburger-menu').
        addEventListener('click, () => {
                document.querySelector('container').classlist.toggle('change')
        });
Solution

  • Few things:

    • You are missing a closing bracket here: addEventListener('click,

    • classlist should be classList, JS properties are case-sensitive

    • document.querySelector('container') is looking for the first container element. Use document.querySelector('.container') to get the first element with the class container

    document.querySelector('.hamburger-menu').addEventListener('click', () => {
document.querySelector('.container').classList.toggle('change')
});
    * {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
}

.hamburger-menu {
  width: 3rem;
  height: 3rem;
  position: fixed;
  top: 5rem;
  right: 5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  cursor: pointer;
  transition: right 0.7s;
}

.change .hamburger-menu {
  right: 33rem;
}

.line {
  width: 100%;
  height: .2rem;
  background-color: #FFFFFF;
  box-shadow: 0.1rem 0.2rem rgba(0, 0, 0, .2);
}

.line {
  background-color: rgba(0, 0, 0, .8);
}

.change .line-1 {
  transform: rotate(45deg) translate(0.3rem, 0.8rem);
}

.change .line-2 {
  opacity: 0;
  visibility: hidden;
}

.change .line-3 {
  transform: rotate(-45deg) translate(0.3rem, -0.8rem);
}

.header {
  width: 100%;
  height: 100vh;
  position: relative;
  perspective: 100rem;
  overflow: hidden;
}

.img-wrapper {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .8);
  overflow: hidden;
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  animation-name: scale;
  animation-duration: 25s;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

@keyframes scale {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.banner {
  position: absolute;
  top: 30%;
  left: 15%;
}

.banner h1 {
  font-family: "Sans-serif";
  font-size: 9rem;
  font-weight: 300;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
  opacity: 0;
  animation: moveBanner 1s .5s;
  animation-fill-mode: forwards;
}

.banner p {
  font-family: "Sans-serif";
  font-size: 2.5rem;
  color: #FFFFFF;
  width: 70%;
  text-shadow: 0 .3rem .5rem rgba(0, 0, 0, .4);
  margin-bottom: 3rem;
  opacity: 0;
  animation: moveBanner 1s .7s;
  animation-fill-mode: forwards;
}

.banner button {
  width: 20rem;
  height: 5rem;
  background-color: #FFFFFF;
  border: none;
  font-family: "Sans-serif";
  text-transform: uppercase;
  text-shadow: 0.2rem .2rem rgba(0, 0, 0, 0.2);
  box-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0;
  animation: moveBanner 1s .9s;
  animation-fill-mode: forwards;
}

@keyframes moveBanner {
  0% {
    transform: translateY(40rem) rotateY(-20deg);
  }
  100% {
    transform: translateY(0) rotateY(0);
    opacity: 1;
  }
}

.sidebar {
  width: 40rem;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -40rem;
  background-color: #FFFFFF;
  transition: right .5s;
}

.change .sidebar {
  right: 0;
}

.menu {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu-item {
  text-align: center;
  margin: 0 0 40px 0;
}

.menu-link {
  font-family: "Sans-serif";
  font-size: 4rem;
  color: #555;
  position: relative;
}

.menu-link::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  color: #555;
  overflow: hidden;
  white-space: nowrap;
  transition: width .3s ease-in-out;
}

.menu-link:hover::before {
  width: 100%;
}

.social-media {
  position: absolute;
  bottom: 3rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.social-media i {
  font-size: 2.2rem;
  margin: 3rem;
  width: 4.5rem;
  height: 4.5rem;
  background-color: #777;
  color: #FFF;
  isplay: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.social-media i:hover {
  background-color: #c29525;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8:">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Placeholder</title>
  <link rel="stylesheet" href="stylesheet2.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>

<body>

  <div class="container">
    <div class="hamburger-menu">
      <div class="line line-1"></div>
      <div class="line line-2"></div>
      <div class="line line-3"></div>
    </div>
    <header class="header">
      <div class="img-wrapper">
        <img src="ThinkDirBackground1.jpg" />
      </div>
      <div class="banner">
        <h1>Placeholder</h1>
        <p>Placeholder <br>
          <em>placeholder</em> <br> 1. Placeholder <br> 2. Placeholder<br>
        </p>
        <button>Placeholder</button>
      </div>
    </header>

    <section class="sidebar">
      <ul class="menu">
        <li class="menu-item">
          <a href="#" class="menu-link" data-content="Home">Home</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-link" data-content="PH2">PH2</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-link" data-content="PH3">PH3</a>
        </li>
        <li class="menu-item">
          <a href="#" class="menu-link" data-content="PH4">PH4</a>
        </li>
      </ul>
    </section>
  </div>

  <script src="script.js"></script>

</body>

</html>