анимация закрытия / открытия меню

Question

Я создаю сайт с мобильным меню. Кнопка меню должна быть анимированной, меню должно быть изначально скрыто и открыто при нажатии кнопки. Он также должен закрываться и анимироваться к исходному состоянию при повторном нажатии кнопки или ссылки в ней. Прямо сейчас у меня есть несколько проблем с моим кодом: 1. Меню открывается при загрузке страницы 2. Меню не закрывается при нажатии на ссылку

Код взят с реального сайта, поэтому все ссылки направляют васна страницу, которая не существует в jsfiddle. Я подготовил ссылку "Клуб", чтобы она не перенаправляла вас https://jsfiddle.net/TheBB23/nmobt0c7/2/

var coll = document.getElementsByClassName("hamburger");


var hideLinks = document.querySelectorAll('.mobilemenuitems a');



var i;





for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilemenuitems = this.nextElementSibling;
    if (mobilemenuitems.style.display === "block") {
      mobilemenuitems.style.display = "none";
    } else {
      mobilemenuitems.style.display = "block";
    }
  });
}

var hamburger = document.querySelector(".hamburger");
var header = document.querySelector(".header");
// On click
hamburger.addEventListener("click", function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  header.classList.toggle("header--is-active");
  // Do something else, like open/close menu
});

/* Responsive (Smartphone) Menu */
@media (max-width: 1000px) {

  .nav {
    height: 50px;
    width: 100%;
    background: #24603c;
    position: fixed;
    z-index: 2;
  }



  #BurgerSpace>div>button {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 3;
  }

  #BurgerSpace>div>div {
    display: block;
    margin-top: 50px;
  }

  #BurgerSpace {
    width: 100%;
    height: 50px;
    display: block;
    position: absolute;
    float: right;
    margin-right: 2%;
    padding-right: 0px;
    padding-top: -2px;
  }
}

.mobilemenuspace {
  display: none;
  width: 100%;
  position: relative;
  right: 0;
  z-index: 1;
  margin-top: 50px;
  background: pink;
}




