skip to Main Content

So I was making a site and adding a menu but when I tried to add the close menu button all the menu buttons stopped working
Here is the HTML

<div id="openMenuButton">
      <span style= "font-size:30px;cursor:pointer"
        onclick="openMenu()">☰ Menu
      </span>
    </div>
        <div id="menu">
        <div id="closebtn">
          <span style= "font-size:36px;cursor:pointer"
            onclick="closeMenu()">&times; Close
          </span>
        </div>
          <div id="menu-items">
              <a href="/" class="menu-item">Home</a>
              <a href="games/" class="menu-item">Games</a>
              <a href="/" class="menu-item">About</a>
              <a href="/" class="menu-item">Contact Us</a>
          </div>
          <div id="menu-background-pattern"></div>
      </div>

And now the CSS

body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height:100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover > .menu-item {
  opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;

  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 9%,
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 5;

  transition: opacity 800ms ease,
    background-size 800ms ease;
}

#menu-items:hover ~ #menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

last the JS

function openMenu() {
  document.getElementById("menu").style.width = "100%";
}

function closeMenu() {
  document.getElementById("menu").style.width = "0";
}

I tried to change some things in the CSS and HTML but it still didn’t work and made it more buggy and so I got rid of the changes. I realy need help

2

Answers


  1. Here’s a potential fix for you. I’ve changed the z-index property to zero which was covering your menu items.

    function openMenu() {
      document.getElementById("menu").style.width = "100%";
    }
    
    function closeMenu() {
      document.getElementById("menu").style.width = "0";
    }
    body {
      background-color: rgb(20, 20, 20);
      margin: 0px;
    }
    
    #menu {
      height: 100%;
      width: 0;
      position: fixed;
      background-color: rgb(20, 20, 20);
      z-index: 3;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      overflow-x: hidden;
      transition: cubic-bezier(0.6, 0, 0.4, 1);
      transition-duration: 2s;
    }
    
    #openMenuButton {
      right: 25px;
      color: white;
      z-index: 0;
    }
    
    #closebtn {
      color: white;
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    #menu-items {
      margin-left: clamp(4rem, 20vw, 48rem);
      position: relative;
      z-index: 4;
    }
    
    #menu-items:hover>.menu-item {
      opacity: 0.3;
    }
    
    #menu-items:hover>.menu-item:hover {
      opacity: 1;
    }
    
    .menu-item {
      color: white;
      font-size: clamp(3rem, 8vw, 8rem);
      font-family: "Ibarra Real Nova", serif;
      display: block;
      text-decoration: none;
      padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
      transition: opacity 400ms ease;
    }
    
    #menu-background-pattern {
      height: 100vh;
      width: 100vw;
      background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
      background-position: 0% 0%;
      background-size: 12vmin 12vmin;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 0;
      transition: opacity 800ms ease, background-size 800ms ease;
    }
    
    #menu-items:hover~#menu-background-pattern {
      background-size: 11vmin 11vmin;
      opacity: 0.5;
    }
    <div id="openMenuButton">
      <span style="font-size:30px;cursor:pointer" onclick="openMenu()">&#9776; Menu
              </span>
    </div>
    <div id="menu">
      <div id="closebtn">
        <span style="font-size:36px;cursor:pointer" onclick="closeMenu()">&times; Close
                  </span>
      </div>
      <div id="menu-items">
        <a href="/" class="menu-item">Home</a>
        <a href="games/" class="menu-item">Games</a>
        <a href="/" class="menu-item">About</a>
        <a href="/" class="menu-item">Contact Us</a>
      </div>
      <div id="menu-background-pattern"></div>
    </div>
    Login or Signup to reply.
  2. The issue is with your css.

    You are put z-index as 5 for #menu-background-pattern. So this will cover the #closebtn.

    You can add z-index greater than the z-index of #menu-background-pattern to #closebtn

    I tried this in your code and it worked.
    Please check the code written below ( your code, just updated the z-index)

    function openMenu() {
          
          document.getElementById("menu").style.width = "100%";
        }
        
        function closeMenu() {
          document.getElementById("menu").style.width = "0";
        }
    body {
      background-color: rgb(20, 20, 20);
      margin: 0px;
    }
    
    #menu {
      height: 100%;
      width: 0;
      position: fixed;
      background-color: rgb(20, 20, 20);
      z-index: 3;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      overflow-x: hidden;
      transition: cubic-bezier(0.6, 0, 0.4, 1);
      transition-duration: 2s;
    }
    
    #openMenuButton {
      right: 25px;
      color: white;
      z-index: 0;
    }
    
    #closebtn {
      color: white;
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
      z-index:9
    }
    
    #menu-items {
      margin-left: clamp(4rem, 20vw, 48rem);
      position: relative;
      z-index: 4;
    }
    
    #menu-items:hover>.menu-item {
      opacity: 0.3;
    }
    
    #menu-items:hover>.menu-item:hover {
      opacity: 1;
    }
    
    .menu-item {
      color: white;
      font-size: clamp(3rem, 8vw, 8rem);
      font-family: "Ibarra Real Nova", serif;
      display: block;
      text-decoration: none;
      padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
      transition: opacity 400ms ease;
    }
    
    #menu-background-pattern {
      height: 100vh;
      width: 100vw;
      background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
      background-position: 0% 0%;
      background-size: 12vmin 12vmin;
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: 0;
      transition: opacity 800ms ease, background-size 800ms ease;
    }
    
    #menu-items:hover~#menu-background-pattern {
      background-size: 11vmin 11vmin;
      opacity: 0.5;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello World!</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
     
      <body>
         <div id="openMenuButton">
          <span style= "font-size:30px;cursor:pointer"
            onclick="openMenu()">&#9776; Menu
          </span>
        </div>
            <div id="menu">
            <div id="closebtn">
              <span style= "font-size:36px;cursor:pointer"
                onclick="closeMenu()">&times; Close
              </span>
            </div>
              <div id="menu-items">
                  <a href="/" class="menu-item">Home</a>
                  <a href="games/" class="menu-item">Games</a>
                  <a href="/" class="menu-item">About</a>
                  <a href="/" class="menu-item">Contact Us</a>
              </div>
              <div id="menu-background-pattern"></div>
          </div>
      </body>
     
    </html>

    .

    Just a suggestion, if you add some webkit style for scroll-bar, it will be great

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search