javascript - 如何修复此导航菜单汉堡按钮？

Question

我的标题有问题，当我在移动设备中打开此网站并单击汉堡按钮时，导航菜单根本无法响应。菜单位于“position: fixed”，根据不同的手机我需要更改“top: n%”，所以我不知道这是如何响应的。

问题图片https://i.gyazo.com/7ca78e79ced8784c8e72ebc7090920d3.png图片问题图片https://i.gyazo.com/4cda3f4bc256719a4d565e74d131e7a0.png

网站链接http://maderines.000webhostapp.com/

const ipad = window.matchMedia('screen and (max-width: 658px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');

ipad.addListener(validation)

function validation(event) {
  if (event.matches) {
    burgerButton.addEventListener('click', hideShow);
  } else {
    burgerButton.removeEventListener('click', hideShow);
  }
}

validation(ipad);

function hideShow() {
  if (menu.classList.contains('is-active')) {
    menu.classList.remove('is-active');
  } else {

    menu.classList.add('is-active');

  }
}

/* start HEADER */

.header {
  background-color: rgba(0, 0, 0, 0.692);
  color: white;
  display: flex;
  height: 80px;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
  position: fixed;
  z-index: 2;
}

.header figure {
  justify-self: center;
  padding-top: 5px;
}

.menu {
  height: inherit;
}

.header ol {
  font-family: inherit;
  display: flex;
  height: inherit;
  font-size: 17px;
}

.header ol li {
  height: inherit;
}

.header a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: inherit;
  padding: 0 10px;
  transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
}

.header ol a:hover {
  transform: scale(1.2);
  opacity: 1;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

.burger-button {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  display: none;
  position: fixed;
  left: 10px;
  top: 20px;
  color: white;
  font-size: 28px;
}


/* end HEADER */


/* start Responsive */

@media screen and (max-width:781px) {
  .header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: auto;
    align-items: center;
  }
}

@media screen and (max-width:658px) {
  .burger-button {
    display: block;
    position: fixed;
    z-index: 3;
    justify-content: center;
    align-self: center;
    top: 15px;
  }
  .header ol {
    display: block;
    font-size: 20px;
  }
  .header ol li {
    height: 40px;
  }
  .menu {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.692);
    top: 12%;
    left: -300px;
    height: auto;
    transition: .3s;
  }
  .menu.is-active {
    left: 0;
  }
}

@media screen and (max-width:480px) {
  .burger-button {
    top: 10px;
  }
  .menu {
    top: 12%;
  }
}

@media screen and (max-width:425px) {
  .menu {
    top: 14%;
  }
}

@media screen and (max-width:320px) {
  .menu {
    top: 14vh;
  }
  .burger-button {
    line-height: 40px;
    width: 40px;
    height: 40px;
    left: 10px;
    top: 15px;
    font-size: 20px;
  }
}

<i class="icon-menu burger-button" id="burger-menu"></i>
<div class="fondo">
  <header class="header">
    <figure class="logo ">
      <a href="index.html"><img src="images/log3o.png" alt="Logo Carpinteria Mader Ranch"></a>
    </figure>
    <nav class="menu">
      <ol>
        <li><a href="index.html" class="link">Inicio</a></li>
        <li><a href="./nuestros_trabajos/indexing.html" class="link">Nuestros trabajos</a></li>
        <li><a href="#contacto" class="link">Contacto</a></li>
        </ul>
    </nav>
  </header>

Answer 1

如果我理解您要做什么，您只需将菜单类从 position: fixed; 更改为 position: absolute; 并设置 top: 97% 到所有媒体尺寸，所以你应该:

    const ipad = window.matchMedia('screen and (max-width: 658px)');
    const menu = document.querySelector('.menu');
    const burgerButton = document.querySelector('#burger-menu');
    
    ipad.addListener(validation)
    
    function validation(event) {
      if (event.matches) {
        burgerButton.addEventListener('click', hideShow);
      } else {
        burgerButton.removeEventListener('click', hideShow);
      }
    }
    
    validation(ipad);
    
    function hideShow() {
      if (menu.classList.contains('is-active')) {
        menu.classList.remove('is-active');
      } else {
    
        menu.classList.add('is-active');
    
      }
    }
    

    /* start HEADER */
    
    .header {
      background-color: rgba(0, 0, 0, 0.692);
      color: white;
      display: flex;
      height: 80px;
      width: 100%;
      justify-content: space-around;
      flex-wrap: wrap;
      position: fixed;
      z-index: 2;
    }
    
    .header figure {
      justify-self: center;
      padding-top: 5px;
    }
    
    .menu {
      height: inherit;
    }
    
    .header ol {
      font-family: inherit;
      display: flex;
      height: inherit;
      font-size: 17px;
    }
    
    .header ol li {
      height: inherit;
    }
    
    .header a {
      color: white;
      text-decoration: none;
      display: flex;
      align-items: center;
      height: inherit;
      padding: 0 10px;
      transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
    }
    
    .header ol a:hover {
      transform: scale(1.2);
      opacity: 1;
    }
    
    ol,
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    figure {
      margin: 0;
    }
    
    .burger-button {
      width: 60px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      display: none;
      position: fixed;
      left: 10px;
      top: 20px;
      color: white;
      font-size: 28px;
    }
    
    
    /* end HEADER */
    
    
    /* start Responsive */
    
    @media screen and (max-width:781px) {
      .header {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        height: auto;
        align-items: center;
      }
    }
    
    @media screen and (max-width:658px) {
      .burger-button {
        display: block;
        position: fixed;
        z-index: 3;
        justify-content: center;
        align-self: center;
        top: 15px;
      }
      .header ol {
        display: block;
        font-size: 20px;
      }
      .header ol li {
        height: 40px;
      }
      .menu {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.692);
        top: 97%;
        left: -300px;
        height: auto;
        transition: .3s;
      }
      .menu.is-active {
        left: 0;
      }
    }
    
    @media screen and (max-width:480px) {
      .burger-button {
        top: 10px;
      }
      .menu {
        top: 97%;
      }
    }
    
    @media screen and (max-width:425px) {
      .menu {
        top: 97%;
      }
    }
    
    @media screen and (max-width:320px) {
      .menu {
        top: 97%;
      }
      .burger-button {
        line-height: 40px;
        width: 40px;
        height: 40px;
        left: 10px;
        top: 15px;
        font-size: 20px;
      }
    }

    <i class="icon-menu burger-button" id="burger-menu"></i>
    <div class="fondo">
      <header class="header">
        <figure class="logo ">
          <a href="index.html"><img src="http://maderines.000webhostapp.com/images/log3o.png" alt="Logo Carpinteria Mader Ranch"></a>
        </figure>
        <nav class="menu">
          <ol>
            <li><a href="index.html" class="link">Inicio</a></li>
            <li><a href="./nuestros_trabajos/indexing.html" class="link">Nuestros trabajos</a></li>
            <li><a href="#contacto" class="link">Contacto</a></li>
            </ul>
        </nav>
      </header>
    </div>