Having trouble with the JSFiddle dropdown button that is unresponsive to

Question

Having trouble with the JSFiddle dropdown button that is unresponsive to

I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visible and clickable as well.

The issue with the close button seems to lie in its display property being reset to block upon click events.

function toggleMenu() {
  var hamburger = document.getElementById("burg");
  var crossIcon = document.getElementById("cross");

  var freezeBody = document.getElementById("body_freeze");

  var navList = document.getElementById("nav_list");

  var navItems = document.getElementsByClassName("nav_item");

  if (hamburger.style.display === 'none') {
    hamburger.style.display = 'block';
    crossIcon.style.display = 'none';
    navList.style.display = 'none';

    freezeBody.style.position = 'relative';
  } else {
    hamburger.style.display = 'none';
    crossIcon.style.display = 'block';
    navList.style.display = 'block';

    freezeBody.style.position = 'fixed';
  }
}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid black;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}

#burg {
  z-index: 3;
  float: right;
  display: block;
  margin: 20px;
  width: 100px;
  height: auto;
}

#burg:hover {
  background-color: gray;
}

#cross {
  z-index: 3;
  margin: 20px;
  display: none;
  float: right;
  width: 100px;
  height: auto;
}

#cross:hover {
  background-color: gray;
}

#nav_list {
  height: 100vh;
  width: 100%;
  background-color: white;
  display: none;
  z-index: 1;
}

#dummy_text {
  margin-top: 50px; 
}

.nav_item {
  margin-top: 50px;
  color: red;
  width: 100%;
  background-color: white;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  z-index: 2;
}

#body_freeze {}

<html>

<head>
  <title>ExampleError</title>
</head>

<body>
  <nav class="fixed_nav">
    <button id="burg" onclick="toggleMenu();">
  &#9776;
  </button>

    <button id="cross" onclick="toggleMenu();">
  &#735;
  </button>
    <ul id="nav_list">
      <div class="nav_item">
        <a href="#">
          <li>Inventory</li>
        </a>
      </div>

      <div class="nav_item">
        <a href="#">
          <li>Finance</li>
        </a>
      </div>  
    </ul>
  </nav>

  <div id="body_freeze">
    <p id="dummy_text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...<!--Text continues-->
    </p>
  </div>
</body>

</html>

javascript html css

Answer 1

Answer №1

The issue lies in your code where you define the "body_freeze" element as fixed but do not specify its exact position, causing it to overlay the button and prevent clicking. By adding position, top, and z-index properties to the body_freeze ID in the style definition, I was able to resolve this problem.

function menu_change() {
  var burg = document.getElementById("burg");
  var cross = document.getElementById("cross");

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

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

  var nav_items = document.getElementsByClassName("nav_item");


  if (burg.style.display === 'none') {

  burg.style.display = 'block';
  cross.style.display = 'none';
  nav_list.style.display = 'none';
  
  body_freeze.style.position = 'relative';

  } else {
  
  burg.style.display = 'none';
  cross.style.display = 'block';
  nav_list.style.display = 'block';
  
  body_freeze.style.position = 'fixed';
  
  }


}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid black;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}

#burg {
  z-index:3;
  float: right;
  display: block;
  margin: 20px;
  
  width: 100px;
  height: auto;
}

#burg:hover
{
  background-color: gray;
}

#cross {
  z-index:3;
  margin:20px;
  display: none;
  float: right;
  width:100px;
  height:auto;
}

#cross:hover
{
  background-color: gray;
}

#nav_list {
  height: 100vh;
  width: 100%;
  background-color: white;
  display: none;
  z-index: 1;
}

#dummy_text {
  margin-top: 50px;
}

.nav_item {
  margin-top:50px;
  color: red;
  width:100%;
  background-color:white;
  border-top:1px solid black;
  border-bottom: 1px solid black;
  z-index:2;
}

#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}

