[英]How to close the menu when clicking on the link
My menu closes only when you click on the cross button.我的菜单仅在您单击十字按钮时关闭。 But this is not convenient in the landing page.
但这在登陆页面中并不方便。 I want it to close when I click on any link from the menu.
当我单击菜单中的任何链接时,我希望它关闭。 I tried to add the code myself, but it doesn't work out for me.
我试图自己添加代码,但它对我不起作用。 I tried adding querySelector, it worked only on the home link.
我尝试添加 querySelector,它仅适用于主页链接。 Other links did not close the menu.
其他链接没有关闭菜单。 What am I doing wrong?
我究竟做错了什么?
let burger = document.getElementById("burger"), nav = document.getElementById("main-nav"), a = document.getElementsByClassName(".nav-link"); burger.addEventListener("click", function(e) { this.classList.toggle("is-open"); nav.classList.toggle("is-open"); }); a.addEventListener("click", function(e) { burger.classList.toggle("is-open"); nav.classList.toggle("is-open"); });
body { background: #000; } .main-nav { position: absolute; top: 0; right: 0; left: -18px; text-align: center; background: #fff; opacity: 0; z-index: -1; visibility: hidden; -webkit-transition: .375s; transition: .375s; height: 100vh; margin: 0 !important; } .main-nav.is-open { opacity: 1; z-index: 100; visibility: visible; } .main-nav::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -15px; background: #000; transform-origin: 0 0; transform: skew(-14deg) translateX(-120%); transition: all .275s .1s; } .main-nav.is-open::before { transform: skew(-14deg) translateX(0); } .main-nav ul { display: inline-flex; flex-direction: column; height: 60%; align-items: flex-end; justify-content: center; transform: translateX(-18%) skew(-16deg); } .main-nav li { display: block; margin: .5rem 0; text-align: right; transform: skew(16deg); } .main-nav a { opacity: 0; transform: translateY(-10px); } .main-nav.is-open a { opacity: 1; transform: translateY(0); } .open-main-nav { position: absolute; top: 15px; padding-top: 20px; z-index: 1000; background: none; border: 0; cursor: pointer; } .open-main-nav:focus { outline: none; } .burger { position: relative; display: block; width: 28px; height: 4px; margin: 0 auto; background: #fff; transform: skew(5deg); transition: all .275s; } .burger:after, .burger:before { content: ''; display: block; height: 100%; background: #fff; transition: all .275s; } .burger:after { transform: translateY(-12px) translateX(-2px) skew(-20deg); } .burger:before { transform: translateY(-16px) skew(-10deg); }
<button id="burger" class="navbar-toggler open-main-nav"><span class="burger"></span></button> <nav class="main-nav" id="main-nav"> <ul> <li><a href="#home" class="nav-link" title="">home</a></li> <li><a href="#services" class="nav-link" title="">services</a></li> <li><a href="#portfolio" class="nav-link" title="">portfolio</a></li> <li><a href="#about" class="nav-link" title="">about</a></li> <li><a href="#contacts" class="nav-link" title="">contacts</a></li> </ul> </nav>
Element.querySelector()
and Element.querySelectorAll()
Element.querySelector()
和Element.querySelectorAll()
.forEach()
in order to assign a click listener to every anchor..forEach()
对其进行迭代,以便为每个锚点分配一个点击侦听器。 const burger = document.querySelector("#burger"), nav = document.querySelector("#main-nav"), // Use ID, if you already use one. a = document.querySelectorAll(".nav-link"); // PS: Use the right selectors! burger.addEventListener("click", function(e) { this.classList.toggle("is-open"); nav.classList.toggle("is-open"); }); a.forEach(el => el.addEventListener("click", function(e) { burger.classList.toggle("is-open"); nav.classList.toggle("is-open"); }));
body { background: #000; } .main-nav { position: absolute; top: 0; right: 0; left: -18px; text-align: center; background: #fff; opacity: 0; z-index: -1; visibility: hidden; -webkit-transition: .375s; transition: .375s; height: 100vh; margin: 0 !important; } .main-nav.is-open { opacity: 1; z-index: 100; visibility: visible; } .main-nav::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -15px; background: #000; transform-origin: 0 0; transform: skew(-14deg) translateX(-120%); transition: all .275s .1s; } .main-nav.is-open::before { transform: skew(-14deg) translateX(0); } .main-nav ul { display: inline-flex; flex-direction: column; height: 60%; align-items: flex-end; justify-content: center; transform: translateX(-18%) skew(-16deg); } .main-nav li { display: block; margin: .5rem 0; text-align: right; transform: skew(16deg); } .main-nav a { opacity: 0; transform: translateY(-10px); } .main-nav.is-open a { opacity: 1; transform: translateY(0); } .open-main-nav { position: absolute; top: 15px; padding-top: 20px; z-index: 1000; background: none; border: 0; cursor: pointer; } .open-main-nav:focus { outline: none; } .burger { position: relative; display: block; width: 28px; height: 4px; margin: 0 auto; background: #fff; transform: skew(5deg); transition: all .275s; } .burger:after, .burger:before { content: ''; display: block; height: 100%; background: #fff; transition: all .275s; } .burger:after { transform: translateY(-12px) translateX(-2px) skew(-20deg); } .burger:before { transform: translateY(-16px) skew(-10deg); }
<button id="burger" class="navbar-toggler open-main-nav"><span class="burger"></span></button> <nav class="main-nav" id="main-nav"> <ul> <li><a href="#home" class="nav-link" title="">home</a></li> <li><a href="#services" class="nav-link" title="">services</a></li> <li><a href="#portfolio" class="nav-link" title="">portfolio</a></li> <li><a href="#about" class="nav-link" title="">about</a></li> <li><a href="#contacts" class="nav-link" title="">contacts</a></li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.