问‘响应式菜单jquery html和css

EN

$(document).ready(function() {
  click_events();
});

function click_events() {
  $("#menu ul li a").click(function() {
    $(this).parent().parent().parent().animate({
      "margin-left": "-100%"
    });
    $("#btn-menu").prop("checked", false);
    $("label").click(function() {
      if ($("#btn-menu").prop("checked", true)) {
        $("#menu").animate({
          "margin-left": "0"
        });
      }
    })
  });
}

<header class="header">
  <div class="container">
    <div class="img-logo-container">
      <img src="images/logo.png" alt="">
    </div>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu"><i class="fas fa-bars"></i></label>
    <nav class="menu" id="menu">
      <ul>
        <li><a href="#episodes">Episodios</a></li>
        <li><a href="#invited">Invitados</a></li>
        <li><a href="#topics">Temas</a></li>
        <li><a href="#new">Novedades</a></li>
      </ul>
    </nav>
  </div>
</header>

@media screen and (max-width: 991px) {
  header label {
    display: block;
  }
  header nav {
    position: fixed;
    background: #ffffff;
    z-index: 1000;
    width: 100%;
    left: 0;
    top: 70px;
    height: 100vh;
    overflow-y: auto;
    margin-left: -100%;
  }
  #btn-menu:checked~.menu {
    margin-left: 0;
    transition: 0;
  }
  #btn-menu:not(:checked)~.menu {
    margin-left: -100%;
    transition: 0;
  }
  header nav ul li {
    display: block;
    text-align: center;
    border-bottom: 1px solid black;
    padding: 20px 0;
    margin-left: 15px;
    margin-right: 15px;
  }
  #btn-menu:checked~.menu {
    display: block;
    width: 100%;
  }
}