Я играю с идеей меню.У меня очень мало знаний по JS, поэтому я хочу знать, выполнимо ли то, что я пытаюсь достичь.
Я играл с мультибоксом из codrops это меню
Судя по всему, меню предназначено для ссылки на внешние страницы, я пытаюсь сделать ссылку на разделы на той же странице, что и при создании одностраничного сайта, поэтому мне нужно закрыть менюпри щелчке по одной из ссылок меню, поскольку в данный момент она просто остается открытой.
Я пытался использовать ту же функцию «класс», что и у кнопки «Закрыть» в ссылках, но это по какой-то причине приводит к исчезновению кнопки «Закрыть»., не эффективное решение.
Я посмотрел похожие вопросы и постарался их исправить с помощью предыдущих ответов, но мне не повезло.
<main>
<div class="frame">
<header class="codrops-header">
<div class="codrops-links">
<a class="codrops-icon codrops-icon--prev" href="https://tympanus.net/Development/GridLayoutScrollableContent/" title="Previous Demo"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
<a class="codrops-icon codrops-icon--drop" href="https://tympanus.net/codrops/?p=36043" title="Back to the article"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
</div>
<h1 class="codrops-header__title">Multibox Menu</h1>
</header>
<p class="info">12 — 24 May 2019 · Bannockburn · Stirling · UK</p>
<a class="github" href="https://github.com/codrops/MultiboxMenu/" title="Find this project on GitHub"><svg class="icon icon--github"><use xlink:href="#icon-github"></use></svg></a>
</div>
<div class="content">
<div class="background" style="background-image: url(img/1.jpg)"></div>
<h2 class="content__title">Carmeca</h2>
<p class="content__tagline">Europe's most immersive LARP experience</p>
</div>
<nav class="menu">
<div class="menu__item menu__item--1" data-direction="bt">
<div class="menu__item-inner">
<div class="mainmenu">
<a href="#" class="mainmenu__item">Story</a>
<a href="#" class="mainmenu__item">Chronicles</a>
<a href="#" class="mainmenu__item">Tour</a>
<a href="#" class="mainmenu__item">Contact</a>
</div>
<p class="label label--topleft label--vert-mirror">the important stuff</p>
<p class="label label--bottomright label--vert">made in bannockburn</p>
</div>
</div>
<div class="menu__item menu__item--2" data-direction="lr">
<div class="menu__item-inner">
<div class="menu__item-map"></div>
<a href="#" class="menu__item-hoverlink">The location</a>
</div>
</div>
<div class="menu__item menu__item--3" data-direction="bt">
<div class="menu__item-inner">
<div class="sidemenu">
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">The Gameplay</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">About LARP</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">The Rules</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">History</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">People</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">Join</span></a>
<a href="#" class="sidemenu__item"><span class="sidemenu__item-inner">...</span></a>
</div>
</div>
</div>
<div class="menu__item menu__item--4" data-direction="rl">
<div class="menu__item-inner">
<p class="label label--topleft label--line">Join us now</p>
<a href="#" class="menu__item-link">Learn how to <br> participate</a>
</div>
</div>
<div class="menu__item menu__item--5" data-direction="tb">
<div class="menu__item-inner">
<p class="quote">Hail to thee, our infantry, still brave, beyond the grave</p>
</div>
</div>
<button class="action action--menu"><svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg></button>
<button class="action action--close"><svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg></button>
</nav>
</main>
{
// Class Menu.
class Menu {
constructor(el) {
this.DOM = {el: el};
// Open and close ctls.
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
this.DOM.openCtrl.addEventListener('click', () => this.open());
this.DOM.closeCtrl.addEventListener('click', () => this.close());
this.DOM.openCtrl.addEventListener('mouseenter', () => {
allowTilt = false;
tilt.reset()
});
this.DOM.openCtrl.addEventListener('mouseleave', () => {
allowTilt = true;
});
// The menu items.
this.DOM.items = Array.from(this.DOM.el.querySelectorAll('.menu__item'));
// The total number of items.
this.itemsTotal = this.DOM.items.length;
// Custom elements that will be animated.
this.DOM.mainLinks = this.DOM.el.querySelectorAll('.mainmenu > a.mainmenu__item');
this.DOM.sidemenuLinks = this.DOM.el.querySelectorAll('.sidemenu span.sidemenu__item-inner');
this.DOM.menulink = this.DOM.el.querySelector('.menu__item-link');
}
// Open the menu.
open() {
this.toggle('open');
}
// Close the menu.
close() {
this.toggle('close');
}
toggle(action) {
if ( this.isAnimating ) return;
// (dis)allow the main image tilt effect.
allowTilt = action === 'open' ? false : true;
this.isAnimating = true;
// Toggling the open state class.
this.DOM.el.classList[action === 'open' ? 'add' : 'remove']('menu--open');
// After all is animated..
const animationEnd = (pos) => {
if ( pos === this.itemsTotal-1 ) {
this.isAnimating = false;
}
};
Я попытался взять эту строку кода и скопировать ее из файла JS this.DOM.closeCtrl.addEventListener('click', () => this.close());, изменить closeCtrl и заменить его на mainLinks, но это не так.работать и быть честным, я абсолютно не знаю, что я делаю.
Я бы подумал, что это довольно простое решение для кого-то, кто понимает JS.Надеюсь, вы можете помочь.Спасибо