<html>

  <head>

    <title>ExampleError</title>
  </head>


  <body>
    <nav class="fixed_nav">

      <button id="burg" onclick="menu_change();">
  &#9776;
  </button>

      <button id="cross" onclick="menu_change();">
  &#735;
  </button>

      <ul id="nav_list">

        <div class="nav_item">
          <a href="#">
            <li>Inventory</li>
          </a>
        </div>

        <div class="nav_item">
          <a href="#">
            <li>Finance</li>
          </a>
        </div>
      </ul>
    </nav>

    <div id="body_freeze">



      <p id="dummy_text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
        mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
        eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
        ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
        mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
        est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
        fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
        aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
        accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
        at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
        non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
        nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
        facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
        vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
      </p>


    


    </div>


  </body>

</html>

Answer 2

The issue lies in your code where you define the "body_freeze" element as fixed but do not specify its exact position, causing it to overlay the button and prevent clicking. By adding position, top, and z-index properties to the body_freeze ID in the style definition, I was able to resolve this problem.

function menu_change() {
  var burg = document.getElementById("burg");
  var cross = document.getElementById("cross");

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

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

  var nav_items = document.getElementsByClassName("nav_item");


  if (burg.style.display === 'none') {

  burg.style.display = 'block';
  cross.style.display = 'none';
  nav_list.style.display = 'none';
  
  body_freeze.style.position = 'relative';

  } else {
  
  burg.style.display = 'none';
  cross.style.display = 'block';
  nav_list.style.display = 'block';
  
  body_freeze.style.position = 'fixed';
  
  }


}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 50px;
  background-color: white;
  border-bottom: 1px solid black;
  box-shadow: 0 4px 8px 0 rgb(0, 0, 0, .2);
}

#burg {
  z-index:3;
  float: right;
  display: block;
  margin: 20px;
  
  width: 100px;
  height: auto;
}

#burg:hover
{
  background-color: gray;
}

#cross {
  z-index:3;
  margin:20px;
  display: none;
  float: right;
  width:100px;
  height:auto;
}

#cross:hover
{
  background-color: gray;
}

#nav_list {
  height: 100vh;
  width: 100%;
  background-color: white;
  display: none;
  z-index: 1;
}

#dummy_text {
  margin-top: 50px;
}

.nav_item {
  margin-top:50px;
  color: red;
  width:100%;
  background-color:white;
  border-top:1px solid black;
  border-bottom: 1px solid black;
  z-index:2;
}

#body_freeze {
position: relative;
top: 100px;
z-index: 1;
}

