How do you code a hamburger menu to make your navbar appear?-CodePudding

So I am trying to make a responsive nav bar menu by adding a hamburger menu so mobile users could also use my website. I coded the navbar and the hamburger menu. But my problem is that I don't know how to make my navbar appear when you click the hamburger menu icon. Can any of you guys tell me what the code for making my navbar appear onclick. My code is below. Resize your browser to a smaller width to see the hamburger menu if you can't see it. Please ask me questions if you did not understand my question. Again my code is below.

@import url("https://fonts.googleapis.com/css2?family=Amatic SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
  border-radius: 3px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  visibility: hidden;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  .nav {
    visibility: hidden;
  }

  .nav-icon-5 {
    bottom: 80px;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label >.WWW</label>
      <ul >
        <li><a href="#" >The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
        <li>
          <div  onclick="Nav()">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </li>
      </ul>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
      });
    });
  </script>
</html>

CodePudding user response：

You have to delete unnecessary function Nav on the .icon

@import url("https://fonts.googleapis.com/css2?family=Amatic SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
  border-radius: 3px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  visibility: hidden;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  .nav {
    visibility: hidden;
  }

  .nav-icon-5 {
    bottom: 80px;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label >.WWW</label>
      <ul >
        <li><a href="#" >The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
        <li>
          <div >
            <span>Menu1</span>
            <span>Menu2</span>
            <span>Menu3</span>
          </div>
        </li>
      </ul>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
      });
    });
  </script>
</html>

CodePudding user response：

from your code, I notice you are using floats, but here is a better convention and solution to your code:

in HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>.WWW Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      type="text/css"
      media="screen"
      href="Global/navbar.css"
    />
  </head>
  <body>
    <nav>
      <label >.WWW</label>
      <ul >
        <li><a href="#" >The Domain</a></li>
        <li><a href="#">The News</a></li>
        <li><a href="#">Interesting Factoids</a></li>
        <li><a href="#">Sign Off</a></li>
      </ul>
      <div  ">
            <span></span>
            <span></span>
            <span></span>
      </div>
    </nav>
  </body>
  <script></script>
  <script href="main.js">
    const icons = document.querySelectorAll(".icon");
    const nav = document.querySelector(".nav")
    icons.forEach((icon) => {
      icon.addEventListener("click", (event) => {
        icon.classList.toggle("open");
        nav.classList.toggle("menu-open")
      });
    });
  </script>
</html>

in CSS

@import url("https://fonts.googleapis.com/css2?family=Amatic SC&display=swap");

* {
  font-family: "Amatic SC", cursive;
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

nav {
  background: #000;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 100px;
}

label.logo {
  color: white;
  font-size: 35px;
  line-height: 80px;
}

nav ul {
  display: flex;
}


nav ul li a {
  color: white;
  font-size: 17px;
  text-transform: uppercase;
  padding: 1px 13px;
}

a.active,
a:hover {
  background-image: linear-gradient(
    109.6deg,
    rgba(61, 245, 167, 1) 11.2%,
    rgba(9, 111, 224, 1) 91.1%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}

.nav-icon-5 {
  width: 20px;
  height: 15px;
  position: relative;
  cursor: pointer;
  display: none;
}
.nav-icon-5 span {
  background-color: #fff;
  position: absolute;
  border-radius: 2px;
  transition: 0.3s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  width: 100%;
  height: 2px;
  transition-duration: 500ms;
}
.nav-icon-5 span:nth-child(1) {
  top: 2px;
  left: 0px;
}
.nav-icon-5 span:nth-child(2) {
  top: 8px;
  left: 0px;
  opacity: 1;
}
.nav-icon-5 span:nth-child(3) {
  bottom: -1px;
  left: 0px;
}
.nav-icon-5:not(.open):hover span:nth-child(1) {
  transform: rotate(-3deg) scaleY(-0.5);
}
.nav-icon-5:not(.open):hover span:nth-child(2) {
  transform: rotate(3deg) scaleY(1.1);
}
.nav-icon-5:not(.open):hover span:nth-child(3) {
  transform: rotate(-4deg) scaleY(1.1);
}
.nav-icon-5.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 6px;
}
.nav-icon-5.open span:nth-child(2) {
  opacity: 0;
}
.nav-icon-5.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 7px;
}

@media (max-width: 715px) {
  nav {
    position: relative;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0%;
  }

  .nav-icon-5 {
    display: block;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
  }

  nav ul li {
    margin: 10px 0;
  }

  .menu-open {
    display: block;
    transform: translateY(108px);
    background-color: red;
  }

  .nav-icon-5 span {
    visibility: visible;
    background-color: #fff;
  }
}

@media (max-width: 440px) {
  .nav-icon-5 span {
    visibility: visible !important;
    background-color: #fff;
  }
}