I made a responsive website and included a toggle menu, but it does not function-CodePudding

I'm trying to make a responsive website with a toggle menu, but it's proving difficult. Because I'm a beginner at programming, I've included all of the code I've written thus far. This is my HTML header, which also includes other sections and divs, as well as the hamburger menu's button:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
        rel="stylesheet">
    <script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
    <!-- <link rel="script" href="script.js"> -->
</head>

<body>
    <section >
        <nav>
            <a href="index.html"><img src="./image/logo.png" alt="logo"></a>
            <div  id="navLinks">
                <i  onclick="hideMenu()"></i>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
            </div>
            <i  onclick="showMenu"></i>
        </nav>

        <div >
            <h1>Lorem, ipsum dolor.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
            <a href="#" >similique rerum evenietodio?</a>
        </div>
    </section>

    <!-- Services -->
    <section >
        <h1>Lorem, ipsum dolor.</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>

        <div >
            <div >
                <img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA==&w=1000&q=80" alt="">
            </div>
            <div >
                <small>Build a foundation</small>
                <h3>Remedial Education</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
                <div >
                    <button >Donate₹</button>
                    <button >Volunteer</button>
                </div>

</body>

</html>

Also, here's the CSS I'm attempting to implement:

        * {
            margin: 0px;
            padding: 0px;
            font-family: 'Open Sans', sans-serif;
            font-family: 'Source Code Pro', monospace;
        }
        /* BANNER */
        
        .header {
            min-height: 100vh;
            width: 100%;
            background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
            background-position: center;
            background-size: cover;
        }
        /* NAVBAR */
        
        nav {
            display: flex;
            padding: 2% 6%;
            justify-content: space-between;
            align-items: center;
        }
        
        nav img {
            width: 150px;
        }
        
        .nav-links {
            flex: 1;
            text-align: right;
        }
        
        .nav-links ul li {
            list-style: none;
            display: inline-block;
            padding: 8px 12px;
            position: relative;
        }
        
        .nav-links ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 15px;
        }
        
        .nav-links ul li::after {
            content: '';
            width: 0%;
            height: 2px;
            background: #f44336;
            display: block;
            margin: auto;
        }
        
        .nav-links ul li:hover::after {
            width: 100%;
            transition: 0.5s;
        }
        /* TEXTBOX DIV */
        
        .text-box {
            width: 90%;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .text-box h1 {
            font-family: 'Source Code Pro', monospace;
            font-size: 62px;
        }
        
        .text-box p {
            margin: 10px 0 40px;
        }
        
        .hero-btn {
            display: inline-block;
            text-decoration: none;
            color: #fff;
            border: 1px solid #fff;
            padding: 12px 34px;
            font-size: 13px;
            background: transparent;
            position: relative;
            cursor: pointer;
        }
        
        .hero-btn:hover {
            border: 1px solid #f44336;
            background: #f44336;
        }
        
        nav .fas {
            display: none;
        }
        /* Services section */
        
        .services {
            width: 80%;
            margin: auto;
            text-align: center;
            padding-top: 100px;
        }
        
        .services h1 {
            font-size: 48px;
            font-weight: 700;
            font-family: 'Source Code Pro', monospace;
        }
        
        .services p {
            color: #777;
            font-size: 18px;
            font-weight: 300;
            line-height: 22px;
        }
        /* service section div 1*/
        
        .row {
            margin-top: 5%;
            display: flex;
            justify-content: space-between;
        }
        
        img {
            width: 25rem;
        }
        
        .text {
            display: block;
            margin: auto;
            padding: 0 0 0 2rem;
            text-align: left;
        }
        
        .text small {
            font-size: 1.5rem;
            color: rgb(155, 155, 155);
            text-transform: capitalize;
        }
        
        .text h3 {
            font-size: 3rem;
            font-family: 'Source Code Pro', monospace;
        }
        
        .text p {
            font-family: 'Open Sans', sans-serif;
            letter-spacing: .5px;
        }
        
        .text .button {
            text-align: center;
        }
        
        .button button {
            font-size: 22px;
            color: #777;
            background-color: #fff;
            border: 1px solid #777;
            border-radius: 5px;
            padding: 5px;
        }
        
        .button button:hover {
            color: #fff;
            background-color: #777;
            border: 1px solid #fff;
        }
        
        hr {
            margin-left: -40px;
            margin-right: -40px;
        }
        /* media queries */
        
        @media(max-width: 700px) {
            .text-box h1 {
                font-family: Source Code Pro;
                font-size: 20px;
            }
            .text-box p {
                margin: 10px 0 40px;
                font-size: 10px;
            }
            /* navbar */
            .nav-links ul li {
                display: block;
            }
            .nav-links {
                position: absolute;
                background: rgb(255, 255, 255, 0.2);
                height: 100vh;
                width: 200px;
                top: 0px;
                right: -200px;
                text-align: left;
                z-index: 2;
                transition: 1s;
            }
            nav .fas {
                display: block;
                color: #fff;
                margin: 10px;
                font-size: 22px;
                cursor: pointer;
            }
            .nav-links ul {
                padding: 30px;
            }
        }

I tried the following JS function:

                    // javascript for toggle menubar

                    var navLinks = document.getElementById("navLinks");

                    function showMenu() {
                        navLinks.style.right = "0";
                    }

                    function hideMenu() {
                        navLinks.style.right = "-200px";
                    }

I'm not sure what the answer is; any assistance would be highly appreciated, and please assist me as a rookie programmer.

CodePudding user response：

Changes made:

Single function to toggle.

function toggleMenu() {
  navLinks.classList.toggle("show");
}

Added some css changes.

.toggle-menu {
    z-index: 3;
}

.nav-links ul {
  margin-top: 30px;
}

// javascript for toggle menubar

var navLinks = document.getElementById("navLinks");

function toggleMenu() {
  navLinks.classList.toggle("show");
}

* {
  margin: 0px;
  padding: 0px;
  font-family: 'Open Sans', sans-serif;
  font-family: 'Source Code Pro', monospace;
}


/* BANNER */

.header {
  min-height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)), url(./eduford_img/banner.png);
  background-position: center;
  background-size: cover;
}


