动画菜单 closing/opening 行为

Question

我正在创建一个带有移动菜单的网站。菜单按钮应该是动画的，菜单应该在按下按钮时隐藏和打开。当再次单击按钮或其中的 link 时，它还应该关闭并动画到原始状态。现在我的代码有几个问题： 1.加载页面时菜单打开 2. 单击 link

时菜单不会关闭

该代码来自真实网站，因此所有 link 都将您定向到 jsfiddle 中不存在的子页面。我准备了 link "Club" 这样它就不会重定向你 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.) 如果在调用页面时菜单处于打开状态，您可能希望在 mobilespacemenu-class.[=19 上使用 style="display: none;" 调用之前隐藏它=]
编辑： 如果你真的想使用 JS 在页面加载时隐藏菜单，你可以使用：
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";，尽管使用 Id 引用可能是一个更好的选择 here.

2.) 添加一个 EventListener 到 div，对点击做出反应并隐藏菜单。

我不太确定this是否涵盖了所有要点（以及我是否正确确定了菜单）。

动画菜单 closing/opening 行为

animated menu closing/opening behaviour

html

javascript

css

mobile

menu