.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover .hamburger-inner::after {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner::before {
  background: lightgrey;
}

.hamburger:hover .hamburger-inner {
  background: lightgrey;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: white;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.header--is-active {
  display: flex;
}

<div class="nav">

</div>

<div id="BurgerSpace">
  <div class="header">
    <button class="hamburger hamburger--collapse" type="button">
      <span class="hamburger-box">
        <span class="hamburger-inner"></span>
      </span>
    </button>

    <div class="mobilemenuspace">
      <div class="mobilemenuitems">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <h2> Login</h2>

        <li>
          <a href="#">CLUB</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?module=*kontakt">Kontakt</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*vorstand">Vorstand</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*mitgliedsantrag">Mitgliedschaft</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?module=*ueber_uns">Über uns</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=*Hockey">HOCKEY</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?action=*1.Herren">1. Herren</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*1.Damen">1. Damen</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="#">Jugend <span class="fa arrow"></span></a>
              <ul class="menulist">
                <li class="menulevel2">
                  <a class=" " href="?action=*Hockey-Jugend">Jugend</a>
                <li class="menulevel2">
                  <a class=" " href="?action=*MJA">Männliche Jugend A</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MJB">Männliche Jugend B</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*KnA">A Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*KnB">B Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*KnC">C Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*KnD">D Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*KnE">E Knaben</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*WJA">Weibliche Jugend A</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*WJB">Weibliche Jugend B</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MaA">A Mädchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MaB">B Mädchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MaC">C Mädchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MaD">D Mädchen</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=*MaE">E Mädchen</a>
                </li>
              </ul>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Erwachsene">Erwachsene</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Trainingsplan">Trainingsplan</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Schiedsrichter">Schiedsrichter</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Hockey-Links">offizielle Links</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=events_gruppe&id=975">Kalender</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=*Tennis">TENNIS</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Herren">HERREN</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Damen">DAMEN</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Jugend">JUGEND</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Trainer">TRAINER</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Schule">TENNISSCHULE</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*_action_events_gruppe_id_976">KALENDER</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=platzbuchung_woche&id=117">PLATZBUCHUNG</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=*Tennis-Links">OFFIZIELLE LINKS</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=*UhlenTV">UHLEN.TV</a>
        </li>

        <li>
          <a href="?module=profile">MEIN.HTCU</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="?action=profile_edit">PROFIL</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=start_news&cmd=list">ARTIKEL</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=profile_meinerechnungen">Meine Rechnungen</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=profile_mitgliedsbescheinigung">Meine Mitgliedsbescheinigung</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=profile_teilnahmebescheinigung">Meine Teilnahmebescheinigungen</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=profile_interessen">Meine Interessen</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=events_meinetermine">Meine Termine</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=admin_wunschmeine">Meine Support-Anfragen</a>
            </li>
          </ul>
        </li>

        <li>
          <a href="?module=admin">ADMIN</a>
          <ul class="menulist">
            <li class="menulevel1">
              <a class=" " href="#">KASSE <span class="fa arrow"></span></a>
              <ul class="menulist">
                <li class="menulevel2">
                  <a class=" " href="?module=kasse">KASSE</a>
                <li class="menulevel2">
                  <a class=" " href="?action=kasse_tasks">Startseite</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=kasse_beleg">SPESEN</a>
                </li>
                <li class="dropdown dropdown-submenu menulevel2">
                  <a href="#">Belege <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchung&cmd=addmulti">Belegschnellerfassung</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_angebote">Angebote</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_rechnungneu">Neue Rechnung</a>
                    </li>
                  </ul>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=members_beitragaktuell">BEITRÄGE</a>
                </li>
                <li class="dropdown dropdown-submenu menulevel2">
                  <a href="#">Rechnungen <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchungen&status=0">Rechnungen unverschickt</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchungen&status=1">Rechnungen offen</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchungen&status=2">Rechnungen in Bezahlung</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchungen&status=3">Rechnungen bezahlt</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_buchungen&status=6">Rechnungen alle</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_faellig">Übersichten</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_einzug">SEPA-ÜW/Einzug</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown dropdown-submenu menulevel2">
                  <a href="#">Buchführung <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_journal">Journal</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_guv">Gewinn und Verlust</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_bilanzoffenk">Übersichten</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_kontenrahmen">Kontenrahmen</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown dropdown-submenu menulevel2">
                  <a href="#">Barkasse <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_barkasse&konto=1000">Hauptkasse</a>
                    </li>
                  </ul>
                </li>
                <li class="dropdown dropdown-submenu menulevel2">
                  <a href="#">Bankkonten <span class="fa arrow"></span></a>
                  <ul class="menulist">
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_kontouebersicht">(Übersicht)</a>
                    </li>
                    <li class="menulevel3">
                      <a class=" " href="?action=kasse_bank&bankkonto=250">Vereinskonto Sparkasse</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=admin_overview">ÜBERBLICK</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=admin_basis">BASISKONFIG</a>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=admin_optionen">OPTIONEN</a>
            </li>
            <li class="dropdown dropdown-submenu menulevel1">
              <a href="#">VORLAGEN <span class="fa arrow"></span></a>
              <ul class="menulist">
                <li class="menulevel2">
                  <a class=" " href="?action=admin_mailtemplates">MAIL</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=admin_pdftemplates">PDF</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=admin_static">HTML</a>
                </li>
                <li class="menulevel2">
                  <a class=" " href="?action=admin_antraege">Anträge</a>
                </li>
              </ul>
            </li>
            <li class="menulevel1">
              <a class=" " href="?action=admin_wunsch">Support-Anfragen</a>
            </li>
          </ul>
        </li>




      </div>
    </div>
  </div>
</div>

Answer 1

1.) Если меню открывается при вызове страницы, вы можете скрыть его до тех пор, пока оно не будет вызвано с помощью style="display: none;" в классе mobilespacemenu.

Редактировать: Если вы действительно хотите использовать JS, чтобы скрыть меню при загрузке страницы, вы можете использовать:
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";, хотя лучше использовать ссылку на Id здесь .

2.) Добавьте EventListener в div, реагируя на щелчки и скрывая меню.

Я не совсем уверен, охватывает ли этот все точки (и правильно ли я определил меню).