<html>

  <head>

    <title>ExampleError</title>
  </head>


  <body>
    <nav class="fixed_nav">

      <button id="burg" onclick="menu_change();">
  &#9776;
  </button>

      <button id="cross" onclick="menu_change();">
  &#735;
  </button>

      <ul id="nav_list">

        <div class="nav_item">
          <a href="#">
            <li>Inventory</li>
          </a>
        </div>

        <div class="nav_item">
          <a href="#">
            <li>Finance</li>
          </a>
        </div>
      </ul>
    </nav>

    <div id="body_freeze">



      <p id="dummy_text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lobortis elementum nibh tellus molestie nunc non blandit massa. Sit amet purus gravida quis blandit. Ac feugiat sed lectus vestibulum
        mattis ullamcorper velit. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Egestas sed tempus urna et pharetra pharetra massa massa. Enim lobortis scelerisque fermentum dui faucibus in ornare quam. Rutrum tellus pellentesque
        eu tincidunt tortor aliquam nulla facilisi. In pellentesque massa placerat duis. Erat velit scelerisque in dictum non. Massa placerat duis ultricies lacus sed turpis tincidunt. Urna molestie at elementum eu facilisis sed odio. Ornare arcu odio
        ut sem nulla. Consequat interdum varius sit amet mattis vulputate. Justo donec enim diam vulputate ut. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Risus at ultrices mi tempus. Vestibulum morbi blandit cursus risus at ultrices
        mi tempus. Ante metus dictum at tempor commodo. Turpis nunc eget lorem dolor. Leo vel orci porta non pulvinar neque. Volutpat sed cras ornare arcu dui vivamus arcu felis bibendum. Proin sed libero enim sed faucibus. Lacus vel facilisis volutpat
        est velit. Scelerisque eleifend donec pretium vulputate sapien. Curabitur gravida arcu ac tortor. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Viverra aliquet eget sit amet tellus cras. Massa tempor nec feugiat nisl pretium
        fusce id velit ut. Ultrices sagittis orci a scelerisque. Bibendum arcu vitae elementum curabitur vitae nunc sed. Enim ut sem viverra aliquet. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Sed euismod nisi porta lorem mollis
        aliquam. Ridiculus mus mauris vitae ultricies. Ullamcorper velit sed ullamcorper morbi. Adipiscing elit pellentesque habitant morbi tristique. Nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel risus commodo viverra maecenas
        accumsan. Porttitor eget dolor morbi non arcu risus quis varius. Tortor aliquam nulla facilisi cras fermentum odio eu. In iaculis nunc sed augue lacus viverra vitae congue. Ac felis donec et odio pellentesque diam volutpat. Ut lectus arcu bibendum
        at varius vel pharetra vel. Feugiat in ante metus dictum at. Diam sit amet nisl suscipit. Nam aliquam sem et tortor. Arcu ac tortor dignissim convallis aenean et. Sed risus ultricies tristique nulla aliquet enim tortor at. Rhoncus dolor purus
        non enim praesent elementum facilisis. Integer feugiat scelerisque varius morbi enim nunc faucibus a. At varius vel pharetra vel turpis nunc eget lorem. Quam adipiscing vitae proin sagittis. Gravida cum sociis natoque penatibus. Eu feugiat pretium
        nibh ipsum consequat nisl vel. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Fringilla ut morbi tincidunt augue interdum velit euismod in. Enim tortor at auctor urna nunc. Dolor sed viverra ipsum nunc aliquet bibendum enim
        facilisis gravida. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. A diam maecenas sed enim. Tortor id aliquet lectus proin nibh nisl condimentum. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Venenatis tellus in metus
        vulputate. Mollis nunc sed id semper risus. Lacus luctus accumsan tortor posuere ac ut consequat semper. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.
      </p>


    


    </div>


  </body>

</html>

Having trouble with the JSFiddle dropdown button that is unresponsive to

Answer №1

Similar questions

Using a Regex Pattern to Validate Password Strength

Enhancing User Experience: Creating a Vue Button Component for Adding Items to Cart with the Power of Axios and Laravel Backend Integration

Exploring the capabilities of the Next.js router and the useRouter

AngularJS, building a hash of resources

Tips for presenting JSON date in JavaScript using Google Chart

Mastering the utilization of the Data object in VueJS with Decorators can be tricky. One common error message you might encounter is, "Class method 'data' expected 'this' to be used."

Leverage scope Variable in Angular Service URL

Is there a way to display only the specific child div within the parent div using JavaScript without affecting the others?

AgGrid's magical dropdown feature

Deciphering HTML within a Vue attribute: Tips and tricks

JavaScript functionality is not operational when accessed from a network drive

default selection in AngularJS select box determined by database ID

Box with negative z-index cannot be clicked

What is causing the alt or title tags to not function properly in emails?

Styling Page Titles with CSS Content

Position elements to the right side of a flex container

Use jQuery in MVC 5 to remove each cloned div individually starting from the last one, excluding the default div

The React application functions smoothly when executed using react-scripts start, but encounters an "Unexpected SyntaxError: Unexpected Token: <" error upon building

What is the best way to store images in a directory using JavaScript and ASP.NET?

The fs.fsync(fd, callback) function in the node.js API allows you