动画菜单关闭/打开行为

我正在创建一个带有移动菜单的网站。菜单按钮应为动画菜单最初应隐藏并在按下按钮时打开。当再次单击按钮或其中的链接时，它还应关闭并动画化为原始状态。现在我的代码有几个问题： 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>

1.( 如果在调用页面时菜单处于打开状态，您可能希望隐藏它，直到使用mobilespacemenu-class 上的style="display: none;"调用它.

编辑：如果你真的想在页面加载时使用 JS 来隐藏菜单，你可以使用：
document.onload = document.getElementsByClassName("mobilemenuspace")[0].style.display = "none";，尽管在这里使用 Id 引用可能是更好的选择。

2.( 将事件侦听器添加到div，对点击做出反应并隐藏菜单。

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

相关内容

最新更新

热门标签：