#javascript #html #css #fullscreen #onepage-scroll
#javascript #HTML #css #полноэкранный режим #onepage-прокрутка
Вопрос:
Я поиграл с идеей меню. У меня очень мало знаний в JS, поэтому я хочу знать, выполнимо ли то, чего я пытаюсь достичь.
Я играл с меню multibox из codrops этого меню
Судя по всему, меню предназначено для ссылок на внешние страницы, то, что я пытаюсь сделать, это ссылаться на разделы на той же странице, что и при создании одностраничного сайта, поэтому мне нужно, чтобы меню закрывалось при нажатии на одну из ссылок меню, поскольку в настоящее время оно просто остается открытым.
Я пытался использовать ту же функцию «class» из кнопки закрытия в ссылках, но это по какой-то причине приводит к исчезновению кнопки закрытия, что не является эффективным решением.
Я просмотрел опубликованные похожие вопросы и попытался исправить с помощью предыдущих ответов, но мне не повезло.
<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 amp;mdash; 24 May 2019 amp;middot; Bannockburn amp;middot; Stirling amp;middot; 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. Надеюсь, вы сможете помочь. Спасибо
Ответ №1:
Я нашел решение, которое, я уверен, можно улучшить, но, тем не менее, оно выполняет свою работу…
HTML (добавьте элемент -закрыть классы)
<a href="#" class="mainmenu__item item--close1">Item1</a>
<a href="#" class="mainmenu__item item--close2">Item2</a>
<a href="#" class="mainmenu__item item--close3">Item3</a>
<a href="#" class="mainmenu__item item--close4">Item4</a>
<a href="#" class="mainmenu__item item--close5">Item5</a>
JAVASCRIPT (добавьте этот код demo.js )
// Open and close ctls.
this.DOM.openCtrl = this.DOM.el.querySelector('.action--menu');
this.DOM.closeCtrl = this.DOM.el.querySelector('.action--close');
this.DOM.ItemcloseCtrl1 = this.DOM.el.querySelector('.item--close1');
this.DOM.ItemcloseCtrl2 = this.DOM.el.querySelector('.item--close2');
this.DOM.ItemcloseCtrl3 = this.DOM.el.querySelector('.item--close3');
this.DOM.ItemcloseCtrl4 = this.DOM.el.querySelector('.item--close4');
this.DOM.ItemcloseCtrl5 = this.DOM.el.querySelector('.item--close5');
this.DOM.openCtrl.addEventListener('click', () => this.open());
this.DOM.closeCtrl.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl1.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl2.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl3.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl4.addEventListener('click', () => this.close());
this.DOM.ItemcloseCtrl5.addEventListener('click', () => this.close());