/* NAVBAR */

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 150px;
}

.nav-links {
  flex: 1;
  text-align: right;
}

.nav-links ul {
  margin-top: 30px;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}

.nav-links ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 15px;
}

.nav-links ul li::after {
  content: '';
  width: 0%;
  height: 2px;
  background: #f44336;
  display: block;
  margin: auto;
}

.nav-links ul li:hover::after {
  width: 100%;
  transition: 0.5s;
}

.toggle-menu {
    z-index: 3;
}

/* TEXTBOX DIV */

.text-box {
  width: 90%;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.text-box h1 {
  font-family: 'Source Code Pro', monospace;
  font-size: 62px;
}

.text-box p {
  margin: 10px 0 40px;
}

.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 34px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.hero-btn:hover {
  border: 1px solid #f44336;
  background: #f44336;
}

nav .fas {
  display: none;
}


/* Services section */

.services {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 100px;
}

.services h1 {
  font-size: 48px;
  font-weight: 700;
  font-family: 'Source Code Pro', monospace;
}

.services p {
  color: #777;
  font-size: 18px;
  font-weight: 300;
  line-height: 22px;
}


/* service section div 1*/

.row {
  margin-top: 5%;
  display: flex;
  justify-content: space-between;
}

img {
  width: 25rem;
}

.text {
  display: block;
  margin: auto;
  padding: 0 0 0 2rem;
  text-align: left;
}

.text small {
  font-size: 1.5rem;
  color: rgb(155, 155, 155);
  text-transform: capitalize;
}

.text h3 {
  font-size: 3rem;
  font-family: 'Source Code Pro', monospace;
}

.text p {
  font-family: 'Open Sans', sans-serif;
  letter-spacing: .5px;
}

.text .button {
  text-align: center;
}

.button button {
  font-size: 22px;
  color: #777;
  background-color: #fff;
  border: 1px solid #777;
  border-radius: 5px;
  padding: 5px;
}

.button button:hover {
  color: #fff;
  background-color: #777;
  border: 1px solid #fff;
}

hr {
  margin-left: -40px;
  margin-right: -40px;
}


/* media queries */

@media(max-width: 700px) {
  .text-box h1 {
    font-family: Source Code Pro;
    font-size: 20px;
  }
  .text-box p {
    margin: 10px 0 40px;
    font-size: 10px;
  }
  /* navbar */
  .nav-links ul li {
    display: block;
  }
  .nav-links {
    position: absolute;
    background: rgb(255, 255, 255, 0.2);
    height: 100vh;
    width: 200px;
    top: 0px;
    right: -200px;
    text-align: left;
    z-index: 2;
    transition: 1s;
  }
  nav .fas {
    display: block;
    color: #fff;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
  }
  .nav-links ul {
    padding: 30px;
  }
}

.show {
  right: 0px;
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
    rel="stylesheet">
  <script src="https://kit.fontawesome.com/0b2eeb2fd2.js" crossorigin="anonymous"></script>
  <!-- <link rel="script" href="script.js"> -->
</head>

<body>
  <section >
    <nav>
      <a href="index.html"><img src="./image/logo.png" alt="logo"></a>
      <div  id="navLinks">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Service</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Contact us</a></li>
        </ul>
      </div>
      <i  onclick="toggleMenu()"></i>
    </nav>

    <div >
      <h1>Lorem, ipsum dolor.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum explicabo ipsam quis, numquam voluptatem recusandae, repudiandae animi eligendi culpa provident soluta Repudiandae repellat adipisci ratione asperiores</p>
      <a href="#" >similique rerum evenietodio?</a>
    </div>
  </section>

  <!-- Services -->
  <section >
    <h1>Lorem, ipsum dolor.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, dolorem.</p>

    <div >
      <div >
        <img src="https://images.unsplash.com/photo-1518614368389-5160c0b0de72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8a2lkcyUyMHBsYXlpbmclMjBiYXNrZXRiYWxsfGVufDB8fDB8fA==&w=1000&q=80" alt="">
      </div>
      <div >
        <small>Build a foundation</small>
        <h3>Remedial Education</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem reprehenderit magni maiores aperiam, esse facere perspiciatis saepe alias, non laudantium qui earum cupiditate consequuntur! Natus quam vitae fugit? Eveniet, distinctio.</p><br>
        <div >
          <button >Donate₹</button>
          <button >Volunteer</button>
        </div>

</body>

</html>

CodePudding user response：

can you try the following code for hidemenu() function?

function hideMenu() {
                    document.getElementById('navLinks').style.display='none';
                }

CodePudding user response：

The reason your toggle is not working is because you forgot your '()' on the onclick="showMenu", turn this into onclick="showMenu()" like you did with onclick="hideMenu()" and it should work!

Good luck with the website!